Setting custom dark mode theme in Tailwind CSS config?

Question

I'd like to use custom themes in Tailwind config to set primary/secondary colors for light and dark mode. The Tailwind docs only go over using classes in an html/jsx element like so:

<div class="bg-white dark:bg-slate-900...

Instead of declaring this on every element in my app, I'd like to do the following:

<div class="bg-primary text-secondary" />

and then in config, define something like:

colors: {
  light: {
    primary: "white",
    secondary: "black",
  }
  dark: {
    primary: "black",
    secondary: "white",
  }
}

Does anyone know of a way to do this? I am using Tailwind with React.

score 4 · Answer 1 · answered Feb 20 '22 at 05:15

4

You can use @apply:

.bg-primary {
    @apply bg-white dark:bg-slate-900
}

/* ... */

You can even go so far as to write a script to generate this CSS.

https://tailwindcss.com/docs/functions-and-directives

answered Feb 20 '22 at 05:15

kelsny

23,009
3
19
48

score 0 · Answer 2 · answered Sep 14 '22 at 04:36

0

To anyone looking for answers in the future:

I was also looking for the same thing, and the best I think we can do at this point is:

Define colors in your tailwind config use css vars
in root/body have 2 sets of css vars. One default, and other for dark class

More information about setting tailwind config using css vars:

https://tailwindcss.com/docs/customizing-colors#using-css-variables

answered Sep 14 '22 at 04:36

Akshay Sood

41
3

See my answer below - found a couple other solutions! – user12457151 Sep 14 '22 at 13:45

score -3 · Accepted Answer · answered Sep 14 '22 at 13:45

I actually found two solutions for this:

Daisy UI has a pretty good solution for this built in. However if you don't want to get stuck with using the entire component library, you can do what daisy is doing under the hood with:
Tailwind theme switcher

Setting custom dark mode theme in Tailwind CSS config?

3 Answers3