References
Color Schemes
Overview
Master uses an intelligent matching algorithm to make all styles support color schemes toggling, and the feature isn’t limited to color-related properties, which means you can also apply it in layout, sizing, typography, and more.
- Using descendant combinator to apply a style based on color schemes.
- Chaining style with
@darkor@light. - Prioritizing
@darkand@lightsuffix styles smartly.
Mountain
A mountain is an elevated portion of the Earth's crust, generally with steep sides that show
significant exposed bedrock.
Mountain
A mountain is an elevated portion of the Earth's crust, generally with steep sides that show
significant exposed bedrock.
<div class="f:gray-80@light f:gray-20@dark"></div>Basic usage
- set
bg:fade-50on default (overrided if set@darkor@lightproperties and set its related-mode). - set
bg:fade-20on dark mode. - set
bg:fade-80on light mode.
<div class="bg:fade-50 bg:fade-20@dark bg:fade-80@light …"></div>Setup
The most common practice is to provide and store the user’s preference, it is unlikely to rely solely on CSS prefers-color-schemes to implement a color schemes.
const storagedTheme = localStorage.getItem('theme');
const htmlClassList = document.documentElement.classList;
const DARK = 'dark';
const LIGHT = 'light';
const isDark = storagedTheme === DARK
|| !storagedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches;Detect user preferences
htmlClassList.toggle(LIGHT, !isDark);
htmlClassList.toggle(DARK, isDark);
if (!storagedTheme) {
localStorage.setItem('theme', isDark ? DARK : LIGHT);
}Toggle and storage theme
Current theme is .
<button id="theme-toggle">toggle theme</button>const toggleTheme = () => {
const theme = localStorage.getItem('theme');
const htmlClassList = document.documentElement.classList;
const isDark = theme === 'dark';
htmlClassList.toggle('dark', !isDark);
htmlClassList.toggle('light', isDark);
localStorage.setItem('theme', isDark ? 'light' : 'dark');
};
document.getElementById('theme-toggle')
.addEventListener('click', toggleTheme, { passive: true })Warning ! the following are the most common access errors in localStorage, which will cause the storage event to fail to trigger, etc.
// Don't do this !
localStorage.theme = 'light';
