Is there some thought for dark/light theme doesn't only by `dark:`
Xwudao opened this issue · comments
Now, not only unocss but also wind, tailwind support dark mode only with dark variant.
It means We should write more class name for supporting dark mode.
A better method for this that use color palette (refer to mui: https://mui.com/material-ui/customization/dark-mode/#main-content):
We design two color tokens, and automaticly change those tokens with compute mode changed or by user manual.
unocss has any plans to implement this?
You can write your own variant to support that:
@antfu Hi,
I mean I define two sets of colors in the configuration file. Then, at some point in time, uno automatically switches which set of colors to use.
Now I have a preliminary idea to use CSS variable, for example:
<head>
<style>
body[data-theme="dark"] {
--bg-main: rgb(167, 28, 28);
}
body {
--bg-main: rgb(199, 189, 189);
}
.bg-gray {
width: 40px;
height: 40px;
background-color: var(--bg-main);
}
</style>
</head>
<!-- <body data-theme="dark"> -->
<body>
<div class="bg-gray">hello this</div>
</body>I try to use in unocss:
// index.css imported by main.ts
body{
--bg-gray: red
}//vite.config.ts
Unocss({
theme: {
color: {
main: 'var(--bg-gray)',
}
},
})//App.tsx
<div className="bg-main">hello uno</div>That's not work.
However, even if it works, it is not the best implement in my mind.
In my mind the best ways to implement is that we define two sets of colors in unocss config file.
example:
//vite.config.ts
Unocss({
theme: {
dark: {
color: {
main: '#fff',
}
},
light: {
color: {
main: '#f1f1f1',
}
}
},
})I only use bg-main，the uno will automatic to switch which real color would be used.
I see. I like your idea and I see the usage. However, it requires an overhaul of all the utilities and might break existing apps. I would recommend starting a new preset with this idea in mind. If you do, I am happy to list it as a community preset in the readme.
On the other hand, I am using this approach: https://twitter.com/antfu7/status/1533584342228037632
All right. In fact, I am not familiar with the development of uno preset. But I'd like to try it in my spare time.
Another way of changing theme without adding classes:
You can use CSS variables/properties like this and change them in dark theme like this.
In this way, you can create unlimited color schemes. Want to add theme named coffee, Yes you can :)
Moreover, you can change them at runtime. You can checkout the demo here (Click on "Change Primary" button).
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.