Color switch with v4? Primary palette?

[subproject22]

Can't figurate new config.

Let's say I want to have --color-primary-* styles, and I need to switch colors (between shipped Tailwind colors). Is it even possible? Weird but I can't figure out. Would be nice to have an example. The only way I found is having data-attr and manually defying all colors with attr selector...Is there more elegant way?

[wongjn]

The CSS variables defined in @theme become CSS variables. You can then override these CSS variables like you can in normal CSS:

@theme {
  --color-primary: red;
}

@layer theme {
  [data-theme="dark"] {
    --color-primary: green;
  }
}

https://play.tailwindcss.com/P02BzXg7Yw

[subproject22]

I think about slightly different use case

@theme {
...
  --color-primary-500: var(--color-[dynamic]-500);
  --color-primary-600: var(--color-[dynamic]-600);
...so on
}

And the color used for primary should come from attr or some other selector. it should apply to all classes using primary (borders, bg text color etc)

Only way I found is manually mapping every TW color, hoping there's a better way?

[wongjn]

Not that I know of.

[adrianoresende]

The CSS variables defined in @theme become CSS variables. You can then override these CSS variables like you can in normal CSS:

@theme {
  --color-primary: red;
}

@layer theme {
  [data-theme="dark"] {
    --color-primary: green;
  }
}

https://play.tailwindcss.com/P02BzXg7Yw

There is a list of variables such as color-primary, color-primary-foreground, color-secondary, etc.?
I didn't find it in the documentation.

[wongjn]

No, there isn't by default. These would be user-define custom theme tokens.