Replies: 1 comment 1 reply
|
This kind of exists already with the CSS native @import "tailwindcss";
@theme {
--color-surface: light-dark(#fff, #000);
--color-outline: light-dark(#999, #eee);
}<!-- or `scheme-light dark:scheme-dark` if using customized dark mode -->
<body class="scheme-light-dark">
…
<div class="bg-surface border border-outline"> |
1 reply
|
Thanks wongjn |
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.
Implement a utility that makes it easy to add theme colours that apply correctly in light and dark mode.
Something like --color-surface, --color-on-surface, --color-surface-variant1, --color-on-surface-variant1, --color-outline, ...etc.
So when I use classes like bg-surface, it automatically applies the right colour for dark mode and the right one for light mode.
The utility can be something like: lightdark([variant-light], [variable-dark]).
Usage:
--color-surface: lightdark(#fff, #000);
--color-outline: lightdark(#999, #eee);
All reactions