# 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: November 10, 2026

## [Custom Properties](https://www.ask-codey.com/courses/css-in-depth/topics/css-custom-properties-topic)

1. [Custom Properties: Variables in CSS](https://www.ask-codey.com/lessons/css-custom-properties) (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](https://www.ask-codey.com/lessons/css-design-tokens) (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](https://www.ask-codey.com/courses/css-in-depth/topics/css-light-and-dark-themes)

1. [Light and Dark Themes with prefers-color-scheme](https://www.ask-codey.com/lessons/css-dark-mode) (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](https://www.ask-codey.com/courses/css-in-depth/topics/exercise-css-themeable-components)

1. [Exercise: Themeable Buttons and Cards](https://www.ask-codey.com/lessons/exercise-css-themeable-components) (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.

Source: https://www.ask-codey.com/courses/css-in-depth/chapters/css-custom-properties-and-themes