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.

Exurbanite

Answer 1

I actually found two solutions for this:

1. 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:

2. Tailwind theme switcher

Exurbanite

Answer 2

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

Woodpile

Answer 3

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

Drowse

See my answer below - found a couple other solutions! – Exurbanite

Answer 4

You can define your colors in your CSS file like this :

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

  :root {
    --color-primary: 247 147 34;
    --color-text: 33 33 33;
    --color-success: 0 200 81;
    --color-info: 51 181 229;
    --color-warn: 255 187 51;
    --color-error: 254 78 78;
  }

  :root [class~="dark"] {
    --color-primary: 247 147 34;
    --color-text: 33 33 33;
    --color-success: 0 200 81;
    --color-info: 51 181 229;
    --color-warn: 255 187 51;
    --color-error: 254 78 78;
  }
}

and then use this config in your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  theme: {
    colors: {
      primary: "rgb(var(--color-primary) / <alpha-value>)",
      text: "rgb(var(--color-text) / <alpha-value>)",
      success: "rgb(var(--color-success) / <alpha-value>)",
      info: "rgb(var(--color-info) / <alpha-value>)",
      warn: "rgb(var(--color-warn) / <alpha-value>)",
      error: "rgb(var(--color-error) / <alpha-value>)",
      transparent: "transparent",
      current: "currentColor",
    },
}

now if you set the dark class on your document root colors changed automatically

Kathrinkathrine