Using both media and class for dark mode

[arnissolle]

I'd like to set my website theme based on user preference (prefers-color-scheme). So I configured media in the darkMode config. But I'd also like to let the user override this and force light theme (if the system one is dark).

How can I use both media and class? Thanks!

// tailwind.config.js
module.exports = {
  darkMode: 'media', // or 'class'
  // ...
}

As @trm217 answered, there is no way to use both natively for the moment. Hope this will change in the futur.

[trm217]

There is no way for TailwindCSS to achieve that behavior. They also can't really do it without massively bloating the CSS file. I would solve this programmatically.

I for example use the next-themes package in my Next.js project to achieve this behavior.
There are plenty of solutions that add this behavior to all common libs.
Usually, this is achieved by having the theme options: "system", "light" & "dark".
By default, the theming is set to "system" so that it changes according to the color-scheme media query.
However, if the user overrides this by changing the theme manually, the theme is set to "light" or "dark".
The setting is then persisted to make sure the correct theme is used for the user when he returns to the website.

What tech stack do you work with? Perhaps I could help you find a fitting package.

[okikio]

This would be possible if Tailwind could generate css variables, to either enable or disable dark theme

[oliverpool]

@trm217 what do you think of the approach I propose in #10020 ?

      @media (prefers-color-scheme: dark) {
        .auto-dark:not(.-dark) .dark\:font-bold {
          font-weight: 700;
        }
      }
      .dark .dark\:font-bold {
        font-weight: 700;
      }

Or is it "massively bloating the CSS file", as you wrote? (in my case that would be a tradeoff I am willing to make for better accessibility)

[mirismaili]

next-themes library has a hydration issue:

Warning: Prop style did not match. Server: "scroll-behavior: smooth; color-scheme: light;" Client: "scroll-behavior:smooth"

[mirismaili]

localStorage approch is a client-side solution that should be wrapped in a useEffect/useLayoutEffect (to avoid the above next-themes hydration issue) and then makes a bad flash-on-load effect.

[oliverpool]

Here is another way: use the “ prefers-color-scheme” setting and switch the colors in JS if needed by disabling the CSS rules in JS.

Working example:

https://codeberg.org/forgejo/website/src/commit/e570fa56be8e83c94bcad6fccfc8f9e156cc8b56/src/components/core/ToggleTheme.astro

[mirismaili]

We need something like this:

`dark:${cssClass} [@media(prefers-color-scheme:dark)]:[&:not([data-theme]_&)]:${cssClass}`

(for when we configured tailwind as darkMode: ['class', '[data-theme=dark]'])

[mcpdigital]

This is the only way tailwind works with next-themes, tried dozens of ways to set the darkMode class, changing elements etc but nobody has this information or is it a hidden one: Talking about this: (for when we configured tailwind as darkMode: ['class', '[data-theme=dark]']) where is this documented, do you know ?
thanks

[ShelbyJenkins]

Even easier:

    function overrideMediaQuery() {
        for (let i = 0; i < document.styleSheets.length; i++) {
            try {
                const sheet = document.styleSheets[i];
                const rules = sheet.cssRules;
                for (let j = 0; j < rules.length; j++) {
                    const rule = rules[j];
                    if (!(rule instanceof CSSMediaRule)) {
                        continue;
                    }
                    if (rule.media.mediaText !== '(prefers-color-scheme: dark)') {
                        continue;
                    }
                    console.log(rule.cssRules[0].selectorText)
                    let selector = rule.cssRules[0].selectorText;
                    if (selector === ':root') {
                        selector = ':root.dark'
                    } else {
                        selector = `:is(.dark ${selector})`
                    }
                    const newRule = `${selector} { ${rule.cssRules[0].style.cssText} }`;
                    document.styleSheets[i].deleteRule(j);
                    document.styleSheets[i].insertRule(newRule, j);
                }
            } catch (e) {
                console.log(e);
            }
        }
    }

Call it after you load, and then toggle the initial theme.