daisyui feat: allow adding custom dark theme variants

This PR adds the functionality for custom dark themes.

Currently there is the support only for a global custom dark theme. Every section with a [data-theme="mytheme"] attribute is forced on that theme and doesn't change with the @media (prefers-color-scheme: dark) media-query.

Now it's possible to define dark variants of the themes directly inside tailwind.config.js:

module.exports = {
    ...
    daisyui: {
        themes: [
            {
                mytheme: {
                    primary: "#a991f7",
                    ...
                },
                'dark:mytheme': {
                    primary: "#af1784",
                    ...
                }
            },
        ]
    },
};

This will generate the following css:

[data-theme=mytheme] {
    --p: 254 86% 77%;
    ...
}
@media (prefers-color-scheme: dark) {
    [data-theme=mytheme] {
        --p: 317 77% 39%;
        ...
    }
}

Nov 09 '22 13:11 haase-fabian

Upvoted

Dec 01 '22 17:12 NikarashiHatsu

Thank you for the PR.
This would be cool but I still have doubts about it.
I thought a lot and I think the problem is, it adds a little bit of confusion on how themes work.

What should we expect with this config?
Because if we only need 2 light and dark themes (which is what the majority of devs want) there would be 2 methods to define the dark theme.

daisyui: {
  darkTheme: "dark",
  themes: [
    {
      mytheme: {
      },
      'dark:mytheme': {
      }
    },
    "dark",
  ]
},

the most common names people choose for their themes are light and dark which makes sense but it would look like this:
And that dark:light is just funny 😅

daisyui: {
    themes: [
      {
        light: {
        },
        'dark:light': {
        }
      },
  ]
},

What if my default theme is a dark theme? in that case adding a dark:dark would be acceptable by the config but it would be confusing.
Currently we can have dark theme as the default and we can also set the darkTheme to be dark:

daisyui: {
  darkTheme: "dark",
  themes: [
    "dark",
    "light",
  ]
},

I think it's easy to understand.
But here, my default theme is dark, and I also have light as the second theme but that dark theme can also have a dark theme...

daisyui: {
  darkTheme: "dark",
  themes: [
    {
      dark: {
      },
      'dark:dark': {
      }
    },
    "light",
  ]
},

Dec 15 '22 13:12 saadeghi

Thank you for your input.

I think the current implementation is great for a single global theme. However once someone uses a data-theme="" attribute anywhere on the page there is afaik no way to define dark variants inside the tailwind.config.js.

An example (standard daisyui configuration with all themes generated):

<body>
  <section #id="1">...</section>
  <section #id="2" data-theme="corporate">...</section>
  <section #id="3">...</section>
</body>

Now section 1 and 3 use light theme in light mode and dark theme in dark mode. Section 2 always uses corporate theme.

daisyui: {
  darkTheme: "dark",
  themes: [
    "light",
    "dark",
    "corporate",
    {
       "dark:corporate": {
         ...require("daisyui/src/colors/themes")["[data-theme=business]"],
       }
    }
  ]
},

With this configuration section 2 would gain a dark variation without an extra css file.

I know it is a bit of an advanced configuration, but so is this use case. And I think supporting this use case is a great improvement for this plugin.

Dec 17 '22 10:12 haase-fabian

Moving forward with version 3.0 I have no plans for adding this feature for now unless we get more requests about this. However as you know, people can already defines this kind of themes inside their CSS because all themes are just CSS variables after all.

Thanks for the PR

Jun 01 '23 02:06 saadeghi