Support @media (prefers-color-scheme: dark) within @theme

[The-Code-Monkey]

I had an idea to support color differences using inbuilt css rather than prefixing and writing this media query everywhere.

I have tested this out and in chrome adding this to the theme directive seems to work

@theme {
  --color-text: #000;
  --color-text-inverse: #fff;
  @media (prefers-color-scheme: dark) {
    --color-text: #fff;
    --color-text-inverse: #000;
  }
}

I think logic like this should be allowed and would allow for a lot more flexibility especially in component libraries made using tailwind v4

[The-Code-Monkey]

Bump

[The-Code-Monkey]

Bump

[The-Code-Monkey]

Any update on this

[The-Code-Monkey]

Bump

[adamwathan]

You can do this without @theme:

@theme {
  --color-text: #000;
  --color-text-inverse: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #fff;
    --color-text-inverse: #000;
  }
}

[The-Code-Monkey]

Oh yeah I know I was just curious why this couldn't be done in theme directly