« Blog

Simple dark mode support with Tailwind & CSS variables

Elliot Hesp

Elliot Hesp

CEO & Co-Founder
Post Image

Tailwind supports dark mode out of the box, by simply prefixing a typical class with `dark:`. In simple cases, you can easily create a website which toggles styles based on whether the user has dark mode enabled:

<div class="bg-white dark:bg-black">

However as your application grows, with more and more markup, reproducing this code over and over becomes cumbersome and a pain to change down the line (e.g. if we wanted to swap out `dark:bg-black` for `dark:bg-gray-900`).

Instead we can take advantage of CSS variables and the Tailwind configuration to make this process much more streamlined. Assuming we're using the "class" based approach to using dark mode, go ahead and create a few custom CSS variables within your entry `.css` file:


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

:root {
  --light-background: #fff;
  --dark-background: #000;
}

html {
  --background: var(--light-background);
}

html.dark {
  --background: var(--dark-background);
}

We've just created two variables called `--light-background` and `--dark-background` with their own hex values. We then create a new `--background` variable and assign this the light or dark variant depending on whether our `html` element has the `dark` class name.

Within the `tailwind.config.js` file, we can now create a custom color, which uses the `--background` variable:

module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        custom: {
          background: 'var(--background)',
        },
      },
    },
  },
  purge: [],
  variants: {
    extend: {},
  },
  plugins: [],
};

Tailwind will now produce a new set of CSS classes based on our own "custom" color set. Now instead of duplicating the class names within our elements we can simply write the following:

<div class="bg-custom-background">

Whenever the page swaps between dark and light mode, our variable will be updated, having a knock on effect which updates our own class name, simple! We've also got the added benefit of having a single source of truth for our background color.

You could further extend this to support text colors, border colors and more following the same steps... simple!