Simpler dark mode setup

[xixixao]

Might be worth mentioning that with CSS variables you can get simple dark mode by replacing

.dark {

in the global CSS file (perhaps app/tailwind.css)

with

@media (prefers-color-scheme: dark) {
    :root {

and add the second closing brace below the variable names.

This doesn't require any React and works with server rendering (if you do want to upgrade to having a theme switcher, revert this change).

[dan5py]

Hi @xixixao, the .dark class is used to make it work with TailwindCSS since the darkMode is set to class in the tailwind.config.js. If you want you change it to media and use the snippet you provided instead of the class-based one.

[RulerChen]

@dan5py Since I couldn't find any description for darkMode: ['class'] in the documentation, are the only two options class and media for darkMode?

[dan5py]

are the only two options class and media for darkMode?

Yes, you can check the TailwindCSS Docs for further info.

[xixixao]

Hey @dan5py, you only need to change the tailwind config’s “darkMode” if you’re using the dark: modifier, whereas I was suggesting an approach with CSS variables.

[dan5py]

In that way every component would change when you change the color scheme. Using the dark: selector lets you decide whether a component should have dark mode or not.

[ivangreene]

Agree this is absolutely worth documenting on the site in the dark mode section, would have saved a lot of time to find this earlier. Perfect for people doing SSR or SSG because there will be no flicker as opposed to a fully JS impl that only runs on the front end

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.