Default

--dark

--light

--highlight

--highlight-contrast

--error

--error-contrast

--success

--success-contrast

--warning

--warning-contrast

--notice

--notice-contrast

Brand

--brand

--brand-surface0

--brand-surface1

--brand-text0

--brand-text1

Base

--theme

--background

--surface0

--surface1

--surface2

--surface3

--surface4

--surface5

--surface6

--text0

--text1

--text2

----tooltip-text

--overlay-RGB
(+ opacity 50%)

--surface-RGB
(+ opacity 50%)

--surfaceTransparent

--shadow

--separator

--tooltip-surface

Exemples

--brand-text0
sur --brand-surface0

--brand-text1
sur --brand-surface1

--text0
sur --surface1

--text1
sur --surface3

--text2
sur --surface3

--tooltip-text
sur --tooltip-surface

Contrast

--contrast-surface0

--contrast-surface1

--contrast-surface-0-RGB
(+ opacity 50%)

--contrast-surface-1-RGB
(+ opacity 50%)

--contrast-text0

--contrast-text1

--contrast-text0-RGB
(+ opacity 50%)

--contrast-text1-RGB
(+ opacity 50%)

--contrast-shadow

Accent

--accent-surface0

--accent-surface0-RGB
(+ opacity 50%)

--accent-surface1

--accent-surface1-RGB
(+ opacity 50%)

--accent-hover

--accent-border

--accent-highlight

--accent-shadow

--accent-text0

--accent-text0-RGB
(+ opacity 50%)

--accent-text1

--accent-text1-RGB
(+ opacity 50%)

--accent-text2

--accent-text2-RGB
(+ opacity 50%)

Lead

--lead-surface0

--lead-surface0-RGB
(+ opacity 50%)

--lead-surface1

--lead-surface1-RGB
(+ opacity 50%)

--lead-hover

--lead-border

--lead-highlight

--lead-shadow

--lead-text0

--lead-text0-RGB
(+ opacity 50%)

--lead-text1

--lead-text1-RGB
(+ opacity 50%)

--lead-text2

--lead-text2-RGB
(+ opacity 50%)

Exemples

--contrast-text1
sur --contrast-surface0

--contrast-text1
sur --accent-surface1

--accent-text0
sur --accent-surface0

--accent-text1
sur --accent-surface1

--lead-text0
sur --lead-surface0

--lead-text1
sur --lead-surface1

Default usage : Foregrounds

--fg-color: var(--text1);

--fg-bright-color: var(--accent);

--fg-vivid-color: var(--text2);

--fg-highlight: var(--text2);

--fg-selection: var(--accent-text1);

--fg-placeholder: var(--text1);

--fg-separator: var(--separator);

--fg-tooltip: var(--surface0);

--fg-brand: var(--brand-text0);

--fg-headings: var(--text0);

--fg-headings-alt: var(--text2);

--fg-focus: var(--accent);

--fg-links: var(--accent-text2);

--fg-actions: var(--accent-text0);

--fg-nav: var(--text1);

Default usage : Backgrounds

--theme-color: var(--theme);

--bg-body: var(--theme);

--bg-content: var(--background);

--bg-brand: var(--brand-surface0);

--bg-form: var(--surface0);

--bg-input: var(--surface2);

--bg-block: var(--surface0);

--bg-block-alt: var(--surface3);

--bg-actions: var(--accent-surface0);

--border-actions: var(--accent-border);

--bg-hover: var(--accent-hover);

--bg-highlight: var(--surface6);

--bg-selection: var(--accent-surface1);

--bg-tooltip: var(--tooltip-surface);

--bg-overlay: rgba(var(--overlay-RGB), .7);

--bg-sheet: var(--theme);

--bg-modal: var(--surface0);

--bg-scroll-track: var(--background);

--bg-scroll-thumb: var(--accent-surface1);

--bg-scroll-thumb-hover: var(--accent-surface1);

Exemples