Dark Mode
Serving an alternate palette for low-light preference, and the three states that implies.
Dark mode is an alternate color scheme for interfaces, driven either by the operating system's stated preference or by an explicit choice within the application.
The important structural fact is that there are three states, not two: light, dark, and unset. An explicit choice usually stamps a marker on the document root; the default "follow the system" setting stamps nothing, leaving only the media query to distinguish light from dark. A theme implementation that handles only two states will get the third wrong, usually by ignoring an explicit choice or by ignoring the system preference.
The robust shape is: define the complete light palette on the bare root selector, redefine only the changed tokens under the dark media query guarded against an explicit light choice, and redefine them again under an explicit dark marker so the toggle wins in both directions. No color should have its only definition inside a media query.
Two practical notes. Because the common implementation toggles a class on the root element, code that needs to observe the current theme must watch that element rather than the media query — the media query reports the system preference, not the applied theme. And dark mode is not an inversion: shadows, image treatment, and contrast ratios all need separate consideration; see Color Contrast.
See also13
CSS Custom Property
A user-defined CSS property that participates in the cascade and inherits down the tree.
Design & Interface12 connections
Scoped Styling
Confining a set of style decisions to a subtree so the same component can look different in different contexts.
Design & Interface11 connections
Utility-First CSS
Composing styles from many small single-purpose classes rather than authoring semantic rules.
Design & Interface15 connections
Design Token
Named design decisions — color, spacing, radius, type — stored as data so they can be shared and re-themed.
Design & Interface21 connections
OKLCH
A perceptually uniform color space that makes lightness and chroma behave predictably.
Design & Interface15 connections
Silent Failure
A failure that produces no signal, so the absence of an error reads as success.
Method73 connections
Portal
Rendering an element into a different part of the document than its logical parent.
Web Platform18 connections
Motion Design
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
Design & Interface23 connections
OLED
A display in which every pixel makes its own light from thin layers of organic compounds, giving true blacks and near-instant response, at the cost of limited full-screen brightness and gradual burn-in.
Graphics & Rendering5 connections
Focus Indicator
The visible outline or highlight showing which element on a screen will receive keyboard input, essential for anyone who doesn't use a mouse, and for years routinely removed by designers who found it unattractive.
Design & Interface12 connections
Glassmorphism
An interface style of translucent, blurred panels that let the content behind them show through like frosted glass, recurring across operating systems since the 2000s and repeatedly criticized for hurting legibility.
Design & Interface9 connections
HSL and HSV
Two rearrangements of the RGB color cube into hue, saturation, and lightness or value, made in the 1970s so people could pick colors intuitively, which are convenient for color pickers but don't match how bright colors actually look.
Graphics & Rendering6 connections
Favicon
The tiny icon identifying a website in tabs, bookmarks, and search results, invented by Internet Explorer in 1999, now a set of sizes and formats, and once a surprising tracking channel.
Web Platform8 connections
Linked from16
- CascadeDesign & Interface
The algorithm deciding which declaration wins when several apply to the same element.
- Color ContrastDesign & Interface
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
- CSS Custom PropertyDesign & Interface
A user-defined CSS property that participates in the cascade and inherits down the tree.
- Design TokenDesign & Interface
Named design decisions — color, spacing, radius, type — stored as data so they can be shared and re-themed.
- FaviconWeb Platform
The tiny icon identifying a website in tabs, bookmarks, and search results, invented by Internet Explorer in 1999, now a set of sizes and formats, and once a surprising tracking channel.
- Focus IndicatorDesign & Interface
The visible outline or highlight showing which element on a screen will receive keyboard input, essential for anyone who doesn't use a mouse, and for years routinely removed by designers who found it unattractive.
- GlassmorphismDesign & Interface
An interface style of translucent, blurred panels that let the content behind them show through like frosted glass, recurring across operating systems since the 2000s and repeatedly criticized for hurting legibility.
- HSL and HSVGraphics & Rendering
Two rearrangements of the RGB color cube into hue, saturation, and lightness or value, made in the 1970s so people could pick colors intuitively, which are convenient for color pickers but don't match how bright colors actually look.
- OKLCHDesign & Interface
A perceptually uniform color space that makes lightness and chroma behave predictably.
- OLEDGraphics & Rendering
A display in which every pixel makes its own light from thin layers of organic compounds, giving true blacks and near-instant response, at the cost of limited full-screen brightness and gradual burn-in.
- Opponent Process TheoryDesign & Interface
Color is recoded after the cones into red-green, blue-yellow and light-dark opponent channels.
- Polarized LightMatter & Energy
Light whose electric field oscillates in a preferred orientation, and the filters that select for it.
- Scoped StylingDesign & Interface
Confining a set of style decisions to a subtree so the same component can look different in different contexts.
- SkeuomorphismDesign & Interface
Designing a digital object to visually mimic its physical predecessor, borrowing familiarity at the cost of extra visual weight.
- Utility-First CSSDesign & Interface
Composing styles from many small single-purpose classes rather than authoring semantic rules.
- Vector GraphicsGraphics & Rendering
Images described as shapes and curves rather than a grid of pixels, so they stay sharp at any size, the basis of fonts, icons, logos, and maps.