If you are building a web project with Tailwind CSS and would like to add multiple color themes that your users can toggle between, then you came to the right place. I'm going to walk you through with easy steps you can apply to any project, either a website or a web application.

I assume that you have already setup your project, so let's dive in!

Step 1: Add a primary color in tailwind.config.js

First of all, we should introduce a new color class for our main color. This is a nice approach because if we use one of the default color classes (eg blue), then it wouldn't make sense to have an orange color apply to the design (through the color themes) but our classes still use blue in their names.

Let's give our new main color, the name "primary" and add all default shades (from 50 to 950). We can easily extend the colors as follows:

// tailwind.config.js
export default {
  // ...
  theme: {
    extend: {
      colors: {
        primary: {
          50: "rgb(var(--color-primary-50) / <alpha-value>)",
          100: "rgb(var(--color-primary-100) / <alpha-value>)",
          200: "rgb(var(--color-primary-200) / <alpha-value>)",
          300: "rgb(var(--color-primary-300) / <alpha-value>)",
          400: "rgb(var(--color-primary-400) / <alpha-value>)",
          500: "rgb(var(--color-primary-500) / <alpha-value>)",
          600: "rgb(var(--color-primary-600) / <alpha-value>)",
          700: "rgb(var(--color-primary-700) / <alpha-value>)",
          800: "rgb(var(--color-primary-800) / <alpha-value>)",
          900: "rgb(var(--color-primary-900) / <alpha-value>)",
          950: "rgb(var(--color-primary-950) / <alpha-value>)",
        },
      },
    }
  }
  // ...
};

We will use custom CSS variables to customize the primary color (useful for our color theming functionality), so we are following the guidelines from the official Tailwind CSS documentation to make sure that our new color play nice and can be used with opacity modifiers.

Step 2: Set the CSS variables in app.css

Afterwards, we will define the custom CSS variables as RGB channels with no color space function in our main CSS file, so that they work correctly in our configuration file.

This is where all of our color themes can be defined. We repeat the same variables with different color values based on our preference, creating as many themes as we like.

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

/* Color Themes */
@layer base {
  :root {
    --color-primary-50: 237 244 255;
    --color-primary-100: 223 233 255;
    --color-primary-200: 197 215 255;
    --color-primary-300: 161 188 255;
    --color-primary-400: 124 150 253;
    --color-primary-500: 93 114 247;
    --color-primary-600: 64 73 235;
    --color-primary-700: 50 55 208;
    --color-primary-800: 45 51 174;
    --color-primary-900: 43 50 132;
    --color-primary-950: 25 28 77;
  }

  html[data-theme="indigo"] {
    --color-primary-50: 246 244 254;
    --color-primary-100: 238 235 252;
    --color-primary-200: 223 217 251;
    --color-primary-300: 199 186 248;
    --color-primary-400: 171 147 242;
    --color-primary-500: 144 104 234;
    --color-primary-600: 128 71 224;
    --color-primary-700: 112 53 204;
    --color-primary-800: 95 45 174;
    --color-primary-900: 78 38 140;
    --color-primary-950: 48 22 95;
  }

  html[data-theme="purple"] {
    --color-primary-50: 251 244 255;
    --color-primary-100: 246 231 255;
    --color-primary-200: 238 210 255;
    --color-primary-300: 225 175 255;
    --color-primary-400: 207 125 255;
    --color-primary-500: 189 75 255;
    --color-primary-600: 172 40 245;
    --color-primary-700: 150 24 216;
    --color-primary-800: 137 27 192;
    --color-primary-900: 103 21 142;
    --color-primary-950: 72 1 106;
  }
}

The concept is that we change the values of the default variables under different CSS selectors. This way, when we would like to apply the purple color theme, we will just have to add the following property to our html element:

<html data-theme="purple">
...
</html>

Now, we can start building our pages but instead of using a specific color class, we will use the 'primary' one we created.

Step 3: Create simple JS toggling functionality

Moving on to the JavaScript functionality, we can add a click event listener to all the buttons which have their data-theme property set.

const htmlEl = document.documentElement;

// Add click event to all buttons with data-theme="" property
document.querySelectorAll("button[data-theme]").forEach((el) => {
  el.addEventListener("click", () => {
    // Set the data-theme property in html element based on the value from the button
    htmlEl.dataset.theme = el.dataset.theme;
  });
});

This way, every time one of the buttons is clicked, its data-theme value will be set in the related property of our html element, making all color variables adjust accordingly, changing the main color of our pages (where we use the -primary- classes).

<button type="button" data-theme="">Set default theme</button>
<button type="button" data-theme="indigo">Set indigo theme</button>
<button type="button" data-theme="purple">Set purple theme</button>

Step 4: Persistent color themes with Local Storage

As a bonus, we can also save our color theme preference to the Local Storage as follows:

const htmlEl = document.documentElement;
const currentTheme = localStorage.getItem("theme");

// Set theme from Local Storage
if (currentTheme) {
  htmlEl.dataset.theme = currentTheme;
}

// Add click event to all buttons with data-theme="" property
document.querySelectorAll("button[data-theme]").forEach((el) => {
  el.addEventListener("click", () => {
    htmlEl.dataset.theme = el.dataset.theme;

    // Save color theme preference
    localStorage.setItem("theme", el.dataset.theme);
  });
});

This way, we check if there is an existing color theme preference saved and if so, we add it to the data-theme property of the html element.

That's all it takes to create your own color themes in a Tailwind CSS project. You can take it a step further and add additional colors and CSS variables to change your color themes in a more complex way but the whole idea remains the same.

If you are using Tailkit, then you can easily set a custom color name (eg primary, brand or something else) in your settings, so that every time you copy a UI component, the main color classes will use your color name instead of the default one.

Happy coding!

How to implement color theme toggle functionality in your Tailwind CSS based project

2,000+ handcrafted snippets.Now in your AI editor.

2,000+ handcrafted snippets.
Now in your AI editor.