Suggestion: some sort of light-dark
ish support
#18359
AlexFrazer
started this conversation in
Ideas
Replies: 1 comment
-
<html class="scheme-light dark:scheme-dark"> @theme {
--color-input-background: light-dark(
var(--color-gray-50),
var(--color-neutral-900)
);
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
When I start on projects or libraries, one of the first things I do is create variables to map to specific components, making them relatively easy to modify or override by a user. However, I have to specify both light and dark mode for every property:
And in my app, I will do something like this:
Of course, this gets fairly redundant and annoying to do for every variation of a color. When I set up these design tokens, I don't particularly care if the user is in dark mode or not. MDN does have
light-dark
, which allows you to specify two different colors depending on modeOf course, this won't work natively with tailwindcss, because you can use custom variants for the dark mode
Is this possible to achieve with tailwindcss? It might be cool to have a function like
--alpha
, but with light-darkBeta Was this translation helpful? Give feedback.
All reactions