Today I Learned - Rocky Kev

TIL system light mode and dark mode

POSTED ON:

TAGS: css

Ever notice on mobile devices or on macs, tabs go from light to dark depending on the time?

That's your system's color scheme changing.

You can also have your site's colors switch that way too!

The prefers-color-scheme media feature is used to detect if the user has requested the page to use a light or dark color theme. It works with the following values:

light: Indicates that the user has notified the system that they prefer a page that has a light theme (dark text on light background).
dark: Indicates that the user has notified the system that they prefer a page that has a dark theme (light text on dark background).

Via Web.dev's article.

To simulate: Chrome devtools allows you switch the system color scheme to test it in action.

Via
Web.dev prefers-color-scheme

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')