← Back to context

Comment by omer_balyali

9 hours ago

Theming vocabulary is a mess. "Theme", "mode", "scheme", and "palette" are used interchangeably even though they describe completely different layers of abstraction.

My mental model is as follows:

- Palette: All primitive color values.

- Luminance mode: light and dark modes (what CSS and operating systems call "color scheme").

- Contrast mode: Default and high-contrast modes.

- Color Theme: The named aesthetic identity like "espresso", "summer"... expressed as palette values mapped to semantic roles (surface, primary, text…), defined for each luminance × contrast combination.

For example, a website might have:

- 3 color themes: "monochrome", "espresso", "summer".

- Each color theme might support luminance modes, like "espresso-light" and "espresso-dark".

- Each luminance mode might support contrast modes as well, "espresso-dark-default" and "espresso-dark-high-contrast".

- Palette is all the values that "espresso" color theme consists of including luminance and contrast mode values.

The combinatorial complexity might look scary but most products only need a slice of it: two luminance modes, no contrast modes, one color theme.