Is it possible to configure @theme variables for dark/high-contrast/etc modes?

[numso]

The docs for v4 show that you can configure colors like so:

@import "tailwindcss";

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}

Is something like this supported?

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.72 0.11 178);
  :root.dark {
    --color-primary: oklch(0.72 0.11 178);
  }
  :root.dark-high-contrast {
    --color-primary: oklch(0.72 0.11 178);
  }
  :root.high-contrast {
    --color-primary: oklch(0.72 0.11 178);
  }
}

I'd like to specify what text-primary means based on if the page is in light/dark/high-contrast/etc mode

[wongjn]

You'd have the other rules as "regular" CSS:

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.72 0.11 178);
}

@layer theme {
  :root.dark {
    --color-primary: oklch(0.72 0.11 178);
  }

  :root.dark-high-contrast {
    --color-primary: oklch(0.72 0.11 178);
  }

  :root.high-contrast {
    --color-primary: oklch(0.72 0.11 178);
  }
}

[numso]

🙏 thank you!

[rozsazoltan]

As Wongjn also mentioned, you need to declare the default theme so TailwindCSS can generate the colors, and then the global variables can be overridden. If you want to associate variants with the themes as well, it might be useful to declare the style like this (source: last code-snippet from reference):

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant coffee (&:where(.coffee, .coffee *));

@theme {
  --color-pink: #eb6bd8;
  --color-tsunami: #77b4ea;
}

@layer theme {
  :root, :host {
    @variant dark {
      --color-pink: #8e0d7a;
      --color-tsunami: #a67ca8;
    }
    @variant coffee {
      --color-pink: #0d84ec;
      --color-tsunami: #b57913;
    }
  }
}

Related:

• How to use custom color themes in TailwindCSS v4 - Solution #1: @layer theme & @variant dark
  • Solution #2: light-dark() or var(--tw-light, ...) var(--tw-dark, ...) alternative
  • Solution #3: extended themes by var(--tw-light, ...) var(--tw-dark, ...) var(--tw-other, ...)
• How to override theme variables in TailwindCSS v4 - @theme vs @layer theme vs :root
• Should I use @theme or @theme inline?
• When should I use * and when should I use :root, :host as the parent selector?