v4 + svelte, specify :dark variant for a color in app.css

[yanismarkin]

is there a way to specify :dark variant for a color in app.css:

--color-pink: #FF00FE;
--color-pink:dark: #FF00AA;

to simply use one color name in html:

<p class="text-pink bg-pink">123</p>

[wongjn]

You could do:

@theme {
  --color-pink: #FF00FE;
}

@media (prefers-color-mode: dark) {
  :root {
    --color-pink: #FF00AA;
  }
}

See this working in this Tailwind Play (you can use your browser's developer tools or your system settings to toggle prefers-color-mode to see the color changing).