Semantic color scheme

[martijnversluis]

We use a palette of semantic colors, meaning we assign colors by their semantic name, and based on light or dark theme it maps to a color from the default palette. It used to be configured in tailwind.config.js, but I tried migrating it to Tailwind 4.

I tested multiple ways, but no solution worked fully. Either no color would work (only black/white) or it would not switch.

My current solution looks like this, no color works:

@theme static {
  --color-slate-50: #F7F7FB;
  --color-black: #000000;
  ...
}

:root {
  --color-*: initial;
  --color-fill-ground: var(--color-slate-50);
  ...

  @media (prefers-color-scheme: dark) {
    --color-fill-ground: var(--color-black); 
  }
}

Anybody know what the current setup should look like?

[wongjn]

You could do something like:

@theme {
  --color-slate-50: #F7F7FB;
  --color-black: #000000;
  --color-fill-ground: var(--color-slate-50);
}

@layer theme {
  @media (prefers-color-scheme: dark) {
    :root {
      --color-fill-ground: var(--color-black); 
    }
  }
}

• Have the light color mode in @theme.
• The @layer theme isn't strictly neccessary but follows convention of Tailwind core.
• @theme compiles its CSS variables to :root rule, so we can override it by selecting :root too.
• You don't want to do --color-*: initial, as that will mean the CSS variable references for the semantic color names wouldn't work.

[martijnversluis]

Thanks, this works like a charm! 👍