How do we use dark mode and themes?

[viperfx]

We recently implemented themes into our application - see what we did here

Now that we are wanting to support dark mode - how should we approach it? Do we have a dark and light variant for each brand theme color? or is there a better way?

[simonswiss]

Hmmmm that's an interesting question.

I haven't looked into this with enough consideration, but I'd say that yep, you could define a light/dark color for each CSS color variable.

You could also or redefine the value within a .dark scope within your theme scope, if you're using the class strategy for dark mode. Doing so, you wouldn't need to use dark:text-my-color utilities, the colors would change automatically.

You'd need to carefully choose where you place the dark and my-custom-theme classes in your document tree, and reflect this in your CSS selector where you redefine the color variables.

If you do want fine-grain control on what colors you apply on each element, I think you need a color set for light and dark for each theme.

[viperfx]

Thanks - the dark class should work well for us. Will give that a try.

[jeanluc-d]

@simonswiss
When adding a dark scope into the theme scope, would we do something like this?

Also does the tailwind.config file need further modification other than adding darkMode: 'class' for the colors to change automatically?