diff --git a/README.md b/README.md index 76b4499..025ce41 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). -_885 TILs and counting..._ +_886 TILs and counting..._ --- @@ -95,6 +95,7 @@ _885 TILs and counting..._ - [Add Fab Icons To Your Site With FontAwesome 5](css/add-fab-icons-to-your-site-with-fontawesome-5.md) - [Animate Smoothly Between Two Background Colors](css/animate-smoothly-between-two-background-colors.md) - [Apply Multiple Box Shadows To Single Element](css/apply-multiple-box-shadows-to-single-element.md) +- [Apply Styles Based On Dark-Mode Preferences](css/apply-styles-based-on-dark-mode-preferences.md) - [Apply Styles To The Last Child Of A Specific Type](css/apply-styles-to-the-last-child-of-a-specific-type.md) - [Change The Orientation Of An Image](css/change-the-orientation-of-an-image.md) - [Circular Icons With A Massive Border Radius](css/circular-icons-with-a-massive-border-radius.md) diff --git a/css/apply-styles-based-on-dark-mode-preferences.md b/css/apply-styles-based-on-dark-mode-preferences.md new file mode 100644 index 0000000..9307f52 --- /dev/null +++ b/css/apply-styles-based-on-dark-mode-preferences.md @@ -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/)