Theme Controller using a swap

[lorenzo-mm]

Hello, I wanted to ask if it is possible to use Theme Controller using a swap in Nextjs (TypeScript) with TailwindCSS? If possible, how do I make it work in the button using the parameters directly in the classes, for example: **className='bg-neutral-200 dark:bg-dark'**

thank you all in advance

[saadeghi]

You can use them together. Here's an example:
https://play.tailwindcss.com/gyf1YzaJ8r

But I'm not sure what are you trying to do with className='bg-neutral-200 dark:bg-dark'?? These color names don't exist in Tailwind CSS neither in daisyUI

[lorenzo-mm]

Thank you for the help,
although I was testing and I did this and it works well, I leave the code here, in case someone wants to check it:
(for NextJS + TypeScript + tailwindCSS)

`'use client'
import React, { useEffect, useState } from 'react'

const sun = (
<svg
className='swap-on fill-yellow-300 w-12 h-11 p-1'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24'

<path
  d='M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z'
/>

)

const moon = (
<svg
className='swap-off fill-cyan-950 w-11 h-11 p-1'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24'

<path
  d='M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z'
/>

)

const BtnDarkMode: React.FC = () => {
const [theme, setTheme] = useState(localStorage.getItem('theme') ?? 'light')

const handleToggle = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'black' : 'light')
};

useEffect(() => {
localStorage.setItem('theme', theme)
document.querySelector('html')?.setAttribute('data-theme', theme)
}, [theme])

return (
<button className={rounded-full swap swap-rotate ${theme === 'black' ? 'swap-active' : ''}} onClick={handleToggle}>
{sun}
{moon}

);
};

export default BtnDarkMode`

Now that my button works the way I want, I wanted to ask about the THEMES section that you have on the page to use it in dark mode, I have set [light and black](themes: [ 'light', 'black'] in tailwind.config.ts, as in one of the examples that There is in the section, and my question is, how can I make the texts also change color when changing the mode?

thank you so much