Support for Multiple Themes with Dark & Light Modes in Tailwind CSS v4 #17405

SutharShantanu · 2025-03-27T06:00:08Z

SutharShantanu
Mar 27, 2025

I’m trying to implement multiple themes along with their respective dark and light modes using Tailwind CSS v4. can anyone help me how to achieve this effectively.

@import "tailwindcss";
@import "tailwindcss/utilities";
@plugin 'tailwindcss-animate';

/* Light & Dark Mode Setup */
:root {
  --background: #ffffff;
  --foreground: #171717;

    /* Typography */
  --font-sans: var(--font-geist-sans, Arial, Helvetica, sans-serif);
  --font-mono: var(--font-geist-mono, 'Courier New', monospace);

  /* Text Sizes */
  --text-title: 2.25rem;
  --text-title--line-height: 2.75rem;
  --text-title--font-weight: 700;
  --text-heading: 1.875rem;
  --text-heading--line-height: 2.25rem;
  --text-heading--font-weight: 700;
  --text-subheading: 1.5rem;
  --text-subheading--line-height: 2rem;
  --text-subheading--font-weight: 600;
  --text-description: 1rem;
  --text-description--line-height: 1.5rem;
  --text-description--font-weight: 400;
  --text-small: 0.875rem;
  --text-small--line-height: 1.25rem;
  --text-small--font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #29292B;
    --foreground: #C9C7BA;
  }
}

/* Tailwind Theme Variables */
@theme jetBlack {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}
@theme aquaPeach {
  --color-deep-aqua: #278783;
  --color-peach-cream: #FFEBD0;
}
@theme peachRed {
  --color-peach-puff: #FEF1E1;
  --color-fiery-red: #FC350B;
}
@theme mintBlue {
  --color-soft-mint: #D1E0D7;
  --color-steel-blue: #607EBC;
}
@theme ivoryCocoa {
  --color-soft-ivory: #ECE5D8;
  --color-dark-cocoa: #321B1F;
}
@theme redCream {
  --color-bright-orange-red: #F66435;
  --color-light-cream: #F4EFCA;
}

/* Base Styles */
body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
}

/* Selection */
@layer base {
  ::selection {
    background-color: var(--color-fiery-red);
    color: var(--color-soft-ivory);
    transition: background-color 0.3s ease, color 0.3s ease-in-out;
  }

  .dark ::selection {
    background-color: var(--color-soft-ivory);
    color: var(--color-dark-cocoa);
    transition: background-color 0.3s ease, color 0.3s ease-in-out;
  }
}

/* Number Input Arrows */
* {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
  }
}

wongjn · 2025-03-27T08:30:31Z

wongjn
Mar 27, 2025
Collaborator

You don't want to duplicate imports:

 @import "tailwindcss";
-@import "tailwindcss/utilities";

It seems you'd want your :root rule to be actually @theme to register the values into Tailwind:

-:root {
+@theme {
   --background: #ffffff;
   --foreground: #171717;

Consider renaming --background and --foreground to --color-background and --color-foreground so they are available values for Tailwind color utilities.

 @theme {
-  --background: #ffffff;
-  --foreground: #171717;
+  --color-background: #ffffff;
+  --color-foreground: #171717;

Change the @media (prefers-color-scheme: dark) { rule to match:

 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #29292B;
-    --foreground: #C9C7BA;
+    --color-background: #29292B;
+    --color-foreground: #C9C7BA;
   }
 }

Be sure to put the aforementioned rule in @layer theme too (for cascade speicificity reasons):

+@layer theme {
   @media (prefers-color-scheme: dark) {
     :root {
       --color-background: #29292B;
       --color-foreground: #C9C7BA;
     }
   }
+}

The other colors can go in your @theme too:

 @theme {
   …
+  --color-deep-aqua: #278783;
+  --color-peach-cream: #FFEBD0;
+  --color-peach-puff: #FEF1E1;
+  --color-fiery-red: #FC350B;
+  --color-soft-mint: #D1E0D7;
+  --color-steel-blue: #607EBC;
+  --color-soft-ivory: #ECE5D8;
+  --color-dark-cocoa: #321B1F;
+  --color-bright-orange-red: #F66435;
+  --color-light-cream: #F4EFCA;
 }

If you switch themes depending on the data-theme attribute on <html>, you could override --color-background and --color-foreground. This is regular CSS at this point and not special Tailwind syntax:

@layer theme {
  [data-theme="jetBlack"] {
    --color-background: …;
    --color-foreground: …;
  }

  [data-theme="aquaPeach"] {
    --color-background: …;
    --color-foreground: …;
  }

  …
}

1 reply

SutharShantanu Mar 27, 2025
Author

Thanks @wongjn , I've Implemented your solution and here's my changes. i guess i'm going with the correct approach now.

@import "tailwindcss";
@plugin 'tailwindcss-animate';

@theme {
  --color-background: #c9c7ba;
  --color-foreground: #29292b;
  --color-deep-aqua: #278783;
  --color-peach-cream: #ffebd0;
  --color-peach-puff: #fef1e1;
  --color-fiery-red: #fc350b;
  --color-soft-mint: #d1e0d7;
  --color-steel-blue: #607ebc;
  --color-soft-ivory: #ece5d8;
  --color-dark-cocoa: #321b1f;
  --color-bright-orange-red: #f66435;
  --color-light-cream: #f4efca;

  /* Typography */
  --font-sans: var(--font-geist-sans, Arial, Helvetica, sans-serif);
  --font-mono: var(--font-geist-mono, "Courier New", monospace);

  /* Text Sizes */
  --text-title: 2.25rem;
  --text-title--line-height: 2.75rem;
  --text-title--font-weight: 700;
  --text-heading: 1.875rem;
  --text-heading--line-height: 2.25rem;
  --text-heading--font-weight: 700;
  --text-subheading: 1.5rem;
  --text-subheading--line-height: 2rem;
  --text-subheading--font-weight: 600;
  --text-description: 1rem;
  --text-description--line-height: 1.5rem;
  --text-description--font-weight: 400;
  --text-small: 0.875rem;
  --text-small--line-height: 1.25rem;
  --text-small--font-weight: 400;
}

@layer theme {
  @media (prefers-color-scheme: dark) {
    :root {
      --color-background: #29292b;
      --color-foreground: #c9c7ba;
    }
  }

  [data-theme="jetBlack"] {
    --color-background: #29292b;
    --color-foreground: #c9c7ba;
  }

  [data-theme="aquaPeach"] {
    --color-background: #278783;
    --color-foreground: #ffebd0;
  }

  [data-theme="peachRed"] {
    --color-background: #fef1e1;
    --color-foreground: #fc350b;
  }

  [data-theme="mintBlue"] {
    --color-background: #d1e0d7;
    --color-foreground: #607ebc;
  }

  [data-theme="ivoryCocoa"] {
    --color-background: #ece5d8;
    --color-foreground: #321b1f;
  }

  [data-theme="redCream"] {
    --color-background: #f66435;
    --color-foreground: #f4efca;
  }
}

body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
}

/* Selection */
@layer base {
  ::selection {
    background-color: var(--color-fiery-red);
    color: var(--color-soft-ivory);
    transition: background-color 0.3s ease, color 0.3s ease-in-out;
  }

  .dark ::selection {
    background-color: var(--color-soft-ivory);
    color: var(--color-dark-cocoa);
    transition: background-color 0.3s ease, color 0.3s ease-in-out;
  }
}

/* Number Input Arrows */
* {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
  }
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Support for Multiple Themes with Dark & Light Modes in Tailwind CSS v4 #17405

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Support for Multiple Themes with Dark & Light Modes in Tailwind CSS v4 #17405

Uh oh!

Uh oh!

SutharShantanu Mar 27, 2025

Replies: 1 comment · 1 reply

Uh oh!

Uh oh!

wongjn Mar 27, 2025 Collaborator

Uh oh!

SutharShantanu Mar 27, 2025 Author

SutharShantanu
Mar 27, 2025

Replies: 1 comment 1 reply

wongjn
Mar 27, 2025
Collaborator

SutharShantanu Mar 27, 2025
Author