Dark Mode theme config

[DNature]

In most cases, I prefer my theme config file (tailwind.config.js) file to automatically handle styles for both light and dark mode.

Example:

module.exports = {
theme: {
    extend: {
      colors: {
        primary: {
+          100: ["#000000", '#E4C1AF']
        },
...

The above feels more consistent.

That's an array where the first item is the light theme color and the last item is the dark theme color

Now you're not required to use the dark:text-primary-100 -- Things just works out of the box.

I can as well take care of this?

[jslopez29]

No

[simonswiss]

Hey @DNature 👋

When implementing dark mode interfaces, you likely don't always want to just "swap" or invert colors, and often need much more "fine control", to make contextual decisions on a lot of parts of the UI.

Here's a tweet by Steve Schoger that captures this really well:

https://twitter.com/steveschoger/status/1151160261170126850

For that reason, even if this requires much more work to implement a dark UI, we have decided to go with the dark variant to control dark mode changes on each individual element.

If you want to implement dark mode with the change of a single variable on the parent, you can define your colors as CSS custom properties (CSS variables), and then redefine these properties within a scoped toggle class name.

Here's a good, basic example of that, that was created by Adam Wathan a while ago:

https://github.com/adamwathan/theming-tailwind-demo

Hope this helps 👍

[DNature]

Hi @simonswiss

Thank you for a detailed explanation on the current approach.

I have been using css variables to implement different color schemes -- here's an example https://divinehycenth.com and in this repo https://github.com/dnature/divinehycenth

With my suggested approach, You're no longer required to use css variables which you can still use within the array containing the dark and light theme colors and this does not interested with the regular string value if you choose not to use arrays. You can also override the theme colors with the dark:... pattern of you wish.

I hope you get my point? 🙂

[DNature]

Hi @Eric-512

Unfortunately, I'm not a "windows" user; However, I have dark mode enabled on my PC and that's not the question here.