Open huksley opened 2 years ago
Thanks for raising this issue (and sorry for the late reply).
I need to investigate the best way of doing this. In the meantime, the good news is that it is possible to have Almond.CSS working in light and dark mode in a relatively simple way:
prefers-color-scheme
rule with the dark/light valuesIt could be done like this on the document's <head>
:
<link rel="stylesheet" href="almond.min.css" />
<style>
:root {
--primaryH: 210;
--primaryS: 50%;
--primaryL: 40%;
--primary-bg: #fff;
/* ...rest of the variables/colors */
}
@media (prefers-color-scheme: dark) {
:root {
--primaryH: 110;
--primaryS: 50%;
--primaryL: 80%;
--primary-bg: #fff;
/* ...rest of the variables/colors */
}
}
</style>
Great 😃
Please implement this
I've tried to build a dark mode using this technique and its promising, but there are some roadblocks:
--primary-light
and similar would have to be inverted in meaning (i.e. --primary-light
needs to be darker than --primary
):before
and mask
?Maybe there is more, but that was the most noticeable.
Is your feature request related to a problem? Please describe. Lots of people prefer dark mode nowadays. Is there any predefined way to set colors to support dark mode?
Describe the solution you'd like Preset values for variables for a dark mode and support for switching dark and light mode.
Describe alternatives you've considered Picking color values myself but it might be difficult to pick right ones. Also using Dark mode browser extension.