Appearance

Every theme is generated from a background, an accent, and a contrast level. Changes apply to the whole site.

Visual style

Mode

Mode

Theme

Each theme includes a light and a dark version.

Theme

Accent

Buttons, focus, and highlights in light mode

Background

The canvas every surface is built from in light mode

Advanced

Contrast

Spacing between surface steps and the text contrast target

50

Theme CSS

The generated roles for both appearances. Paste after the JZB theme import.

theme.css
html[data-color-theme] {  color-scheme: light;  --background: oklch(0.994 0 0);  --surface: oklch(1 0 0);  --popover: oklch(1 0 0);  --sidebar: oklch(0.969 0 0);  --sidebar-accent: oklch(0.929 0 0);  --muted: oklch(0.954 0 0);  --accent: oklch(0.954 0.0228 250);  --selected: oklch(0.91 0 0);  --border: oklch(0.886 0 0);  --input: oklch(0.852 0 0);  --border-hover: oklch(0.784 0 0);  --foreground: oklch(0.2767 0 0);  --muted-foreground: oklch(0.4787 0 0);  --primary: oklch(0.535 0.151 250);  --primary-hover: oklch(0.49 0.1388 250);  --primary-foreground: oklch(1 0 0);  --ring: oklch(0.784 0.1057 250);  --brand-soft: oklch(0.954 0.0228 250);  --brand-foreground: oklch(0.4794 0.1359 250);  --success: oklch(0.4673 0.1231 152);  --success-soft: oklch(0.954 0.0272 152);  --success-foreground: oklch(1 0 0);  --warning: oklch(0.4826 0.1019 75);  --warning-soft: oklch(0.954 0.0256 75);  --warning-foreground: oklch(1 0 0);  --destructive: oklch(0.5001 0.189 25);  --destructive-soft: oklch(0.954 0.0228 25);  --destructive-foreground: oklch(1 0 0);  --info: oklch(0.4823 0.159 255);  --info-soft: oklch(0.954 0.0222 255);  --info-foreground: oklch(1 0 0);  --code-function: oklch(0.4899 0.1336 48);  --code-tag: oklch(0.5015 0.189 354);  --code-attribute: oklch(0.4823 0.159 255);  --card: oklch(1 0 0);  --foreground-body: color-mix(in oklch, oklch(0.2767 0 0) 80%, oklch(0.4787 0 0));  --card-foreground: oklch(0.2767 0 0);  --popover-foreground: oklch(0.2767 0 0);  --secondary: oklch(0.954 0 0);  --secondary-foreground: oklch(0.2767 0 0);  --accent-foreground: oklch(0.4794 0.1359 250);  --control: color-mix(in oklch, oklch(0.2767 0 0) 5%, transparent);  --control-hover: color-mix(in oklch, oklch(0.2767 0 0) 8%, transparent);  --control-active: oklch(1 0 0);  --control-border: oklch(0.852 0 0);  --control-border-hover: oklch(0.784 0 0);  --control-track: oklch(0.852 0 0);  --control-thumb: oklch(1 0 0);  --sidebar-foreground: oklch(0.4787 0 0);  --sidebar-accent-foreground: oklch(0.2767 0 0);  --sidebar-border: oklch(0.886 0 0);  --sidebar-primary: oklch(0.535 0.151 250);  --sidebar-primary-foreground: oklch(1 0 0);  --sidebar-ring: oklch(0.784 0.1057 250);  --code-surface: color-mix(in oklch, oklch(0.2767 0 0) 3%, oklch(1 0 0));  --code-foreground: oklch(0.4787 0 0);  --code-border: oklch(0.886 0 0);  --code-inline: oklch(0.954 0 0);}html[data-color-theme].dark {  color-scheme: dark;  --background: oklch(0.164 0 0);  --surface: oklch(0.192 0 0);  --popover: oklch(0.22 0 0);  --sidebar: oklch(0.139 0 0);  --sidebar-accent: oklch(0.207 0 0);  --muted: oklch(0.232 0 0);  --accent: oklch(0.232 0.0242 250);  --selected: oklch(0.29 0 0);  --border: oklch(0.324 0 0);  --input: oklch(0.376 0 0);  --border-hover: oklch(0.464 0 0);  --foreground: oklch(0.9041 0 0);  --muted-foreground: oklch(0.6763 0 0);  --primary: oklch(0.535 0.151 250);  --primary-hover: oklch(0.58 0.151 250);  --primary-foreground: oklch(1 0 0);  --ring: oklch(0.464 0.1057 250);  --brand-soft: oklch(0.232 0.0242 250);  --brand-foreground: oklch(0.6755 0.1359 250);  --success: oklch(0.6614 0.153 152);  --success-soft: oklch(0.232 0.0272 152);  --success-foreground: oklch(0.2 0.0383 152);  --warning: oklch(0.78 0.144 75);  --warning-soft: oklch(0.232 0.0256 75);  --warning-foreground: oklch(0.2 0.036 75);  --destructive: oklch(0.6961 0.189 25);  --destructive-soft: oklch(0.232 0.0336 25);  --destructive-foreground: oklch(0.2 0.04 25);  --info: oklch(0.6782 0.171 255);  --info-soft: oklch(0.232 0.0304 255);  --info-foreground: oklch(0.2 0.04 255);  --code-function: oklch(0.7 0.171 48);  --code-tag: oklch(0.6982 0.189 354);  --code-attribute: oklch(0.6782 0.171 255);  --card: oklch(0.192 0 0);  --foreground-body: color-mix(in oklch, oklch(0.9041 0 0) 80%, oklch(0.6763 0 0));  --card-foreground: oklch(0.9041 0 0);  --popover-foreground: oklch(0.9041 0 0);  --secondary: oklch(0.232 0 0);  --secondary-foreground: oklch(0.9041 0 0);  --accent-foreground: oklch(0.6755 0.1359 250);  --control: color-mix(in oklch, oklch(0.9041 0 0) 7%, transparent);  --control-hover: color-mix(in oklch, oklch(0.9041 0 0) 11%, transparent);  --control-active: color-mix(in oklch, oklch(0.9041 0 0) 13%, transparent);  --control-border: oklch(0.376 0 0);  --control-border-hover: oklch(0.464 0 0);  --control-track: oklch(0.376 0 0);  --control-thumb: oklch(1 0 0);  --sidebar-foreground: oklch(0.6763 0 0);  --sidebar-accent-foreground: oklch(0.9041 0 0);  --sidebar-border: oklch(0.324 0 0);  --sidebar-primary: oklch(0.535 0.151 250);  --sidebar-primary-foreground: oklch(1 0 0);  --sidebar-ring: oklch(0.464 0.1057 250);  --code-surface: color-mix(in oklch, oklch(0.9041 0 0) 3%, oklch(0.192 0 0));  --code-foreground: oklch(0.6763 0 0);  --code-border: oklch(0.324 0 0);  --code-inline: oklch(0.232 0 0);}