Color Schemes

Yore ships with several built-in color schemes, selectable via themeColorScheme in hugo.yaml.

A color scheme is a CSS file that defines three groups of color tokens — --clr-neutral-*, --clr-brand-*, and --clr-accent-* — from which the entire theme derives its colors. Nothing else.

params:
  themeColorScheme: SCHEME-NAME

Built-in schemes

Use the theme switcher below to preview all built-in schemes.

Create a custom scheme

1. 1

   Create assets/css/schemes/my-scheme.css. The file must define all 33 tokens, wrapped in a [data-scheme="my-scheme"] selector:

   assets/css/schemes/my-scheme.css

   [data-scheme="my-scheme"] {
     --clr-neutral-50:  oklch(98.5% 0 0);
     --clr-neutral-100: oklch(97%   0 0);
     --clr-neutral-200: oklch(92%   0 0);
     --clr-neutral-300: oklch(86%   0 0);
     --clr-neutral-400: oklch(70%   0 0);
     --clr-neutral-500: oklch(54%   0 0);
     --clr-neutral-600: oklch(42%   0 0);
     --clr-neutral-700: oklch(35%   0 0);
     --clr-neutral-800: oklch(25%   0 0);
     --clr-neutral-900: oklch(18%   0 0);
     --clr-neutral-950: oklch(12%   0 0);
   
     --clr-brand-50:  oklch(98%  0.03  250);
     --clr-brand-100: oklch(96%  0.055 250);
     --clr-brand-200: oklch(92%  0.1   250);
     --clr-brand-300: oklch(87%  0.145 250);
     --clr-brand-400: oklch(82%  0.175 250);
     --clr-brand-500: oklch(75%  0.19  250);
     --clr-brand-600: oklch(62%  0.165 250);
     --clr-brand-700: oklch(50%  0.135 250);
     --clr-brand-800: oklch(40%  0.105 250);
     --clr-brand-900: oklch(33%  0.085 250);
     --clr-brand-950: oklch(25%  0.06  250);
   
     --clr-accent-50:  oklch(97.5% 0.015 165);
     --clr-accent-100: oklch(95%   0.025 165);
     --clr-accent-200: oklch(90%   0.04  165);
     --clr-accent-300: oklch(82%   0.06  165);
     --clr-accent-400: oklch(72%   0.075 165);
     --clr-accent-500: oklch(62%   0.085 165);
     --clr-accent-600: oklch(52%   0.08  165);
     --clr-accent-700: oklch(43%   0.07  165);
     --clr-accent-800: oklch(35%   0.055 165);
     --clr-accent-900: oklch(28%   0.045 165);
     --clr-accent-950: oklch(20%   0.03  165);
   }

2. 2

   Set themeColorScheme to the file name (without .css):

   hugo.yaml

   params:
     themeColorScheme: my-scheme

For how these tokens map to semantic variables like --background, --foreground, and --primary, see the customization guide.