darkMode: 'class' doesn't appear to be honored by daisyUI

[longrunningprocess]

I currently supply light, dark themes to the daisyui config:

module.exports = {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	plugins: [
		require('@tailwindcss/typography'),
		require('daisyui'),
	],
	daisyui: {
		themes: [
			{
				light: {
					...require('daisyui/src/colors/themes')['[data-theme=light]'],
					primary: '#104060',
					secondary: '#0a2440',
				}
			},
			{
				dark: {
					...require('daisyui/src/colors/themes')['[data-theme=dark]'],
					primary: '#104060',
					secondary: '#0a2440',
				}
			},
		],
	},
}

I was expecting I could apply the following (https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) and force daisyUI not to look at media anymore:

...
	darkMode: 'class',
	daisyui: {
...

However, it seems the media queries were still in place:

Repro: https://play.tailwindcss.com/j0PXQiL4OD. I believe the light mode should be getting rendered with that darkMode setting.

Should daisyUI be respecting that darkMode option?

[saadeghi]

This is a different approach.

Tailwind's dark mode needs dark: prefix and when your OS is using the dark mode (or you use class option and the add the dark class to HTML tag) all the class names with dark: prefix gets activated.

daisyUI is using another approach:
Your class names are the same. You don't need dark: prefix in all your elements and you don't need to set light / dark colors for all elements manually.
You use one of these color names instead. This colors get their values from CSS variables.
This way we can have more than 2 themes or we can change a color in the entire app by change one variable value. This wouldn't be possible with the way Tailwind CSS darkmode config suggests.

Tailwind CSS darkMode: 'class', config has no effect on daisyUI because its job is something else: activating the class names with dark: prefix.

If you don't want the daisyUI dark theme to be activated when OS is using the dark mode, you can either remove the dark theme from the themes array in config:
https://play.tailwindcss.com/K5ZJH1RiLz?file=config

Or you can set the darkTheme config to another theme name (or a name that doesn't exist):
https://play.tailwindcss.com/RzMIuxXOto?file=config

[longrunningprocess]

ok, I appreciate what daisyUI is doing for me in regards to switching between modes among all kinds of themes, thank you!

Tailwind CSS darkMode: 'class', config has no effect on daisyUI because its job is something else: activating the class names with dark: prefix.

This was what I was wanting to confirm, I wonder if it might be worthwhile mentioning something like "darkMode is ignored..." if you think others might have the same confusion? You would know better whether this is a common misconception or not.

Thanks for offering those alternative approaches, I did know I could simply remove the second theme but your other trick I had not considered.

[CodeSnooker]

This is a different approach.

Tailwind's dark mode needs dark: prefix and when your OS is using the dark mode (or you use class option and the add the dark class to HTML tag) all the class names with dark: prefix gets activated.

daisyUI is using another approach: Your class names are the same. You don't need dark: prefix in all your elements and you don't need to set light / dark colors for all elements manually. You use one of these color names instead. This colors get their values from CSS variables. This way we can have more than 2 themes or we can change a color in the entire app by change one variable value. This wouldn't be possible with the way Tailwind CSS darkmode config suggests.

Tailwind CSS darkMode: 'class', config has no effect on daisyUI because its job is something else: activating the class names with dark: prefix.

If you don't want the daisyUI dark theme to be activated when OS is using the dark mode, you can either remove the dark theme from the themes array in config: https://play.tailwindcss.com/K5ZJH1RiLz?file=config

Or you can set the darkTheme config to another theme name (or a name that doesn't exist): https://play.tailwindcss.com/RzMIuxXOto?file=config

That pretty much limits the scope of the daisyUI in terms of flexing the customization of UI elements. How can I achieve the following scenario?

in div 1 I need bg-primary for light mode but bg-secondary for dark mode. I cannot use the bg-primary for dark mode and I cannot also interchange the value of bg-primary and bg-secondary in the dark mode due to other design constraints.

Currently I achieved this writing custom sass classes and added to the component. However, if there is way use dark: as prefix in class for daisyUI then it will be quite helpful

[saadeghi]

@CodeSnooker the whole point of using semantic color names is not having to specify colors for each theme.
If we need div 1 to be blue on first theme and be green on second theme, we set [let's say] primary as blue on first theme and we set primary as green on second theme.
Read this page for more info: https://daisyui.com/docs/colors/

[CodeSnooker]

@CodeSnooker the whole point of using semantic color names is not having to specify colors for each theme. If we need div 1 to be blue on first theme and be green on second theme, we set [let's say] primary as blue on first theme and we set primary as green on second theme. Read this page for more info: https://daisyui.com/docs/colors/

Thank you. I have gone through the page already and created colors accordingly. But the design that I have to implement needs a different color combination for light and dark modes for a different set of pages.

[Blakeinstein]

Sorry to revive a closed discussion but I am unsure of how to implement a toggle-able dark mode button?

Like I understand daisy-ui would apply themes based on media preference reported by the browser, but in the case where I have a client controlled toggle button, what then? The button wont sent the appropriate media preference...

[wuarmin]

Checkout https://github.com/saadeghi/theme-change. Works perfectly!

[aleksa-codes]

I want to leave this here because I had a problem that required for me to use dark: prefix via darkMode: class in the settings from Tailwind in order to get different animations, box-shadow color in my case, for different theme/mode using daisyUI. And I think I found a way, so for anyone in the same boat I hope this will be helpful.

docs: https://tailwindcss.com/docs/dark-mode#customizing-the-class-name

The tailwind.config.cjs would look like this:

module.exports = {
  content: ['./src/**/*.{astro,html,svelte,vue,js,ts,jsx,tsx}'],
  plugins: [require('daisyui')],
  theme: { ... },
daisyui: {
    themes: ['winter', 'night']
  },
  darkMode: ['class', '[data-theme="night"]']
}

The most important thing here is using darkMode: ['class', '[data-theme="night"]'] where you specify the Daisy theme you want Tailwind's dark class to apply to, in this case Night. Winter theme is light theme and Night is dark theme, because we specified it in that order in themes array for the daisyui object, above darkMode. But you need the darkMode array to have '[data-theme="night"]' as the second value of the array, after 'class', because theme-change package recommended by daisyUI for dark mode, uses data-theme attribute on the <html> tag for changing the themes.

For the darkMode toggle component using the theme-change mentioned above you would have <label> tag with props like this:

<label
  class='btn btn-square btn-ghost swap swap-rotate'
  data-toggle-theme='night'
  data-act-class='swap-active'
>
...
</label>

Look at the data-toggle-theme='night' attribute above in <label>. This is the place where you are setting data-theme="night" attribute to <html> via theme-change, to which darkMode: ['class', '[data-theme="night"]'] option in the Tailwind settings then refers to.

Then you use it like usual:

<div class='dark:...'>
...
</div>

and class after dark: will apply on the <div> when you use/switch to, in this case, daisyUI Night theme.

As @saadeghi said, for the simple theme toggling you don't need the dark: prefix at all , because daisyUI uses a different approach. Still, there are some specific cases like this one (different custom tailwind animation depending on the mode) where you need dark: so you might have to use my solution above.

[saadeghi]

Thank you @aleksa-codes
I should also mention another solution here:

If you want different custom styles for each daisyUI theme, you can still do it without using dark: prefix.
Any custom CSS can be added to a daisyUI theme like this:
https://play.tailwindcss.com/1uLcMbXkrd?file=config

module.exports = {
  plugins: [
    require('daisyui'),
  ],
  daisyui:{
    themes:[
      {
        light: {
          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
          ".btn": {
            "transition-duration": "100ms",
          }
        },
        dark: {
          ...require("daisyui/src/colors/themes")["[data-theme=dark]"],
          ".btn": {
            "transition-duration": "1000ms",
          }
        },
      }
    ]
  }
}

You can even use @apply!
https://play.tailwindcss.com/8Uc3sAjNLH?file=config

module.exports = {
  plugins: [
    require('daisyui'),
  ],
  daisyui:{
    themes:[
      {
        light: {
          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
          ".btn": {
            "@apply duration-100": "",
          }
        },
        dark: {
          ...require("daisyui/src/colors/themes")["[data-theme=dark]"],
          ".btn": {
            "@apply duration-1000": "",
          }
        },
      }
    ]
  }
}

[gpx75]

adding darkMode: ["class", '[data-theme="dark"]'] to tailwind's configuration did the trick.
Thanks to aleksa-codes

[qqpann]

Genius!

[commandcenterio]

Lets say i have 5 themes, 3 have a base of dark and 2 have a base of light.
With the approach mentioned above, i can only apply the dark color-scheme to one of my 5 themes, the rest are treated as light even though the color-scheme is set to dark. (screenshot attached)
the <div class="dark:bg-primary"> only works on the default darkMode theme i define in tailwind config.

How can i have darkMode (dark/light) be applied to multiple themes?

[saadeghi]

@commandcenterio @media (prefers-color-scheme: dark) shouldn't be confused with with color-scheme: dark

• @media (prefers-color-scheme: dark) media query applies specific styles when OS or browser is set to use the dark mode.
• color-scheme: dark defines that current style is a dark theme so by default text will be light, background, scrollbars, etc will be dark.

You can add 'color-scheme': 'dark', (or any custom CSS) to your custom theme:

Example: https://play.tailwindcss.com/StVCXx6Hse?file=config

[razlani]

darkMode: ['class', '[data-theme="night"]']

@saadeghi I understand that this may be a diff approach as per your response above - my qualm I suppose is that the option is supported but doesn't seem to be mentioned anywhere after I scoured the docs, so was a magical string when I stumbled upon this closed discussion!

• I may be wrong though?

Checked

https://daisyui.com/docs/config/ and
https://daisyui.com/docs/themes/

For the above quoted code.

Cheers

[saadeghi]

darkMode: ['class', '[data-theme="night"]'] is just a smart hack.
Generally no one even needs the dark: prefix when using daisyUI. The whole point of using CSS variables for colors is that you don't need to set a dark color for each element manually.

[adnan-smlatic]

@aleksa-codes Thank you so much for this.

I don't understand what your problem with dark: is @saadeghi? As the creator of this plugin, you'd think that you would be supportive and helpful for such issues, instead you seem to be actively shutting down and dissing any use of dark: for absolutely no reason. Just because you think there is no reason to use it, doesn't mean others do.

If I wanted to use raw CSS, I wouldn't be using Tailwind would I? Not to mention, the countless components and plugins built in tailwind that get broken with DaisyUI without darkMode: ['class', '[data-theme="dark"]'].

[saadeghi]

To be clear, I'm not dissing anything.
As daisyUI provides a faster, easier, more practical way to have multiple themes, I will happily help with issues and questions about daisyUI.

But dark: prefix is not related to daisyUI at all. It's a different method.
In my opinion adding a hundred dark: dark: dark: class names just to have a dark mode, is not practical. It's not even possible to have a 3rd or 4th theme with this method. Meanwhile thanks to CSS variables, daisyUI can give you multiple themes without adding a new class name.

I suggest listening to this episode of Syntax.fm about theme implementation methods:
https://syntax.fm/show/690/how-to-dark-mode-and-beyond

[adnan-smlatic]

I understand, but as an example of a scenario, React tailwind datepicker dark mode is broken if dark: does not work. And I have no interest or time to modify the entire thing to work with daisy, and am sure others have run into similar issues. That alone should be enough reason for the dark: support to be better documented and supported despite not being intended to be used. You're not adding a hundred dark:, it's usually just a specific element that you want to change. Especially when it comes to custom components, that you have to dig through to find the right CSS element, whereas with dark: you just apply the class quickly.

Other than that, I have been enjoying Daisyui very much. Thank you for making it and having it open source, much love!

[saadeghi]

Thanks.
react-tailwindcss-datepicker supports custom class names for the input using inputClassName prop. So you can do something like this to apply daisyUI input styles to it easily:

<Datepicker
  value={value}
  onChange={handleValueChange}
+  inputClassName="input input-bordered text-base-content w-full"
/>

Example: https://stackblitz.com/edit/daisyui-nextjs-ugfnqj/?file=app%2Fpage.jsx

However it doesn't allow you to edit the class names inside the calendar popover. There are open issues such as:

• [Feature Request] Use custom colors instead of being limited to predefined ones onesine/react-tailwindcss-datepicker#29
• custom classnames onesine/react-tailwindcss-datepicker#224
• Any chance to add more options for customising styles? onesine/react-tailwindcss-datepicker#123
• support custom color in calendar onesine/react-tailwindcss-datepicker#212

I understand that you want to simply install a plugin and you want it to work and you don't care about the details but if the calendar plugin doesn't allow custom styles, it's not something I can help with on my side unfortunately.