abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-07 00:58:02 +00:00
Code Issues Projects Releases Wiki Activity

Add Apply Styles Based On Dark-Mode Preferences as a css til

Browse Source
This commit is contained in:
jbranchaud
2019-12-05 19:02:32 -06:00
parent 26db4c5c07
commit 4375d76934
2 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
css/apply-styles-based-on-dark-mode-preferences.md Normal file
View File

@@ -0,0 +1,23 @@
# 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/)