Custom Properties and Themes

Name your design decisions once and use them everywhere: custom properties (CSS variables), design tokens for color, type and spacing, and light and dark themes that follow the reader's settings.

Updated

Custom Properties

  1. Custom Properties: Variables in CSS (Apprentice): A custom property gives a value such as a brand color a name you choose, once, and every rule that reads it with var() follows when that one value changes.
  2. Design Tokens: a Small Design System (Journeyman): Design tokens are a short list of custom properties for a site's colors, type sizes, spacing, corners and shadows, named by their job, so every component is built from the same decisions and one change restyles them all.

Light and Dark Themes

  1. Light and Dark Themes with prefers-color-scheme (Journeyman): A dark theme is the same page with new token values: you redefine the color tokens in a prefers-color-scheme media query, set color-scheme, and every component follows the reader's light or dark setting.

Exercise: Themeable Buttons and Cards

  1. Exercise: Themeable Buttons and Cards (Journeyman): Rebuild The Daily Grind's buttons, menu card and sign-up field on design tokens defined on :root, then give them a dark theme that changes only the tokens, and let the tests check both themes.