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.

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