search

bonsaicss / bonsai.css

A Utility Complete CSS Framework for less than 45kb (8kB Gzipped) -
https://www.bonsaicss.com/
MIT License
372 stars 24 forks source link

Dark mode #71

Open pachacamac opened 3 years ago

pachacamac commented 3 years ago

What would be the most idiomatic way to add a dark mode switch in Bonsai? It's easy to add a dark-mode class, overwrite some variables from src/variables.css and toggle it on body with e.g. a checkbox. However that approach does not allow for css transitions. Any hints?

pachacamac commented 3 years ago

anything? :)

opencoca commented 2 years ago

Building out a sites darkmode variables is the cleanest option.

@media (prefers-color-scheme:dark) {
    :root {...

See prefers-color-schem (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)