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.0221 256);  --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.545 0.185 256);  --primary-hover: oklch(0.5 0.1709 256);  --primary-foreground: oklch(1 0 0);  --ring: oklch(0.784 0.111 256);  --brand-soft: oklch(0.954 0.0221 256);  --brand-foreground: oklch(0.4832 0.1652 256);  --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.4832 0.1652 256);  --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: color-mix(in oklch, oklch(0.2767 0 0) 60%, oklch(0.4787 0 0));  --destructive-solid: oklch(0.5001 0.189 25);  --sidebar-accent-foreground: oklch(0.2767 0 0);  --sidebar-border: oklch(0.886 0 0);  --sidebar-primary: oklch(0.545 0.185 256);  --sidebar-primary-foreground: oklch(1 0 0);  --sidebar-ring: oklch(0.784 0.111 256);  --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.0296 256);  --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.545 0.185 256);  --primary-hover: oklch(0.59 0.185 256);  --primary-foreground: oklch(1 0 0);  --ring: oklch(0.464 0.1295 256);  --brand-soft: oklch(0.232 0.0296 256);  --brand-foreground: oklch(0.6784 0.1665 256);  --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.6784 0.1665 256);  --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: color-mix(in oklch, oklch(0.9041 0 0) 60%, oklch(0.6763 0 0));  --destructive-solid: oklch(0.6961 0.189 25);  --sidebar-accent-foreground: oklch(0.9041 0 0);  --sidebar-border: oklch(0.324 0 0);  --sidebar-primary: oklch(0.545 0.185 256);  --sidebar-primary-foreground: oklch(1 0 0);  --sidebar-ring: oklch(0.464 0.1295 256);  --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);}