3 ms·
why not just use `:root`, define some variables for each color and media queries for prefer theme? I don't understand react theming or this approach, you can do
by deft 6y ago
why not just use `:root`, define some variables for each color and media queries for prefer theme? I don't understand react theming or this approach, you can do it with 1 line of css.
- burlesona 6y agoDo you have an article that explains this approach in just a little more detail?
- vulcan01 6y ago(Not GP) Here are the links to the docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c... https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
- bhl 6y agoSee https://developer.mozilla.org/en-US/docs/Web/CSS/:root#declaring_global_css_variables https://developer.mozilla.org/en-US/docs/Web/CSS/:root#decla.... With :root, you can write css variables that can be accessed by any other element on the page (?). So to implement a light and dark theme, you could have something like `@media (prefers-color-scheme: light){ :root { --bg-color: #FFF; }`, and then have the body element use that via `body { background: var(--bg-color); }`.