alvaromontoro
commented
1 year 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:
- Set the default colors using the the variables described in the README file.
- Add a
prefers-color-schemerule with the dark/light values
It 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>
KoljaL
tribut
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.