mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 15:18:01 +00:00
24 lines
768 B
Markdown
24 lines
768 B
Markdown
# Apply Styles Based On Dark-Mode Preferences
|
|
|
|
There is a CSS media query for whether a user prefers a Dark-Mode or Light-Mode
|
|
color scheme. If you're site is able to provide styling for both modes, then
|
|
you can hook into those preferences like so:
|
|
|
|
```css
|
|
@media (prefers-color-scheme: dark) {
|
|
/* dark-mode styles */
|
|
/* perhaps changing some custom properties */
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
/* light-mode styles */
|
|
/* perhaps changing some custom properties */
|
|
}
|
|
```
|
|
|
|
As of this writing,
|
|
[`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
|
|
is still in a draft state, but it already has decent browser support.
|
|
|
|
[source](https://24ways.org/2019/interactivity-and-animation-with-variable-fonts/)
|