How to update CSS variable in @theme (light/dark etc)

[subproject22]

I couldn't find any docs or guides. Let's say I have this

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

How to control variable value depending on something? I need to change --foreground outside theme config block?

[wongjn]

Update them like any CSS variable:

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

@layer theme {
  [data-theme="dark] {
    --foreground: …;
  }
}

Or if the redefinition might not be on the :root/:host element:

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

@layer theme {
  [data-theme="dark] {
    --foreground: …;
  }
}

[subproject22]

My god @wongjn THANK YOU for @theme inline 🔥 This is what I was looking for for nested theming!!! Is it documented? How you know it?

[wongjn]

It is documentated at https://tailwindcss.com/docs/theme#referencing-other-variables