Tailwind colors based on dark mode

Question

Is there any way to define different colors in the tailwind config so that the dark mode are applied without the dark selector?

Currently I have an object like:

const colors = {
 light: {
    red: {
     100: "#880808",
    ...
    }
  },
 dark: {
    red: {
     100: "red",
    ...
    }
  },

}

I'd like to just use red-100 and have the color be mapped automatically (just via bg-red-100) without having to specify bg-red-100 dark:bg-red-dark-100

I had the same question but after some research and without any normal results I just started to use bg-red-100 dark:bg-red-dark-100. Looks like it isn't a problem for the other TW geeks so they just use the same approach as well — Velidan, Nov 09 '22 at 18:27

sadeq shahmoradi · Accepted Answer · 2023-06-08T18:53:58.080

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

Don't forget to add the `` to your theme otherwise you will loose support for tailwinds opacity classes. `primary: "rgb(var(--color-primary) / )"`. You can view more information in the tailwind documentation (https://tailwindcss.com/docs/customizing-colors) — Bernard, Dec 06 '22 at 16:20
:root[class="dark"] colors is not being considered when dark is present in the class. — Shashi Kiran, Feb 23 '23 at 23:24

L.Blondy · Answer 2 · 2023-05-23T16:19:51.260

Here is a tailwind plugin (tw-colors) that does exactly what you need.

   const { createThemes } = require('tw-colors');

   module.exports = {
      // ...your tailwind config
      plugins: [
         createThemes({
            'light': { 
               'red': {
                  '100': '#880808',
                  '200': '...',
               }
            },
            'dark': { 
               'red': {
                  '100': 'red',
                  '200': '...',
               }
            },
         })
      ],
   };

Apply the theme on a parent element

<div class={someCondition ? 'theme-light' : 'theme-dark'}>  
  ...
</div>

You can use your colors as usual.

<button class='bg-red-100'>...</div>

If theme-light is applied on a parent element, the background-color will be #880808, if theme-dark is applied it will be red

score 1 · Answer 3 · answered May 05 '22 at 03:34

One trick that you can make use of is by extracting as components.

In your tailwind stylesheet

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

@layer components {
  .red-bg {
    @apply bg-red-100 dark:bg-red-dark-100;
  }
}

Then you can use it as

<div class="red-bg"></div>

and it work as intended. However, it would be a best practice to use other approaches in re-using the styles since it would be inconvenient to extend this trick to all colors used in your project.

Tailwind colors based on dark mode

3 Answers3

Linked