Design tokens

Design token reference

A standalone map of the global --zui-* CSS variable contract so consumers know which foundation tokens to override before tuning individual components.

Variables

5401

Components

Dark tokens

2341

Contract pattern

Token naming

Every global token keeps the same --zui- prefix as component-level variables. Light and dark values are separate CSS variables so consumers can override either theme without changing component code.

--zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

Override snippet

Global theme variables

Start with these root-level variables, then add component-specific overrides from the CSS variable section on each component page.

:root {
  --zui-focus-ring: oklch(44.6% 0.043 257.281);
  --zui-ring-offset: oklch(98.4% 0.003 247.858);
  --zui-radius-xl: 0.75rem;
}

/* Dark theme tokens use the same contract with -dark appended. */
.dark {
  --zui-focus-ring-dark: oklch(86.9% 0.022 252.894);
  --zui-ring-offset-dark: oklch(12.9% 0.042 264.695);
}

Reference table

Global tokens from source

This table is derived from the exported constants in src/design-system/tokens.ts. The fallback column is the value Zentauri UI uses when no consumer override is present.

zuiFocusRing.default

Focus indicator color used by keyboard-visible focus states.

Variable	Fallback	Theme	Pair
--zui-focus-ring	oklch(44.6% 0.043 257.281)	Light	--zui-focus-ring-dark
--zui-focus-ring-dark	oklch(86.9% 0.022 252.894)	Dark	--zui-focus-ring

zuiRingOffset.default

Surface color used behind focus rings when a ring offset is applied.

Variable	Fallback	Theme	Pair
--zui-ring-offset	oklch(98.4% 0.003 247.858)	Light	--zui-ring-offset-dark
--zui-ring-offset-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-ring-offset

zuiRadius.xl

Shared large radius primitive used by rounded component surfaces.

Variable	Fallback	Theme	Pair
--zui-radius-xl	0.75rem	Shared	none

Component tokens

Variables by component

Open a component to see its available --zui-* variables. The fallback value is shown when the component docs data includes it; inferred dark rows still show the exact variable name to override.

Accordion

Override these accordion variables on :root, a theme selector, or a component wrapper.

168 tokens83 dark

Alert

Override these alert variables on :root, a theme selector, or a component wrapper.

150 tokens70 dark

Variable	Fallback	Theme	Pair
--zui-alert-ring-offset	oklch(98.4% 0.003 247.858)	Light	--zui-alert-ring-offset-dark
--zui-alert-default-border	#0000001a	Light	--zui-alert-default-border-dark
--zui-alert-default-bg	#0000000d	Light	--zui-alert-default-bg-dark
--zui-alert-default-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-default-fg-dark
--zui-alert-success-border	oklch(69.6% 0.17 162.48 / 0.4)	Light	--zui-alert-success-border-dark
--zui-alert-success-bg	oklch(69.6% 0.17 162.48 / 0.1)	Light	--zui-alert-success-bg-dark
--zui-alert-success-fg	oklch(26.2% 0.051 172.552)	Light	--zui-alert-success-fg-dark
--zui-alert-warning-border	oklch(76.9% 0.188 70.08 / 0.4)	Light	--zui-alert-warning-border-dark
--zui-alert-warning-bg	oklch(76.9% 0.188 70.08 / 0.1)	Light	--zui-alert-warning-bg-dark
--zui-alert-warning-fg	oklch(27.9% 0.077 45.635)	Light	--zui-alert-warning-fg-dark
--zui-alert-error-border	oklch(64.5% 0.246 16.439 / 0.5)	Light	--zui-alert-error-border-dark
--zui-alert-error-bg	oklch(64.5% 0.246 16.439 / 0.1)	Light	--zui-alert-error-bg-dark
--zui-alert-error-fg	oklch(27.1% 0.105 12.094)	Light	--zui-alert-error-fg-dark
--zui-alert-info-border	oklch(68.5% 0.169 237.323 / 0.4)	Light	--zui-alert-info-border-dark
--zui-alert-info-bg	oklch(68.5% 0.169 237.323 / 0.1)	Light	--zui-alert-info-bg-dark
--zui-alert-info-fg	oklch(29.3% 0.066 243.157)	Light	--zui-alert-info-fg-dark
--zui-alert-ghost-border	transparent	Light	--zui-alert-ghost-border-dark
--zui-alert-ghost-bg	transparent	Light	--zui-alert-ghost-bg-dark
--zui-alert-ghost-fg	oklch(37.2% 0.044 257.287)	Light	--zui-alert-ghost-fg-dark
--zui-alert-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-alert-purple-border-dark
--zui-alert-purple-bg	oklch(97.7% 0.014 308.299)	Light	--zui-alert-purple-bg-dark
--zui-alert-purple-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-purple-fg-dark
--zui-alert-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-alert-pink-border-dark
--zui-alert-pink-bg	oklch(97.1% 0.014 343.198)	Light	--zui-alert-pink-bg-dark
--zui-alert-pink-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-pink-fg-dark
--zui-alert-orange-border	oklch(47% 0.157 37.304)	Light	--zui-alert-orange-border-dark
--zui-alert-orange-bg	oklch(98% 0.016 73.684)	Light	--zui-alert-orange-bg-dark
--zui-alert-orange-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-orange-fg-dark
--zui-alert-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-alert-yellow-border-dark
--zui-alert-yellow-bg	oklch(98.7% 0.026 102.212)	Light	--zui-alert-yellow-bg-dark
--zui-alert-yellow-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-yellow-fg-dark
--zui-alert-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-alert-teal-border-dark
--zui-alert-teal-bg	oklch(98.4% 0.014 180.72)	Light	--zui-alert-teal-bg-dark
--zui-alert-teal-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-teal-fg-dark
--zui-alert-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-alert-indigo-border-dark
--zui-alert-indigo-bg	oklch(96.2% 0.018 272.314)	Light	--zui-alert-indigo-bg-dark
--zui-alert-indigo-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-indigo-fg-dark
--zui-alert-gray-border	oklch(27.8% 0.033 256.848)	Light	--zui-alert-gray-border-dark
--zui-alert-gray-bg	oklch(98.5% 0.002 247.839)	Light	--zui-alert-gray-bg-dark
--zui-alert-gray-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-gray-fg-dark
--zui-alert-violet-border	oklch(43.2% 0.232 292.759)	Light	--zui-alert-violet-border-dark
--zui-alert-violet-bg	oklch(96.9% 0.016 293.756)	Light	--zui-alert-violet-bg-dark
--zui-alert-violet-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-violet-fg-dark
--zui-alert-gradient-blue-border	oklch(42.4% 0.199 265.638)	Light	--zui-alert-gradient-blue-border-dark
--zui-alert-gradient-blue-from	oklch(97% 0.014 254.604)	Light	--zui-alert-gradient-blue-from-dark
--zui-alert-gradient-blue-to	oklch(97.7% 0.014 308.299)	Light	--zui-alert-gradient-blue-to-dark
--zui-alert-gradient-blue-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-gradient-blue-fg-dark
--zui-alert-gradient-green-border	oklch(44.8% 0.119 151.328)	Light	--zui-alert-gradient-green-border-dark
--zui-alert-gradient-green-from	oklch(98.2% 0.018 155.826)	Light	--zui-alert-gradient-green-from-dark
--zui-alert-gradient-green-to	oklch(98.6% 0.031 120.757)	Light	--zui-alert-gradient-green-to-dark
--zui-alert-gradient-green-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-gradient-green-fg-dark
--zui-alert-gradient-red-border	oklch(44.4% 0.177 26.899)	Light	--zui-alert-gradient-red-border-dark
--zui-alert-gradient-red-from	oklch(97.1% 0.013 17.38)	Light	--zui-alert-gradient-red-from-dark
--zui-alert-gradient-red-to	oklch(97.1% 0.014 343.198)	Light	--zui-alert-gradient-red-to-dark
--zui-alert-gradient-red-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-gradient-red-fg-dark
--zui-alert-gradient-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-alert-gradient-yellow-border-dark
--zui-alert-gradient-yellow-from	oklch(98.7% 0.026 102.212)	Light	--zui-alert-gradient-yellow-from-dark
--zui-alert-gradient-yellow-to	oklch(98% 0.016 73.684)	Light	--zui-alert-gradient-yellow-to-dark
--zui-alert-gradient-yellow-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-gradient-yellow-fg-dark
--zui-alert-gradient-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-alert-gradient-purple-border-dark
--zui-alert-gradient-purple-from	oklch(97.7% 0.014 308.299)	Light	--zui-alert-gradient-purple-from-dark
--zui-alert-gradient-purple-to	oklch(97.1% 0.014 343.198)	Light	--zui-alert-gradient-purple-to-dark
--zui-alert-gradient-purple-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-gradient-purple-fg-dark
--zui-alert-gradient-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-alert-gradient-teal-border-dark
--zui-alert-gradient-teal-from	oklch(98.4% 0.014 180.72)	Light	--zui-alert-gradient-teal-from-dark
--zui-alert-gradient-teal-to	oklch(98.4% 0.019 200.873)	Light	--zui-alert-gradient-teal-to-dark
--zui-alert-gradient-teal-fg	oklch(20.8% 0.042 265.755)	Light	--zui-alert-gradient-teal-fg-dark
--zui-alert-gradient-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-alert-gradient-indigo-border-dark
--zui-alert-gradient-indigo-from	oklch(96.2% 0.018 272.314)	Light	--zui-alert-gradient-indigo-from-dark
--zui-alert-gradient-indigo-to	oklch(97.7% 0.014 308.299)	Light	--zui-alert-gradient-indigo-to-dark
--zui-alert-gradient-indigo-fg	oklch(20.8% 0.042 265.755)	Shared	none
--zui-alert-gradient-pink-border	oklch(45.9% 0.187 3.815)	Shared	none
--zui-alert-gradient-pink-from	oklch(97.1% 0.014 343.198)	Shared	none
--zui-alert-gradient-pink-to	oklch(96.9% 0.015 12.422)	Shared	none
--zui-alert-gradient-pink-fg	oklch(20.8% 0.042 265.755)	Shared	none
--zui-alert-gradient-orange-border	oklch(47% 0.157 37.304)	Shared	none
--zui-alert-gradient-orange-from	oklch(98% 0.016 73.684)	Shared	none
--zui-alert-gradient-orange-to	oklch(97.1% 0.013 17.38)	Shared	none
--zui-alert-gradient-orange-fg	oklch(20.8% 0.042 265.755)	Shared	none
--zui-alert-description-fg	oklch(44.6% 0.043 257.281)	Shared	none
--zui-alert-ring-offset-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-alert-ring-offset
--zui-alert-default-border-dark	#ffffff1a	Dark	--zui-alert-default-border
--zui-alert-default-bg-dark	Override with your dark theme value	Dark	--zui-alert-default-bg
--zui-alert-default-fg-dark	Override with your dark theme value	Dark	--zui-alert-default-fg
--zui-alert-success-border-dark	Override with your dark theme value	Dark	--zui-alert-success-border
--zui-alert-success-bg-dark	Override with your dark theme value	Dark	--zui-alert-success-bg
--zui-alert-success-fg-dark	Override with your dark theme value	Dark	--zui-alert-success-fg
--zui-alert-warning-border-dark	Override with your dark theme value	Dark	--zui-alert-warning-border
--zui-alert-warning-bg-dark	Override with your dark theme value	Dark	--zui-alert-warning-bg
--zui-alert-warning-fg-dark	Override with your dark theme value	Dark	--zui-alert-warning-fg
--zui-alert-error-border-dark	Override with your dark theme value	Dark	--zui-alert-error-border
--zui-alert-error-bg-dark	Override with your dark theme value	Dark	--zui-alert-error-bg
--zui-alert-error-fg-dark	Override with your dark theme value	Dark	--zui-alert-error-fg
--zui-alert-info-border-dark	Override with your dark theme value	Dark	--zui-alert-info-border
--zui-alert-info-bg-dark	Override with your dark theme value	Dark	--zui-alert-info-bg
--zui-alert-info-fg-dark	Override with your dark theme value	Dark	--zui-alert-info-fg
--zui-alert-ghost-border-dark	Override with your dark theme value	Dark	--zui-alert-ghost-border
--zui-alert-ghost-bg-dark	Override with your dark theme value	Dark	--zui-alert-ghost-bg
--zui-alert-ghost-fg-dark	Override with your dark theme value	Dark	--zui-alert-ghost-fg
--zui-alert-purple-border-dark	Override with your dark theme value	Dark	--zui-alert-purple-border
--zui-alert-purple-bg-dark	Override with your dark theme value	Dark	--zui-alert-purple-bg
--zui-alert-purple-fg-dark	Override with your dark theme value	Dark	--zui-alert-purple-fg
--zui-alert-pink-border-dark	Override with your dark theme value	Dark	--zui-alert-pink-border
--zui-alert-pink-bg-dark	Override with your dark theme value	Dark	--zui-alert-pink-bg
--zui-alert-pink-fg-dark	Override with your dark theme value	Dark	--zui-alert-pink-fg
--zui-alert-orange-border-dark	Override with your dark theme value	Dark	--zui-alert-orange-border
--zui-alert-orange-bg-dark	Override with your dark theme value	Dark	--zui-alert-orange-bg
--zui-alert-orange-fg-dark	Override with your dark theme value	Dark	--zui-alert-orange-fg
--zui-alert-yellow-border-dark	Override with your dark theme value	Dark	--zui-alert-yellow-border
--zui-alert-yellow-bg-dark	Override with your dark theme value	Dark	--zui-alert-yellow-bg
--zui-alert-yellow-fg-dark	Override with your dark theme value	Dark	--zui-alert-yellow-fg
--zui-alert-teal-border-dark	Override with your dark theme value	Dark	--zui-alert-teal-border
--zui-alert-teal-bg-dark	Override with your dark theme value	Dark	--zui-alert-teal-bg
--zui-alert-teal-fg-dark	Override with your dark theme value	Dark	--zui-alert-teal-fg
--zui-alert-indigo-border-dark	Override with your dark theme value	Dark	--zui-alert-indigo-border
--zui-alert-indigo-bg-dark	Override with your dark theme value	Dark	--zui-alert-indigo-bg
--zui-alert-indigo-fg-dark	Override with your dark theme value	Dark	--zui-alert-indigo-fg
--zui-alert-gray-border-dark	Override with your dark theme value	Dark	--zui-alert-gray-border
--zui-alert-gray-bg-dark	Override with your dark theme value	Dark	--zui-alert-gray-bg
--zui-alert-gray-fg-dark	Override with your dark theme value	Dark	--zui-alert-gray-fg
--zui-alert-violet-border-dark	Override with your dark theme value	Dark	--zui-alert-violet-border
--zui-alert-violet-bg-dark	Override with your dark theme value	Dark	--zui-alert-violet-bg
--zui-alert-violet-fg-dark	Override with your dark theme value	Dark	--zui-alert-violet-fg
--zui-alert-gradient-blue-border-dark	Override with your dark theme value	Dark	--zui-alert-gradient-blue-border
--zui-alert-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-alert-gradient-blue-from
--zui-alert-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-alert-gradient-blue-to
--zui-alert-gradient-blue-fg-dark	Override with your dark theme value	Dark	--zui-alert-gradient-blue-fg
--zui-alert-gradient-green-border-dark	Override with your dark theme value	Dark	--zui-alert-gradient-green-border
--zui-alert-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-alert-gradient-green-from
--zui-alert-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-alert-gradient-green-to
--zui-alert-gradient-green-fg-dark	Override with your dark theme value	Dark	--zui-alert-gradient-green-fg
--zui-alert-gradient-red-border-dark	Override with your dark theme value	Dark	--zui-alert-gradient-red-border
--zui-alert-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-alert-gradient-red-from
--zui-alert-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-alert-gradient-red-to
--zui-alert-gradient-red-fg-dark	Override with your dark theme value	Dark	--zui-alert-gradient-red-fg
--zui-alert-gradient-yellow-border-dark	Override with your dark theme value	Dark	--zui-alert-gradient-yellow-border
--zui-alert-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-alert-gradient-yellow-from
--zui-alert-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-alert-gradient-yellow-to
--zui-alert-gradient-yellow-fg-dark	Override with your dark theme value	Dark	--zui-alert-gradient-yellow-fg
--zui-alert-gradient-purple-border-dark	Override with your dark theme value	Dark	--zui-alert-gradient-purple-border
--zui-alert-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-alert-gradient-purple-from
--zui-alert-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-alert-gradient-purple-to
--zui-alert-gradient-purple-fg-dark	Override with your dark theme value	Dark	--zui-alert-gradient-purple-fg
--zui-alert-gradient-teal-border-dark	Override with your dark theme value	Dark	--zui-alert-gradient-teal-border
--zui-alert-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-alert-gradient-teal-from
--zui-alert-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-alert-gradient-teal-to
--zui-alert-gradient-teal-fg-dark	Override with your dark theme value	Dark	--zui-alert-gradient-teal-fg
--zui-alert-gradient-indigo-border-dark	Override with your dark theme value	Dark	--zui-alert-gradient-indigo-border
--zui-alert-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-alert-gradient-indigo-from
--zui-alert-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-alert-gradient-indigo-to

Animated Number

Override these animated number variables on :root, a theme selector, or a component wrapper. Solid appearances set the text color; gradient appearances drive the from/to gradient stops.

64 tokens32 dark

Avatar

Override these avatar variables on :root, a theme selector, or a component wrapper.

148 tokens74 dark

Variable	Fallback	Theme	Pair
--zui-avatar-border	#0000001a	Light	--zui-avatar-border-dark
--zui-avatar-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-fg-dark
--zui-avatar-default-border	#0000001a	Light	--zui-avatar-default-border-dark
--zui-avatar-default-bg	#0000001a	Light	--zui-avatar-default-bg-dark
--zui-avatar-default-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-default-fg-dark
--zui-avatar-muted-border	#00000066	Light	--zui-avatar-muted-border-dark
--zui-avatar-muted-bg	oklch(98.4% 0.003 247.858)	Light	--zui-avatar-muted-bg-dark
--zui-avatar-muted-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-muted-fg-dark
--zui-avatar-sky-border	oklch(44.3% 0.11 240.79)	Light	--zui-avatar-sky-border-dark
--zui-avatar-sky-bg	oklch(95.1% 0.026 236.824 / 0.5)	Light	--zui-avatar-sky-bg-dark
--zui-avatar-sky-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-sky-fg-dark
--zui-avatar-rose-border	oklch(45.5% 0.188 13.697)	Light	--zui-avatar-rose-border-dark
--zui-avatar-rose-bg	oklch(94.1% 0.03 12.58 / 0.5)	Light	--zui-avatar-rose-bg-dark
--zui-avatar-rose-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-rose-fg-dark
--zui-avatar-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-avatar-purple-border-dark
--zui-avatar-purple-bg	oklch(94.6% 0.033 307.174 / 0.5)	Light	--zui-avatar-purple-bg-dark
--zui-avatar-purple-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-purple-fg-dark
--zui-avatar-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-avatar-pink-border-dark
--zui-avatar-pink-bg	oklch(94.8% 0.028 342.258 / 0.5)	Light	--zui-avatar-pink-bg-dark
--zui-avatar-pink-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-pink-fg-dark
--zui-avatar-orange-border	oklch(47% 0.157 37.304)	Light	--zui-avatar-orange-border-dark
--zui-avatar-orange-bg	oklch(95.4% 0.038 75.164 / 0.5)	Light	--zui-avatar-orange-bg-dark
--zui-avatar-orange-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-orange-fg-dark
--zui-avatar-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-avatar-yellow-border-dark
--zui-avatar-yellow-bg	oklch(97.3% 0.071 103.193 / 0.5)	Light	--zui-avatar-yellow-bg-dark
--zui-avatar-yellow-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-yellow-fg-dark
--zui-avatar-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-avatar-teal-border-dark
--zui-avatar-teal-bg	oklch(95.3% 0.051 180.801 / 0.5)	Light	--zui-avatar-teal-bg-dark
--zui-avatar-teal-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-teal-fg-dark
--zui-avatar-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-avatar-indigo-border-dark
--zui-avatar-indigo-bg	oklch(93% 0.034 272.788 / 0.5)	Light	--zui-avatar-indigo-bg-dark
--zui-avatar-indigo-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-indigo-fg-dark
--zui-avatar-emerald-border	oklch(43.2% 0.095 166.913)	Light	--zui-avatar-emerald-border-dark
--zui-avatar-emerald-bg	oklch(95% 0.052 163.051 / 0.5)	Light	--zui-avatar-emerald-bg-dark
--zui-avatar-emerald-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-emerald-fg-dark
--zui-avatar-gray-border	oklch(27.8% 0.033 256.848)	Light	--zui-avatar-gray-border-dark
--zui-avatar-gray-bg	oklch(96.7% 0.003 264.542 / 0.5)	Light	--zui-avatar-gray-bg-dark
--zui-avatar-gray-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-gray-fg-dark
--zui-avatar-amber-border	oklch(47.3% 0.137 46.201)	Light	--zui-avatar-amber-border-dark
--zui-avatar-amber-bg	oklch(96.2% 0.059 95.617 / 0.5)	Light	--zui-avatar-amber-bg-dark
--zui-avatar-amber-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-amber-fg-dark
--zui-avatar-violet-border	oklch(43.2% 0.232 292.759)	Light	--zui-avatar-violet-border-dark
--zui-avatar-violet-bg	oklch(94.3% 0.029 294.588 / 0.5)	Light	--zui-avatar-violet-bg-dark
--zui-avatar-violet-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-violet-fg-dark
--zui-avatar-gradient-blue-from	oklch(62.3% 0.214 259.815)	Light	--zui-avatar-gradient-blue-from-dark
--zui-avatar-gradient-blue-to	oklch(62.7% 0.265 303.9)	Light	--zui-avatar-gradient-blue-to-dark
--zui-avatar-gradient-blue-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-gradient-blue-fg-dark
--zui-avatar-gradient-green-from	oklch(72.3% 0.219 149.579)	Light	--zui-avatar-gradient-green-from-dark
--zui-avatar-gradient-green-to	oklch(76.8% 0.233 130.85)	Light	--zui-avatar-gradient-green-to-dark
--zui-avatar-gradient-green-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-gradient-green-fg-dark
--zui-avatar-gradient-red-from	oklch(63.7% 0.237 25.331)	Light	--zui-avatar-gradient-red-from-dark
--zui-avatar-gradient-red-to	oklch(65.6% 0.241 354.308)	Light	--zui-avatar-gradient-red-to-dark
--zui-avatar-gradient-red-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-gradient-red-fg-dark
--zui-avatar-gradient-yellow-from	oklch(79.5% 0.184 86.047)	Light	--zui-avatar-gradient-yellow-from-dark
--zui-avatar-gradient-yellow-to	oklch(70.5% 0.213 47.604)	Light	--zui-avatar-gradient-yellow-to-dark
--zui-avatar-gradient-yellow-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-gradient-yellow-fg-dark
--zui-avatar-gradient-purple-from	oklch(62.7% 0.265 303.9)	Light	--zui-avatar-gradient-purple-from-dark
--zui-avatar-gradient-purple-to	oklch(65.6% 0.241 354.308)	Light	--zui-avatar-gradient-purple-to-dark
--zui-avatar-gradient-purple-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-gradient-purple-fg-dark
--zui-avatar-gradient-teal-from	oklch(70.4% 0.14 182.503)	Light	--zui-avatar-gradient-teal-from-dark
--zui-avatar-gradient-teal-to	oklch(71.5% 0.143 215.221)	Light	--zui-avatar-gradient-teal-to-dark
--zui-avatar-gradient-teal-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-gradient-teal-fg-dark
--zui-avatar-gradient-indigo-from	oklch(58.5% 0.233 277.117)	Light	--zui-avatar-gradient-indigo-from-dark
--zui-avatar-gradient-indigo-to	oklch(62.7% 0.265 303.9)	Light	--zui-avatar-gradient-indigo-to-dark
--zui-avatar-gradient-indigo-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-gradient-indigo-fg-dark
--zui-avatar-gradient-pink-from	oklch(65.6% 0.241 354.308)	Light	--zui-avatar-gradient-pink-from-dark
--zui-avatar-gradient-pink-to	oklch(64.5% 0.246 16.439)	Light	--zui-avatar-gradient-pink-to-dark
--zui-avatar-gradient-pink-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-gradient-pink-fg-dark
--zui-avatar-gradient-orange-from	oklch(70.5% 0.213 47.604)	Light	--zui-avatar-gradient-orange-from-dark
--zui-avatar-gradient-orange-to	oklch(63.7% 0.237 25.331)	Light	--zui-avatar-gradient-orange-to-dark
--zui-avatar-gradient-orange-fg	oklch(37.2% 0.044 257.287)	Light	--zui-avatar-gradient-orange-fg-dark
--zui-avatar-fallback-bg	oklch(92.9% 0.013 255.508)	Light	--zui-avatar-fallback-bg-dark
--zui-avatar-fallback-fg	oklch(27.9% 0.041 260.031)	Light	--zui-avatar-fallback-fg-dark
--zui-avatar-group-ring	#ffffff	Light	--zui-avatar-group-ring-dark
--zui-avatar-border-dark	#ffffff1a	Dark	--zui-avatar-border
--zui-avatar-fg-dark	oklch(92.9% 0.013 255.508)	Dark	--zui-avatar-fg
--zui-avatar-default-border-dark	Override with your dark theme value	Dark	--zui-avatar-default-border
--zui-avatar-default-bg-dark	Override with your dark theme value	Dark	--zui-avatar-default-bg
--zui-avatar-default-fg-dark	Override with your dark theme value	Dark	--zui-avatar-default-fg
--zui-avatar-muted-border-dark	Override with your dark theme value	Dark	--zui-avatar-muted-border
--zui-avatar-muted-bg-dark	Override with your dark theme value	Dark	--zui-avatar-muted-bg
--zui-avatar-muted-fg-dark	Override with your dark theme value	Dark	--zui-avatar-muted-fg
--zui-avatar-sky-border-dark	Override with your dark theme value	Dark	--zui-avatar-sky-border
--zui-avatar-sky-bg-dark	Override with your dark theme value	Dark	--zui-avatar-sky-bg
--zui-avatar-sky-fg-dark	Override with your dark theme value	Dark	--zui-avatar-sky-fg
--zui-avatar-rose-border-dark	Override with your dark theme value	Dark	--zui-avatar-rose-border
--zui-avatar-rose-bg-dark	Override with your dark theme value	Dark	--zui-avatar-rose-bg
--zui-avatar-rose-fg-dark	Override with your dark theme value	Dark	--zui-avatar-rose-fg
--zui-avatar-purple-border-dark	Override with your dark theme value	Dark	--zui-avatar-purple-border
--zui-avatar-purple-bg-dark	Override with your dark theme value	Dark	--zui-avatar-purple-bg
--zui-avatar-purple-fg-dark	Override with your dark theme value	Dark	--zui-avatar-purple-fg
--zui-avatar-pink-border-dark	Override with your dark theme value	Dark	--zui-avatar-pink-border
--zui-avatar-pink-bg-dark	Override with your dark theme value	Dark	--zui-avatar-pink-bg
--zui-avatar-pink-fg-dark	Override with your dark theme value	Dark	--zui-avatar-pink-fg
--zui-avatar-orange-border-dark	Override with your dark theme value	Dark	--zui-avatar-orange-border
--zui-avatar-orange-bg-dark	Override with your dark theme value	Dark	--zui-avatar-orange-bg
--zui-avatar-orange-fg-dark	Override with your dark theme value	Dark	--zui-avatar-orange-fg
--zui-avatar-yellow-border-dark	Override with your dark theme value	Dark	--zui-avatar-yellow-border
--zui-avatar-yellow-bg-dark	Override with your dark theme value	Dark	--zui-avatar-yellow-bg
--zui-avatar-yellow-fg-dark	Override with your dark theme value	Dark	--zui-avatar-yellow-fg
--zui-avatar-teal-border-dark	Override with your dark theme value	Dark	--zui-avatar-teal-border
--zui-avatar-teal-bg-dark	Override with your dark theme value	Dark	--zui-avatar-teal-bg
--zui-avatar-teal-fg-dark	Override with your dark theme value	Dark	--zui-avatar-teal-fg
--zui-avatar-indigo-border-dark	Override with your dark theme value	Dark	--zui-avatar-indigo-border
--zui-avatar-indigo-bg-dark	Override with your dark theme value	Dark	--zui-avatar-indigo-bg
--zui-avatar-indigo-fg-dark	Override with your dark theme value	Dark	--zui-avatar-indigo-fg
--zui-avatar-emerald-border-dark	Override with your dark theme value	Dark	--zui-avatar-emerald-border
--zui-avatar-emerald-bg-dark	Override with your dark theme value	Dark	--zui-avatar-emerald-bg
--zui-avatar-emerald-fg-dark	Override with your dark theme value	Dark	--zui-avatar-emerald-fg
--zui-avatar-gray-border-dark	Override with your dark theme value	Dark	--zui-avatar-gray-border
--zui-avatar-gray-bg-dark	Override with your dark theme value	Dark	--zui-avatar-gray-bg
--zui-avatar-gray-fg-dark	Override with your dark theme value	Dark	--zui-avatar-gray-fg
--zui-avatar-amber-border-dark	Override with your dark theme value	Dark	--zui-avatar-amber-border
--zui-avatar-amber-bg-dark	Override with your dark theme value	Dark	--zui-avatar-amber-bg
--zui-avatar-amber-fg-dark	Override with your dark theme value	Dark	--zui-avatar-amber-fg
--zui-avatar-violet-border-dark	Override with your dark theme value	Dark	--zui-avatar-violet-border
--zui-avatar-violet-bg-dark	Override with your dark theme value	Dark	--zui-avatar-violet-bg
--zui-avatar-violet-fg-dark	Override with your dark theme value	Dark	--zui-avatar-violet-fg
--zui-avatar-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-blue-from
--zui-avatar-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-blue-to
--zui-avatar-gradient-blue-fg-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-blue-fg
--zui-avatar-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-green-from
--zui-avatar-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-green-to
--zui-avatar-gradient-green-fg-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-green-fg
--zui-avatar-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-red-from
--zui-avatar-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-red-to
--zui-avatar-gradient-red-fg-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-red-fg
--zui-avatar-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-yellow-from
--zui-avatar-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-yellow-to
--zui-avatar-gradient-yellow-fg-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-yellow-fg
--zui-avatar-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-purple-from
--zui-avatar-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-purple-to
--zui-avatar-gradient-purple-fg-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-purple-fg
--zui-avatar-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-teal-from
--zui-avatar-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-teal-to
--zui-avatar-gradient-teal-fg-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-teal-fg
--zui-avatar-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-indigo-from
--zui-avatar-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-indigo-to
--zui-avatar-gradient-indigo-fg-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-indigo-fg
--zui-avatar-gradient-pink-from-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-pink-from
--zui-avatar-gradient-pink-to-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-pink-to
--zui-avatar-gradient-pink-fg-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-pink-fg
--zui-avatar-gradient-orange-from-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-orange-from
--zui-avatar-gradient-orange-to-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-orange-to
--zui-avatar-gradient-orange-fg-dark	Override with your dark theme value	Dark	--zui-avatar-gradient-orange-fg
--zui-avatar-fallback-bg-dark	Override with your dark theme value	Dark	--zui-avatar-fallback-bg
--zui-avatar-fallback-fg-dark	Override with your dark theme value	Dark	--zui-avatar-fallback-fg
--zui-avatar-group-ring-dark	Override with your dark theme value	Dark	--zui-avatar-group-ring

Badge

Override these badge variables on :root, a theme selector, or a component wrapper.

126 tokens63 dark

Variable	Fallback	Theme	Pair
--zui-badge-default-bg	oklch(20.8% 0.042 265.755)	Light	--zui-badge-default-bg-dark
--zui-badge-default-fg	oklch(98.4% 0.003 247.858)	Light	--zui-badge-default-fg-dark
--zui-badge-default-shadow	0 1px 2px rgba(15,23,42,0.08)	Light	--zui-badge-default-shadow-dark
--zui-badge-secondary-bg	oklch(92.9% 0.013 255.508)	Light	--zui-badge-secondary-bg-dark
--zui-badge-secondary-fg	oklch(20.8% 0.042 265.755)	Light	--zui-badge-secondary-fg-dark
--zui-badge-destructive-bg	oklch(64.5% 0.246 16.439)	Light	--zui-badge-destructive-bg-dark
--zui-badge-destructive-fg	oklch(20.8% 0.042 265.755)	Light	--zui-badge-destructive-fg-dark
--zui-badge-outline-border	#0000001a	Light	--zui-badge-outline-border-dark
--zui-badge-outline-bg	#0000000d	Light	--zui-badge-outline-bg-dark
--zui-badge-outline-fg	oklch(20.8% 0.042 265.755)	Light	--zui-badge-outline-fg-dark
--zui-badge-ghost-bg	transparent	Light	--zui-badge-ghost-bg-dark
--zui-badge-ghost-fg	oklch(37.2% 0.044 257.287)	Light	--zui-badge-ghost-fg-dark
--zui-badge-glass-border	#00000026	Light	--zui-badge-glass-border-dark
--zui-badge-glass-bg	#0000001a	Light	--zui-badge-glass-bg-dark
--zui-badge-glass-fg	oklch(20.8% 0.042 265.755)	Light	--zui-badge-glass-fg-dark
--zui-badge-emerald-bg	oklch(69.6% 0.17 162.48)	Light	--zui-badge-emerald-bg-dark
--zui-badge-emerald-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-emerald-fg-dark
--zui-badge-indigo-bg	oklch(39.8% 0.195 277.366)	Light	--zui-badge-indigo-bg-dark
--zui-badge-indigo-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-indigo-fg-dark
--zui-badge-purple-bg	oklch(43.8% 0.218 303.724)	Light	--zui-badge-purple-bg-dark
--zui-badge-purple-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-purple-fg-dark
--zui-badge-pink-bg	oklch(45.9% 0.187 3.815)	Light	--zui-badge-pink-bg-dark
--zui-badge-pink-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-pink-fg-dark
--zui-badge-rose-bg	oklch(64.5% 0.246 16.439)	Light	--zui-badge-rose-bg-dark
--zui-badge-rose-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-rose-fg-dark
--zui-badge-sky-bg	oklch(68.5% 0.169 237.323)	Light	--zui-badge-sky-bg-dark
--zui-badge-sky-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-sky-fg-dark
--zui-badge-teal-bg	oklch(70.4% 0.14 182.503)	Light	--zui-badge-teal-bg-dark
--zui-badge-teal-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-teal-fg-dark
--zui-badge-yellow-bg	oklch(79.5% 0.184 86.047)	Light	--zui-badge-yellow-bg-dark
--zui-badge-yellow-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-yellow-fg-dark
--zui-badge-orange-bg	oklch(70.5% 0.213 47.604)	Light	--zui-badge-orange-bg-dark
--zui-badge-orange-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-orange-fg-dark
--zui-badge-gradient-blue-from	oklch(42.4% 0.199 265.638)	Light	--zui-badge-gradient-blue-from-dark
--zui-badge-gradient-blue-to	oklch(43.8% 0.218 303.724)	Light	--zui-badge-gradient-blue-to-dark
--zui-badge-gradient-blue-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-gradient-blue-fg-dark
--zui-badge-gradient-green-from	oklch(44.8% 0.119 151.328)	Light	--zui-badge-gradient-green-from-dark
--zui-badge-gradient-green-to	oklch(45.3% 0.124 130.933)	Light	--zui-badge-gradient-green-to-dark
--zui-badge-gradient-green-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-gradient-green-fg-dark
--zui-badge-gradient-red-from	oklch(44.4% 0.177 26.899)	Light	--zui-badge-gradient-red-from-dark
--zui-badge-gradient-red-to	oklch(45.9% 0.187 3.815)	Light	--zui-badge-gradient-red-to-dark
--zui-badge-gradient-red-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-gradient-red-fg-dark
--zui-badge-gradient-yellow-from	oklch(47.6% 0.114 61.907)	Light	--zui-badge-gradient-yellow-from-dark
--zui-badge-gradient-yellow-to	oklch(47% 0.157 37.304)	Light	--zui-badge-gradient-yellow-to-dark
--zui-badge-gradient-yellow-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-gradient-yellow-fg-dark
--zui-badge-gradient-purple-from	oklch(43.8% 0.218 303.724)	Light	--zui-badge-gradient-purple-from-dark
--zui-badge-gradient-purple-to	oklch(45.9% 0.187 3.815)	Light	--zui-badge-gradient-purple-to-dark
--zui-badge-gradient-purple-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-gradient-purple-fg-dark
--zui-badge-gradient-teal-from	oklch(43.7% 0.078 188.216)	Light	--zui-badge-gradient-teal-from-dark
--zui-badge-gradient-teal-to	oklch(45% 0.085 224.283)	Light	--zui-badge-gradient-teal-to-dark
--zui-badge-gradient-teal-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-gradient-teal-fg-dark
--zui-badge-gradient-indigo-from	oklch(39.8% 0.195 277.366)	Light	--zui-badge-gradient-indigo-from-dark
--zui-badge-gradient-indigo-to	oklch(43.8% 0.218 303.724)	Light	--zui-badge-gradient-indigo-to-dark
--zui-badge-gradient-indigo-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-gradient-indigo-fg-dark
--zui-badge-gradient-pink-from	oklch(45.9% 0.187 3.815)	Light	--zui-badge-gradient-pink-from-dark
--zui-badge-gradient-pink-to	oklch(45.5% 0.188 13.697)	Light	--zui-badge-gradient-pink-to-dark
--zui-badge-gradient-pink-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-gradient-pink-fg-dark
--zui-badge-gradient-orange-from	oklch(47% 0.157 37.304)	Light	--zui-badge-gradient-orange-from-dark
--zui-badge-gradient-orange-to	oklch(44.4% 0.177 26.899)	Light	--zui-badge-gradient-orange-to-dark
--zui-badge-gradient-orange-fg	oklch(96.8% 0.007 247.896)	Light	--zui-badge-gradient-orange-fg-dark
--zui-badge-ring-offset	oklch(98.4% 0.003 247.858)	Light	--zui-badge-ring-offset-dark
--zui-badge-ring-focus	oklch(44.6% 0.043 257.281)	Light	--zui-badge-ring-focus-dark
--zui-badge-close-button-ring-focus	#00000066	Light	--zui-badge-close-button-ring-focus-dark
--zui-badge-default-bg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-badge-default-bg
--zui-badge-default-fg-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-badge-default-fg
--zui-badge-default-shadow-dark	Override with your dark theme value	Dark	--zui-badge-default-shadow
--zui-badge-secondary-bg-dark	Override with your dark theme value	Dark	--zui-badge-secondary-bg
--zui-badge-secondary-fg-dark	Override with your dark theme value	Dark	--zui-badge-secondary-fg
--zui-badge-destructive-bg-dark	Override with your dark theme value	Dark	--zui-badge-destructive-bg
--zui-badge-destructive-fg-dark	Override with your dark theme value	Dark	--zui-badge-destructive-fg
--zui-badge-outline-border-dark	Override with your dark theme value	Dark	--zui-badge-outline-border
--zui-badge-outline-bg-dark	Override with your dark theme value	Dark	--zui-badge-outline-bg
--zui-badge-outline-fg-dark	Override with your dark theme value	Dark	--zui-badge-outline-fg
--zui-badge-ghost-bg-dark	Override with your dark theme value	Dark	--zui-badge-ghost-bg
--zui-badge-ghost-fg-dark	Override with your dark theme value	Dark	--zui-badge-ghost-fg
--zui-badge-glass-border-dark	Override with your dark theme value	Dark	--zui-badge-glass-border
--zui-badge-glass-bg-dark	Override with your dark theme value	Dark	--zui-badge-glass-bg
--zui-badge-glass-fg-dark	Override with your dark theme value	Dark	--zui-badge-glass-fg
--zui-badge-emerald-bg-dark	Override with your dark theme value	Dark	--zui-badge-emerald-bg
--zui-badge-emerald-fg-dark	Override with your dark theme value	Dark	--zui-badge-emerald-fg
--zui-badge-indigo-bg-dark	Override with your dark theme value	Dark	--zui-badge-indigo-bg
--zui-badge-indigo-fg-dark	Override with your dark theme value	Dark	--zui-badge-indigo-fg
--zui-badge-purple-bg-dark	Override with your dark theme value	Dark	--zui-badge-purple-bg
--zui-badge-purple-fg-dark	Override with your dark theme value	Dark	--zui-badge-purple-fg
--zui-badge-pink-bg-dark	Override with your dark theme value	Dark	--zui-badge-pink-bg
--zui-badge-pink-fg-dark	Override with your dark theme value	Dark	--zui-badge-pink-fg
--zui-badge-rose-bg-dark	Override with your dark theme value	Dark	--zui-badge-rose-bg
--zui-badge-rose-fg-dark	Override with your dark theme value	Dark	--zui-badge-rose-fg
--zui-badge-sky-bg-dark	Override with your dark theme value	Dark	--zui-badge-sky-bg
--zui-badge-sky-fg-dark	Override with your dark theme value	Dark	--zui-badge-sky-fg
--zui-badge-teal-bg-dark	Override with your dark theme value	Dark	--zui-badge-teal-bg
--zui-badge-teal-fg-dark	Override with your dark theme value	Dark	--zui-badge-teal-fg
--zui-badge-yellow-bg-dark	Override with your dark theme value	Dark	--zui-badge-yellow-bg
--zui-badge-yellow-fg-dark	Override with your dark theme value	Dark	--zui-badge-yellow-fg
--zui-badge-orange-bg-dark	Override with your dark theme value	Dark	--zui-badge-orange-bg
--zui-badge-orange-fg-dark	Override with your dark theme value	Dark	--zui-badge-orange-fg
--zui-badge-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-badge-gradient-blue-from
--zui-badge-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-badge-gradient-blue-to
--zui-badge-gradient-blue-fg-dark	Override with your dark theme value	Dark	--zui-badge-gradient-blue-fg
--zui-badge-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-badge-gradient-green-from
--zui-badge-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-badge-gradient-green-to
--zui-badge-gradient-green-fg-dark	Override with your dark theme value	Dark	--zui-badge-gradient-green-fg
--zui-badge-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-badge-gradient-red-from
--zui-badge-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-badge-gradient-red-to
--zui-badge-gradient-red-fg-dark	Override with your dark theme value	Dark	--zui-badge-gradient-red-fg
--zui-badge-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-badge-gradient-yellow-from
--zui-badge-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-badge-gradient-yellow-to
--zui-badge-gradient-yellow-fg-dark	Override with your dark theme value	Dark	--zui-badge-gradient-yellow-fg
--zui-badge-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-badge-gradient-purple-from
--zui-badge-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-badge-gradient-purple-to
--zui-badge-gradient-purple-fg-dark	Override with your dark theme value	Dark	--zui-badge-gradient-purple-fg
--zui-badge-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-badge-gradient-teal-from
--zui-badge-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-badge-gradient-teal-to
--zui-badge-gradient-teal-fg-dark	Override with your dark theme value	Dark	--zui-badge-gradient-teal-fg
--zui-badge-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-badge-gradient-indigo-from
--zui-badge-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-badge-gradient-indigo-to
--zui-badge-gradient-indigo-fg-dark	Override with your dark theme value	Dark	--zui-badge-gradient-indigo-fg
--zui-badge-gradient-pink-from-dark	Override with your dark theme value	Dark	--zui-badge-gradient-pink-from
--zui-badge-gradient-pink-to-dark	Override with your dark theme value	Dark	--zui-badge-gradient-pink-to
--zui-badge-gradient-pink-fg-dark	Override with your dark theme value	Dark	--zui-badge-gradient-pink-fg
--zui-badge-gradient-orange-from-dark	Override with your dark theme value	Dark	--zui-badge-gradient-orange-from
--zui-badge-gradient-orange-to-dark	Override with your dark theme value	Dark	--zui-badge-gradient-orange-to
--zui-badge-gradient-orange-fg-dark	Override with your dark theme value	Dark	--zui-badge-gradient-orange-fg
--zui-badge-ring-offset-dark	Override with your dark theme value	Dark	--zui-badge-ring-offset
--zui-badge-ring-focus-dark	Override with your dark theme value	Dark	--zui-badge-ring-focus
--zui-badge-close-button-ring-focus-dark	Override with your dark theme value	Dark	--zui-badge-close-button-ring-focus

Breadcrumb

Override these breadcrumb variables on :root, a theme selector, or a component wrapper.

36 tokens18 dark

Variable	Fallback	Theme	Pair
--zui-breadcrumb-default-fg	oklch(44.6% 0.043 257.281)	Light	--zui-breadcrumb-default-fg-dark
--zui-breadcrumb-muted-fg	oklch(55.4% 0.046 257.417)	Light	--zui-breadcrumb-muted-fg-dark
--zui-breadcrumb-sky-fg	oklch(44.3% 0.11 240.79)	Light	--zui-breadcrumb-sky-fg-dark
--zui-breadcrumb-rose-fg	oklch(45.5% 0.188 13.697)	Light	--zui-breadcrumb-rose-fg-dark
--zui-breadcrumb-purple-fg	oklch(43.8% 0.218 303.724)	Light	--zui-breadcrumb-purple-fg-dark
--zui-breadcrumb-pink-fg	oklch(45.9% 0.187 3.815)	Light	--zui-breadcrumb-pink-fg-dark
--zui-breadcrumb-orange-fg	oklch(47% 0.157 37.304)	Light	--zui-breadcrumb-orange-fg-dark
--zui-breadcrumb-yellow-fg	oklch(47.6% 0.114 61.907)	Light	--zui-breadcrumb-yellow-fg-dark
--zui-breadcrumb-teal-fg	oklch(43.7% 0.078 188.216)	Light	--zui-breadcrumb-teal-fg-dark
--zui-breadcrumb-indigo-fg	oklch(39.8% 0.195 277.366)	Light	--zui-breadcrumb-indigo-fg-dark
--zui-breadcrumb-emerald-fg	oklch(43.2% 0.095 166.913)	Light	--zui-breadcrumb-emerald-fg-dark
--zui-breadcrumb-gray-fg	oklch(27.8% 0.033 256.848)	Light	--zui-breadcrumb-gray-fg-dark
--zui-breadcrumb-amber-fg	oklch(47.3% 0.137 46.201)	Light	--zui-breadcrumb-amber-fg-dark
--zui-breadcrumb-violet-fg	oklch(43.2% 0.232 292.759)	Light	--zui-breadcrumb-violet-fg-dark
--zui-breadcrumb-link-ring-focus	#0000004d	Light	--zui-breadcrumb-link-ring-focus-dark
--zui-breadcrumb-link-ring-offset-focus	oklch(98.4% 0.003 247.858)	Light	--zui-breadcrumb-link-ring-offset-focus-dark
--zui-breadcrumb-page-fg	oklch(27.9% 0.041 260.031)	Light	--zui-breadcrumb-page-fg-dark
--zui-breadcrumb-separator-fg	oklch(70.4% 0.04 256.788)	Light	--zui-breadcrumb-separator-fg-dark
--zui-breadcrumb-default-fg-dark	oklch(86.9% 0.022 252.894)	Dark	--zui-breadcrumb-default-fg
--zui-breadcrumb-muted-fg-dark	oklch(70.4% 0.04 256.788)	Dark	--zui-breadcrumb-muted-fg
--zui-breadcrumb-sky-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-sky-fg
--zui-breadcrumb-rose-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-rose-fg
--zui-breadcrumb-purple-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-purple-fg
--zui-breadcrumb-pink-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-pink-fg
--zui-breadcrumb-orange-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-orange-fg
--zui-breadcrumb-yellow-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-yellow-fg
--zui-breadcrumb-teal-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-teal-fg
--zui-breadcrumb-indigo-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-indigo-fg
--zui-breadcrumb-emerald-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-emerald-fg
--zui-breadcrumb-gray-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-gray-fg
--zui-breadcrumb-amber-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-amber-fg
--zui-breadcrumb-violet-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-violet-fg
--zui-breadcrumb-link-ring-focus-dark	Override with your dark theme value	Dark	--zui-breadcrumb-link-ring-focus
--zui-breadcrumb-link-ring-offset-focus-dark	Override with your dark theme value	Dark	--zui-breadcrumb-link-ring-offset-focus
--zui-breadcrumb-page-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-page-fg
--zui-breadcrumb-separator-fg-dark	Override with your dark theme value	Dark	--zui-breadcrumb-separator-fg

Button

Override these button variables on :root, a theme selector, or a component wrapper.

209 tokens104 dark

Variable	Fallback	Theme	Pair
--zui-button-radius	0.75rem	Light	--zui-button-radius-dark
--zui-button-ring-offset	#f8fafc	Light	--zui-button-ring-offset-dark
--zui-button-focus-ring	#475569	Light	--zui-button-focus-ring-dark
--zui-button-default-bg	#0f172a	Light	--zui-button-default-bg-dark
--zui-button-default-fg	#f8fafc	Light	--zui-button-default-fg-dark
--zui-button-default-shadow	0 1px 2px #0f172a14	Light	--zui-button-default-shadow-dark
--zui-button-default-bg-hover	#000000	Light	--zui-button-default-bg-hover-dark
--zui-button-secondary-bg	#e2e8f0	Light	--zui-button-secondary-bg-dark
--zui-button-secondary-fg	#0f172a	Light	--zui-button-secondary-fg-dark
--zui-button-secondary-bg-hover	#cbd5e1	Light	--zui-button-secondary-bg-hover-dark
--zui-button-destructive-bg	#f43f5e	Light	--zui-button-destructive-bg-dark
--zui-button-destructive-fg	#ffffff	Light	--zui-button-destructive-fg-dark
--zui-button-destructive-bg-hover	#f43f5e	Light	--zui-button-destructive-bg-hover-dark
--zui-button-outline-border	#0000001a	Light	--zui-button-outline-border-dark
--zui-button-outline-bg	#0000000d	Light	--zui-button-outline-bg-dark
--zui-button-outline-fg	#0f172a	Light	--zui-button-outline-fg-dark
--zui-button-outline-bg-hover	#0000001a	Light	--zui-button-outline-bg-hover-dark
--zui-button-ghost-fg	#334155	Light	--zui-button-ghost-fg-dark
--zui-button-ghost-bg-hover	#0000000d	Light	--zui-button-ghost-bg-hover-dark
--zui-button-link-fg	#0e7490	Light	--zui-button-link-fg-dark
--zui-button-glass-border	#00000026	Light	--zui-button-glass-border-dark
--zui-button-glass-bg	#0000001a	Light	--zui-button-glass-bg-dark
--zui-button-glass-fg	#0f172a	Light	--zui-button-glass-fg-dark
--zui-button-glass-bg-hover	#00000026	Light	--zui-button-glass-bg-hover-dark
--zui-button-emerald-bg	#10b981	Light	--zui-button-emerald-bg-dark
--zui-button-emerald-fg	#ffffff	Light	--zui-button-emerald-fg-dark
--zui-button-emerald-bg-hover	#10b981	Light	--zui-button-emerald-bg-hover-dark
--zui-button-indigo-bg	#3730a3	Light	--zui-button-indigo-bg-dark
--zui-button-indigo-fg	#ffffff	Light	--zui-button-indigo-fg-dark
--zui-button-indigo-bg-hover	#3730a3	Light	--zui-button-indigo-bg-hover-dark
--zui-button-purple-bg	#6b21a8	Light	--zui-button-purple-bg-dark
--zui-button-purple-fg	#ffffff	Light	--zui-button-purple-fg-dark
--zui-button-purple-bg-hover	#6b21a8	Light	--zui-button-purple-bg-hover-dark
--zui-button-pink-bg	#9d174d	Light	--zui-button-pink-bg-dark
--zui-button-pink-fg	#ffffff	Light	--zui-button-pink-fg-dark
--zui-button-pink-bg-hover	#9d174d	Light	--zui-button-pink-bg-hover-dark
--zui-button-rose-bg	#9f1239	Light	--zui-button-rose-bg-dark
--zui-button-rose-fg	#ffffff	Light	--zui-button-rose-fg-dark
--zui-button-rose-bg-hover	#9f1239	Light	--zui-button-rose-bg-hover-dark
--zui-button-sky-bg	#0ea5e9	Light	--zui-button-sky-bg-dark
--zui-button-sky-fg	#ffffff	Light	--zui-button-sky-fg-dark
--zui-button-sky-bg-hover	#0ea5e9	Light	--zui-button-sky-bg-hover-dark
--zui-button-teal-bg	#14b8a6	Light	--zui-button-teal-bg-dark
--zui-button-teal-fg	#ffffff	Light	--zui-button-teal-fg-dark
--zui-button-teal-bg-hover	#14b8a6	Light	--zui-button-teal-bg-hover-dark
--zui-button-yellow-bg	#eab308	Light	--zui-button-yellow-bg-dark
--zui-button-yellow-fg	#ffffff	Light	--zui-button-yellow-fg-dark
--zui-button-yellow-bg-hover	#eab308	Light	--zui-button-yellow-bg-hover-dark
--zui-button-orange-bg	#f97316	Light	--zui-button-orange-bg-dark
--zui-button-orange-fg	#ffffff	Light	--zui-button-orange-fg-dark
--zui-button-orange-bg-hover	#f97316	Light	--zui-button-orange-bg-hover-dark
--zui-button-gray-bg	#6b7280	Light	--zui-button-gray-bg-dark
--zui-button-gray-fg	#ffffff	Light	--zui-button-gray-fg-dark
--zui-button-gray-bg-hover	#6b7280	Light	--zui-button-gray-bg-hover-dark
--zui-button-amber-bg	#f59e0b	Light	--zui-button-amber-bg-dark
--zui-button-amber-fg	#ffffff	Light	--zui-button-amber-fg-dark
--zui-button-amber-bg-hover	#f59e0b	Light	--zui-button-amber-bg-hover-dark
--zui-button-violet-bg	#5b21b6	Light	--zui-button-violet-bg-dark
--zui-button-violet-fg	#ffffff	Light	--zui-button-violet-fg-dark
--zui-button-violet-bg-hover	#5b21b6	Light	--zui-button-violet-bg-hover-dark
--zui-button-gradient-blue-from	#1e40af	Light	--zui-button-gradient-blue-from-dark
--zui-button-gradient-blue-to	#6b21a8	Light	--zui-button-gradient-blue-to-dark
--zui-button-gradient-blue-fg	#ffffff	Light	--zui-button-gradient-blue-fg-dark
--zui-button-gradient-blue-from-hover	#1e40af	Light	--zui-button-gradient-blue-from-hover-dark
--zui-button-gradient-blue-to-hover	#6b21a8	Light	--zui-button-gradient-blue-to-hover-dark
--zui-button-gradient-green-from	#166534	Light	--zui-button-gradient-green-from-dark
--zui-button-gradient-green-to	#3f6212	Light	--zui-button-gradient-green-to-dark
--zui-button-gradient-green-fg	#ffffff	Light	--zui-button-gradient-green-fg-dark
--zui-button-gradient-green-from-hover	#166534	Light	--zui-button-gradient-green-from-hover-dark
--zui-button-gradient-green-to-hover	#3f6212	Light	--zui-button-gradient-green-to-hover-dark
--zui-button-gradient-red-from	#991b1b	Light	--zui-button-gradient-red-from-dark
--zui-button-gradient-red-to	#9d174d	Light	--zui-button-gradient-red-to-dark
--zui-button-gradient-red-fg	#ffffff	Light	--zui-button-gradient-red-fg-dark
--zui-button-gradient-red-from-hover	#991b1b	Light	--zui-button-gradient-red-from-hover-dark
--zui-button-gradient-red-to-hover	#9d174d	Light	--zui-button-gradient-red-to-hover-dark
--zui-button-gradient-yellow-from	#854d0e	Light	--zui-button-gradient-yellow-from-dark
--zui-button-gradient-yellow-to	#9a3412	Light	--zui-button-gradient-yellow-to-dark
--zui-button-gradient-yellow-fg	#ffffff	Light	--zui-button-gradient-yellow-fg-dark
--zui-button-gradient-yellow-from-hover	#854d0e	Light	--zui-button-gradient-yellow-from-hover-dark
--zui-button-gradient-yellow-to-hover	#9a3412	Light	--zui-button-gradient-yellow-to-hover-dark
--zui-button-gradient-purple-from	#6b21a8	Light	--zui-button-gradient-purple-from-dark
--zui-button-gradient-purple-to	#9d174d	Light	--zui-button-gradient-purple-to-dark
--zui-button-gradient-purple-fg	#ffffff	Light	--zui-button-gradient-purple-fg-dark
--zui-button-gradient-purple-from-hover	#6b21a8	Light	--zui-button-gradient-purple-from-hover-dark
--zui-button-gradient-purple-to-hover	#9d174d	Light	--zui-button-gradient-purple-to-hover-dark
--zui-button-gradient-teal-from	#115e59	Light	--zui-button-gradient-teal-from-dark
--zui-button-gradient-teal-to	#155e75	Light	--zui-button-gradient-teal-to-dark
--zui-button-gradient-teal-fg	#ffffff	Light	--zui-button-gradient-teal-fg-dark
--zui-button-gradient-teal-from-hover	#115e59	Light	--zui-button-gradient-teal-from-hover-dark
--zui-button-gradient-teal-to-hover	#155e75	Light	--zui-button-gradient-teal-to-hover-dark
--zui-button-gradient-indigo-from	#3730a3	Light	--zui-button-gradient-indigo-from-dark
--zui-button-gradient-indigo-to	#6b21a8	Light	--zui-button-gradient-indigo-to-dark
--zui-button-gradient-indigo-fg	#ffffff	Light	--zui-button-gradient-indigo-fg-dark
--zui-button-gradient-indigo-from-hover	#3730a3	Light	--zui-button-gradient-indigo-from-hover-dark
--zui-button-gradient-indigo-to-hover	#6b21a8	Light	--zui-button-gradient-indigo-to-hover-dark
--zui-button-gradient-pink-from	#9d174d	Light	--zui-button-gradient-pink-from-dark
--zui-button-gradient-pink-to	#9f1239	Light	--zui-button-gradient-pink-to-dark
--zui-button-gradient-pink-fg	#ffffff	Light	--zui-button-gradient-pink-fg-dark
--zui-button-gradient-pink-from-hover	#9d174d	Light	--zui-button-gradient-pink-from-hover-dark
--zui-button-gradient-pink-to-hover	#9f1239	Light	--zui-button-gradient-pink-to-hover-dark
--zui-button-gradient-orange-from	#9a3412	Light	--zui-button-gradient-orange-from-dark
--zui-button-gradient-orange-to	#991b1b	Light	--zui-button-gradient-orange-to-dark
--zui-button-gradient-orange-fg	#ffffff	Light	--zui-button-gradient-orange-fg-dark
--zui-button-gradient-orange-from-hover	#9a3412	Light	--zui-button-gradient-orange-from-hover-dark
--zui-button-gradient-orange-to-hover	#991b1b	Shared	none
--zui-button-ring-offset-dark	#020617	Dark	--zui-button-ring-offset
--zui-button-focus-ring-dark	#cbd5e1	Dark	--zui-button-focus-ring
--zui-button-radius-dark	Override with your dark theme value	Dark	--zui-button-radius
--zui-button-default-bg-dark	Override with your dark theme value	Dark	--zui-button-default-bg
--zui-button-default-fg-dark	Override with your dark theme value	Dark	--zui-button-default-fg
--zui-button-default-shadow-dark	Override with your dark theme value	Dark	--zui-button-default-shadow
--zui-button-default-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-default-bg-hover
--zui-button-secondary-bg-dark	Override with your dark theme value	Dark	--zui-button-secondary-bg
--zui-button-secondary-fg-dark	Override with your dark theme value	Dark	--zui-button-secondary-fg
--zui-button-secondary-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-secondary-bg-hover
--zui-button-destructive-bg-dark	Override with your dark theme value	Dark	--zui-button-destructive-bg
--zui-button-destructive-fg-dark	Override with your dark theme value	Dark	--zui-button-destructive-fg
--zui-button-destructive-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-destructive-bg-hover
--zui-button-outline-border-dark	Override with your dark theme value	Dark	--zui-button-outline-border
--zui-button-outline-bg-dark	Override with your dark theme value	Dark	--zui-button-outline-bg
--zui-button-outline-fg-dark	Override with your dark theme value	Dark	--zui-button-outline-fg
--zui-button-outline-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-outline-bg-hover
--zui-button-ghost-fg-dark	Override with your dark theme value	Dark	--zui-button-ghost-fg
--zui-button-ghost-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-ghost-bg-hover
--zui-button-link-fg-dark	Override with your dark theme value	Dark	--zui-button-link-fg
--zui-button-glass-border-dark	Override with your dark theme value	Dark	--zui-button-glass-border
--zui-button-glass-bg-dark	Override with your dark theme value	Dark	--zui-button-glass-bg
--zui-button-glass-fg-dark	Override with your dark theme value	Dark	--zui-button-glass-fg
--zui-button-glass-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-glass-bg-hover
--zui-button-emerald-bg-dark	Override with your dark theme value	Dark	--zui-button-emerald-bg
--zui-button-emerald-fg-dark	Override with your dark theme value	Dark	--zui-button-emerald-fg
--zui-button-emerald-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-emerald-bg-hover
--zui-button-indigo-bg-dark	Override with your dark theme value	Dark	--zui-button-indigo-bg
--zui-button-indigo-fg-dark	Override with your dark theme value	Dark	--zui-button-indigo-fg
--zui-button-indigo-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-indigo-bg-hover
--zui-button-purple-bg-dark	Override with your dark theme value	Dark	--zui-button-purple-bg
--zui-button-purple-fg-dark	Override with your dark theme value	Dark	--zui-button-purple-fg
--zui-button-purple-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-purple-bg-hover
--zui-button-pink-bg-dark	Override with your dark theme value	Dark	--zui-button-pink-bg
--zui-button-pink-fg-dark	Override with your dark theme value	Dark	--zui-button-pink-fg
--zui-button-pink-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-pink-bg-hover
--zui-button-rose-bg-dark	Override with your dark theme value	Dark	--zui-button-rose-bg
--zui-button-rose-fg-dark	Override with your dark theme value	Dark	--zui-button-rose-fg
--zui-button-rose-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-rose-bg-hover
--zui-button-sky-bg-dark	Override with your dark theme value	Dark	--zui-button-sky-bg
--zui-button-sky-fg-dark	Override with your dark theme value	Dark	--zui-button-sky-fg
--zui-button-sky-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-sky-bg-hover
--zui-button-teal-bg-dark	Override with your dark theme value	Dark	--zui-button-teal-bg
--zui-button-teal-fg-dark	Override with your dark theme value	Dark	--zui-button-teal-fg
--zui-button-teal-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-teal-bg-hover
--zui-button-yellow-bg-dark	Override with your dark theme value	Dark	--zui-button-yellow-bg
--zui-button-yellow-fg-dark	Override with your dark theme value	Dark	--zui-button-yellow-fg
--zui-button-yellow-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-yellow-bg-hover
--zui-button-orange-bg-dark	Override with your dark theme value	Dark	--zui-button-orange-bg
--zui-button-orange-fg-dark	Override with your dark theme value	Dark	--zui-button-orange-fg
--zui-button-orange-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-orange-bg-hover
--zui-button-gray-bg-dark	Override with your dark theme value	Dark	--zui-button-gray-bg
--zui-button-gray-fg-dark	Override with your dark theme value	Dark	--zui-button-gray-fg
--zui-button-gray-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-gray-bg-hover
--zui-button-amber-bg-dark	Override with your dark theme value	Dark	--zui-button-amber-bg
--zui-button-amber-fg-dark	Override with your dark theme value	Dark	--zui-button-amber-fg
--zui-button-amber-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-amber-bg-hover
--zui-button-violet-bg-dark	Override with your dark theme value	Dark	--zui-button-violet-bg
--zui-button-violet-fg-dark	Override with your dark theme value	Dark	--zui-button-violet-fg
--zui-button-violet-bg-hover-dark	Override with your dark theme value	Dark	--zui-button-violet-bg-hover
--zui-button-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-button-gradient-blue-from
--zui-button-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-button-gradient-blue-to
--zui-button-gradient-blue-fg-dark	Override with your dark theme value	Dark	--zui-button-gradient-blue-fg
--zui-button-gradient-blue-from-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-blue-from-hover
--zui-button-gradient-blue-to-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-blue-to-hover
--zui-button-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-button-gradient-green-from
--zui-button-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-button-gradient-green-to
--zui-button-gradient-green-fg-dark	Override with your dark theme value	Dark	--zui-button-gradient-green-fg
--zui-button-gradient-green-from-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-green-from-hover
--zui-button-gradient-green-to-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-green-to-hover
--zui-button-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-button-gradient-red-from
--zui-button-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-button-gradient-red-to
--zui-button-gradient-red-fg-dark	Override with your dark theme value	Dark	--zui-button-gradient-red-fg
--zui-button-gradient-red-from-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-red-from-hover
--zui-button-gradient-red-to-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-red-to-hover
--zui-button-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-button-gradient-yellow-from
--zui-button-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-button-gradient-yellow-to
--zui-button-gradient-yellow-fg-dark	Override with your dark theme value	Dark	--zui-button-gradient-yellow-fg
--zui-button-gradient-yellow-from-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-yellow-from-hover
--zui-button-gradient-yellow-to-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-yellow-to-hover
--zui-button-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-button-gradient-purple-from
--zui-button-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-button-gradient-purple-to
--zui-button-gradient-purple-fg-dark	Override with your dark theme value	Dark	--zui-button-gradient-purple-fg
--zui-button-gradient-purple-from-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-purple-from-hover
--zui-button-gradient-purple-to-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-purple-to-hover
--zui-button-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-button-gradient-teal-from
--zui-button-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-button-gradient-teal-to
--zui-button-gradient-teal-fg-dark	Override with your dark theme value	Dark	--zui-button-gradient-teal-fg
--zui-button-gradient-teal-from-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-teal-from-hover
--zui-button-gradient-teal-to-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-teal-to-hover
--zui-button-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-button-gradient-indigo-from
--zui-button-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-button-gradient-indigo-to
--zui-button-gradient-indigo-fg-dark	Override with your dark theme value	Dark	--zui-button-gradient-indigo-fg
--zui-button-gradient-indigo-from-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-indigo-from-hover
--zui-button-gradient-indigo-to-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-indigo-to-hover
--zui-button-gradient-pink-from-dark	Override with your dark theme value	Dark	--zui-button-gradient-pink-from
--zui-button-gradient-pink-to-dark	Override with your dark theme value	Dark	--zui-button-gradient-pink-to
--zui-button-gradient-pink-fg-dark	Override with your dark theme value	Dark	--zui-button-gradient-pink-fg
--zui-button-gradient-pink-from-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-pink-from-hover
--zui-button-gradient-pink-to-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-pink-to-hover
--zui-button-gradient-orange-from-dark	Override with your dark theme value	Dark	--zui-button-gradient-orange-from
--zui-button-gradient-orange-to-dark	Override with your dark theme value	Dark	--zui-button-gradient-orange-to
--zui-button-gradient-orange-fg-dark	Override with your dark theme value	Dark	--zui-button-gradient-orange-fg
--zui-button-gradient-orange-from-hover-dark	Override with your dark theme value	Dark	--zui-button-gradient-orange-from-hover

Card

Override these card variables on :root, a theme selector, or a component wrapper.

139 tokens68 dark

Variable	Fallback	Theme	Pair
--zui-card-fg	oklch(20.8% 0.042 265.755)	Light	--zui-card-fg-dark
--zui-card-ring-offset	oklch(98.4% 0.003 247.858)	Light	--zui-card-ring-offset-dark
--zui-card-ring-focus	oklch(44.6% 0.043 257.281)	Light	--zui-card-ring-focus-dark
--zui-card-default-border	#0000001a	Light	--zui-card-default-border-dark
--zui-card-default-bg	#0000000d	Light	--zui-card-default-bg-dark
--zui-card-default-shadow	0 1px 2px rgba(15,23,42,0.08)	Light	--zui-card-default-shadow-dark
--zui-card-glass-border	#00000026	Light	--zui-card-glass-border-dark
--zui-card-glass-bg	#0000001a	Light	--zui-card-glass-bg-dark
--zui-card-glass-shadow	0 8px 24px rgba(15,23,42,0.12)	Light	--zui-card-glass-shadow-dark
--zui-card-outline-border	#00000026	Light	--zui-card-outline-border-dark
--zui-card-outline-bg	transparent	Light	--zui-card-outline-bg-dark
--zui-card-ghost-border	transparent	Light	--zui-card-ghost-border-dark
--zui-card-ghost-bg	transparent	Light	--zui-card-ghost-bg-dark
--zui-card-elevated-border	#0000001a	Light	--zui-card-elevated-border-dark
--zui-card-elevated-bg	oklch(96.8% 0.007 247.896 / 0.8)	Light	--zui-card-elevated-bg-dark
--zui-card-elevated-shadow	0 12px 32px rgba(15,23,42,0.12)	Light	--zui-card-elevated-shadow-dark
--zui-card-sky-border	oklch(44.3% 0.11 240.79)	Light	--zui-card-sky-border-dark
--zui-card-sky-bg	oklch(97.7% 0.013 236.62)	Light	--zui-card-sky-bg-dark
--zui-card-rose-border	oklch(45.5% 0.188 13.697)	Light	--zui-card-rose-border-dark
--zui-card-rose-bg	oklch(96.9% 0.015 12.422)	Light	--zui-card-rose-bg-dark
--zui-card-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-card-purple-border-dark
--zui-card-purple-bg	oklch(97.7% 0.014 308.299)	Light	--zui-card-purple-bg-dark
--zui-card-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-card-pink-border-dark
--zui-card-pink-bg	oklch(97.1% 0.014 343.198)	Light	--zui-card-pink-bg-dark
--zui-card-orange-border	oklch(47% 0.157 37.304)	Light	--zui-card-orange-border-dark
--zui-card-orange-bg	oklch(98% 0.016 73.684)	Light	--zui-card-orange-bg-dark
--zui-card-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-card-yellow-border-dark
--zui-card-yellow-bg	oklch(98.7% 0.026 102.212)	Light	--zui-card-yellow-bg-dark
--zui-card-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-card-teal-border-dark
--zui-card-teal-bg	oklch(98.4% 0.014 180.72)	Light	--zui-card-teal-bg-dark
--zui-card-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-card-indigo-border-dark
--zui-card-indigo-bg	oklch(96.2% 0.018 272.314)	Light	--zui-card-indigo-bg-dark
--zui-card-emerald-border	oklch(43.2% 0.095 166.913)	Light	--zui-card-emerald-border-dark
--zui-card-emerald-bg	oklch(97.9% 0.021 166.113)	Light	--zui-card-emerald-bg-dark
--zui-card-gray-border	oklch(27.8% 0.033 256.848)	Light	--zui-card-gray-border-dark
--zui-card-gray-bg	oklch(98.5% 0.002 247.839)	Light	--zui-card-gray-bg-dark
--zui-card-amber-border	oklch(47.3% 0.137 46.201)	Light	--zui-card-amber-border-dark
--zui-card-amber-bg	oklch(98.7% 0.022 95.277)	Light	--zui-card-amber-bg-dark
--zui-card-violet-border	oklch(43.2% 0.232 292.759)	Light	--zui-card-violet-border-dark
--zui-card-violet-bg	oklch(96.9% 0.016 293.756)	Light	--zui-card-violet-bg-dark
--zui-card-gradient-blue-border	oklch(42.4% 0.199 265.638)	Light	--zui-card-gradient-blue-border-dark
--zui-card-gradient-blue-from	oklch(97% 0.014 254.604)	Light	--zui-card-gradient-blue-from-dark
--zui-card-gradient-blue-to	oklch(97.7% 0.014 308.299)	Light	--zui-card-gradient-blue-to-dark
--zui-card-gradient-green-border	oklch(44.8% 0.119 151.328)	Light	--zui-card-gradient-green-border-dark
--zui-card-gradient-green-from	oklch(98.2% 0.018 155.826)	Light	--zui-card-gradient-green-from-dark
--zui-card-gradient-green-to	oklch(98.6% 0.031 120.757)	Light	--zui-card-gradient-green-to-dark
--zui-card-gradient-red-border	oklch(44.4% 0.177 26.899)	Light	--zui-card-gradient-red-border-dark
--zui-card-gradient-red-from	oklch(97.1% 0.013 17.38)	Light	--zui-card-gradient-red-from-dark
--zui-card-gradient-red-to	oklch(97.1% 0.014 343.198)	Light	--zui-card-gradient-red-to-dark
--zui-card-gradient-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-card-gradient-yellow-border-dark
--zui-card-gradient-yellow-from	oklch(98.7% 0.026 102.212)	Light	--zui-card-gradient-yellow-from-dark
--zui-card-gradient-yellow-to	oklch(98% 0.016 73.684)	Light	--zui-card-gradient-yellow-to-dark
--zui-card-gradient-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-card-gradient-purple-border-dark
--zui-card-gradient-purple-from	oklch(97.7% 0.014 308.299)	Light	--zui-card-gradient-purple-from-dark
--zui-card-gradient-purple-to	oklch(97.1% 0.014 343.198)	Light	--zui-card-gradient-purple-to-dark
--zui-card-gradient-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-card-gradient-teal-border-dark
--zui-card-gradient-teal-from	oklch(98.4% 0.014 180.72)	Light	--zui-card-gradient-teal-from-dark
--zui-card-gradient-teal-to	oklch(98.4% 0.019 200.873)	Light	--zui-card-gradient-teal-to-dark
--zui-card-gradient-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-card-gradient-indigo-border-dark
--zui-card-gradient-indigo-from	oklch(96.2% 0.018 272.314)	Light	--zui-card-gradient-indigo-from-dark
--zui-card-gradient-indigo-to	oklch(97.7% 0.014 308.299)	Light	--zui-card-gradient-indigo-to-dark
--zui-card-gradient-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-card-gradient-pink-border-dark
--zui-card-gradient-pink-from	oklch(97.1% 0.014 343.198)	Light	--zui-card-gradient-pink-from-dark
--zui-card-gradient-pink-to	oklch(96.9% 0.015 12.422)	Light	--zui-card-gradient-pink-to-dark
--zui-card-gradient-orange-border	oklch(47% 0.157 37.304)	Light	--zui-card-gradient-orange-border-dark
--zui-card-gradient-orange-from	oklch(98% 0.016 73.684)	Light	--zui-card-gradient-orange-from-dark
--zui-card-gradient-orange-to	oklch(97.1% 0.013 17.38)	Light	--zui-card-gradient-orange-to-dark
--zui-card-header-border	#0000001a	Light	--zui-card-header-border-dark
--zui-card-footer-border	#0000001a	Shared	none
--zui-card-title-fg	oklch(12.9% 0.042 264.695)	Shared	none
--zui-card-description-fg	oklch(55.4% 0.046 257.417)	Shared	none
--zui-card-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-card-fg
--zui-card-ring-offset-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-card-ring-offset
--zui-card-ring-focus-dark	Override with your dark theme value	Dark	--zui-card-ring-focus
--zui-card-default-border-dark	Override with your dark theme value	Dark	--zui-card-default-border
--zui-card-default-bg-dark	Override with your dark theme value	Dark	--zui-card-default-bg
--zui-card-default-shadow-dark	Override with your dark theme value	Dark	--zui-card-default-shadow
--zui-card-glass-border-dark	Override with your dark theme value	Dark	--zui-card-glass-border
--zui-card-glass-bg-dark	Override with your dark theme value	Dark	--zui-card-glass-bg
--zui-card-glass-shadow-dark	Override with your dark theme value	Dark	--zui-card-glass-shadow
--zui-card-outline-border-dark	Override with your dark theme value	Dark	--zui-card-outline-border
--zui-card-outline-bg-dark	Override with your dark theme value	Dark	--zui-card-outline-bg
--zui-card-ghost-border-dark	Override with your dark theme value	Dark	--zui-card-ghost-border
--zui-card-ghost-bg-dark	Override with your dark theme value	Dark	--zui-card-ghost-bg
--zui-card-elevated-border-dark	Override with your dark theme value	Dark	--zui-card-elevated-border
--zui-card-elevated-bg-dark	Override with your dark theme value	Dark	--zui-card-elevated-bg
--zui-card-elevated-shadow-dark	Override with your dark theme value	Dark	--zui-card-elevated-shadow
--zui-card-sky-border-dark	Override with your dark theme value	Dark	--zui-card-sky-border
--zui-card-sky-bg-dark	Override with your dark theme value	Dark	--zui-card-sky-bg
--zui-card-rose-border-dark	Override with your dark theme value	Dark	--zui-card-rose-border
--zui-card-rose-bg-dark	Override with your dark theme value	Dark	--zui-card-rose-bg
--zui-card-purple-border-dark	Override with your dark theme value	Dark	--zui-card-purple-border
--zui-card-purple-bg-dark	Override with your dark theme value	Dark	--zui-card-purple-bg
--zui-card-pink-border-dark	Override with your dark theme value	Dark	--zui-card-pink-border
--zui-card-pink-bg-dark	Override with your dark theme value	Dark	--zui-card-pink-bg
--zui-card-orange-border-dark	Override with your dark theme value	Dark	--zui-card-orange-border
--zui-card-orange-bg-dark	Override with your dark theme value	Dark	--zui-card-orange-bg
--zui-card-yellow-border-dark	Override with your dark theme value	Dark	--zui-card-yellow-border
--zui-card-yellow-bg-dark	Override with your dark theme value	Dark	--zui-card-yellow-bg
--zui-card-teal-border-dark	Override with your dark theme value	Dark	--zui-card-teal-border
--zui-card-teal-bg-dark	Override with your dark theme value	Dark	--zui-card-teal-bg
--zui-card-indigo-border-dark	Override with your dark theme value	Dark	--zui-card-indigo-border
--zui-card-indigo-bg-dark	Override with your dark theme value	Dark	--zui-card-indigo-bg
--zui-card-emerald-border-dark	Override with your dark theme value	Dark	--zui-card-emerald-border
--zui-card-emerald-bg-dark	Override with your dark theme value	Dark	--zui-card-emerald-bg
--zui-card-gray-border-dark	Override with your dark theme value	Dark	--zui-card-gray-border
--zui-card-gray-bg-dark	Override with your dark theme value	Dark	--zui-card-gray-bg
--zui-card-amber-border-dark	Override with your dark theme value	Dark	--zui-card-amber-border
--zui-card-amber-bg-dark	Override with your dark theme value	Dark	--zui-card-amber-bg
--zui-card-violet-border-dark	Override with your dark theme value	Dark	--zui-card-violet-border
--zui-card-violet-bg-dark	Override with your dark theme value	Dark	--zui-card-violet-bg
--zui-card-gradient-blue-border-dark	Override with your dark theme value	Dark	--zui-card-gradient-blue-border
--zui-card-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-card-gradient-blue-from
--zui-card-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-card-gradient-blue-to
--zui-card-gradient-green-border-dark	Override with your dark theme value	Dark	--zui-card-gradient-green-border
--zui-card-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-card-gradient-green-from
--zui-card-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-card-gradient-green-to
--zui-card-gradient-red-border-dark	Override with your dark theme value	Dark	--zui-card-gradient-red-border
--zui-card-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-card-gradient-red-from
--zui-card-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-card-gradient-red-to
--zui-card-gradient-yellow-border-dark	Override with your dark theme value	Dark	--zui-card-gradient-yellow-border
--zui-card-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-card-gradient-yellow-from
--zui-card-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-card-gradient-yellow-to
--zui-card-gradient-purple-border-dark	Override with your dark theme value	Dark	--zui-card-gradient-purple-border
--zui-card-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-card-gradient-purple-from
--zui-card-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-card-gradient-purple-to
--zui-card-gradient-teal-border-dark	Override with your dark theme value	Dark	--zui-card-gradient-teal-border
--zui-card-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-card-gradient-teal-from
--zui-card-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-card-gradient-teal-to
--zui-card-gradient-indigo-border-dark	Override with your dark theme value	Dark	--zui-card-gradient-indigo-border
--zui-card-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-card-gradient-indigo-from
--zui-card-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-card-gradient-indigo-to
--zui-card-gradient-pink-border-dark	Override with your dark theme value	Dark	--zui-card-gradient-pink-border
--zui-card-gradient-pink-from-dark	Override with your dark theme value	Dark	--zui-card-gradient-pink-from
--zui-card-gradient-pink-to-dark	Override with your dark theme value	Dark	--zui-card-gradient-pink-to
--zui-card-gradient-orange-border-dark	Override with your dark theme value	Dark	--zui-card-gradient-orange-border
--zui-card-gradient-orange-from-dark	Override with your dark theme value	Dark	--zui-card-gradient-orange-from
--zui-card-gradient-orange-to-dark	Override with your dark theme value	Dark	--zui-card-gradient-orange-to
--zui-card-header-border-dark	Override with your dark theme value	Dark	--zui-card-header-border

Checkbox

Override these checkbox variables on :root, a theme selector, or a component wrapper.

38 tokens5 dark

Variable	Fallback	Theme	Pair
--zui-checkbox-label-fg	oklch(20.8% 0.042 265.755)	Light	--zui-checkbox-label-fg-dark
--zui-checkbox-border	#0000004d	Light	--zui-checkbox-border-dark
--zui-checkbox-bg	transparent	Shared	none
--zui-checkbox-fg	oklch(44.6% 0.043 257.281)	Light	--zui-checkbox-fg-dark
--zui-checkbox-ring-focus	oklch(44.6% 0.043 257.281 / 0.7)	Light	--zui-checkbox-ring-focus-dark
--zui-checkbox-ring-offset-focus	oklch(98.4% 0.003 247.858)	Light	--zui-checkbox-ring-offset-focus-dark
--zui-checkbox-default-border-checked	oklch(44.6% 0.043 257.281)	Shared	none
--zui-checkbox-default-bg-checked	oklch(44.6% 0.043 257.281)	Shared	none
--zui-checkbox-default-fg-checked	#ffffff	Shared	none
--zui-checkbox-success-border-checked	oklch(59.6% 0.145 163.225)	Shared	none
--zui-checkbox-success-bg-checked	oklch(59.6% 0.145 163.225)	Shared	none
--zui-checkbox-success-fg-checked	#ffffff	Shared	none
--zui-checkbox-warning-border-checked	oklch(68.1% 0.162 75.834)	Shared	none
--zui-checkbox-warning-bg-checked	oklch(68.1% 0.162 75.834)	Shared	none
--zui-checkbox-warning-fg-checked	#ffffff	Shared	none
--zui-checkbox-error-border-checked	oklch(58.6% 0.253 17.585)	Shared	none
--zui-checkbox-error-bg-checked	oklch(58.6% 0.253 17.585)	Shared	none
--zui-checkbox-error-fg-checked	#ffffff	Shared	none
--zui-checkbox-info-border-checked	oklch(54.6% 0.245 262.881)	Shared	none
--zui-checkbox-info-bg-checked	oklch(54.6% 0.245 262.881)	Shared	none
--zui-checkbox-info-fg-checked	#ffffff	Shared	none
--zui-checkbox-violet-border-checked	oklch(54.1% 0.281 293.009)	Shared	none
--zui-checkbox-violet-bg-checked	oklch(54.1% 0.281 293.009)	Shared	none
--zui-checkbox-violet-fg-checked	#ffffff	Shared	none
--zui-checkbox-amber-border-checked	oklch(66.6% 0.179 58.318)	Shared	none
--zui-checkbox-amber-bg-checked	oklch(66.6% 0.179 58.318)	Shared	none
--zui-checkbox-amber-fg-checked	#ffffff	Shared	none
--zui-checkbox-pink-border-checked	oklch(59.2% 0.249 0.584)	Shared	none
--zui-checkbox-pink-bg-checked	oklch(59.2% 0.249 0.584)	Shared	none
--zui-checkbox-pink-fg-checked	#ffffff	Shared	none
--zui-checkbox-indigo-border-checked	oklch(51.1% 0.262 276.966)	Shared	none
--zui-checkbox-indigo-bg-checked	oklch(51.1% 0.262 276.966)	Shared	none
--zui-checkbox-indigo-fg-checked	#ffffff	Shared	none
--zui-checkbox-label-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-checkbox-label-fg
--zui-checkbox-border-dark	#ffffff4d	Dark	--zui-checkbox-border
--zui-checkbox-fg-dark	oklch(92.9% 0.013 255.508)	Dark	--zui-checkbox-fg
--zui-checkbox-ring-focus-dark	oklch(86.9% 0.022 252.894 / 0.7)	Dark	--zui-checkbox-ring-focus
--zui-checkbox-ring-offset-focus-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-checkbox-ring-offset-focus

Command

Override these command palette variables on :root, a theme selector, or a component wrapper to tune the overlay, trigger, panel, input, items, and appearance variants.

139 tokens69 dark

ContextMenu

ContextMenu shares Dropdown content and item variables, plus label and separator tokens, so menu theming stays aligned across right-click and click-triggered actions.

185 tokens76 dark

Variable	Fallback	Theme	Pair
--zui-dropdown-content-border	oklch(20.8% 0.042 265.755 / 0.1)	Light	--zui-dropdown-content-border-dark
--zui-dropdown-content-bg	oklch(96.8% 0.007 247.896)	Light	--zui-dropdown-content-bg-dark
--zui-dropdown-content-fg	oklch(20.8% 0.042 265.755)	Light	--zui-dropdown-content-fg-dark
--zui-dropdown-item-ring-focus	oklch(55.1% 0.027 264.364 / 0.6)	Light	--zui-dropdown-item-ring-focus-dark
--zui-dropdown-item-default-bg-hover	oklch(96.7% 0.003 264.542)	Light	--zui-dropdown-item-default-bg-hover-dark
--zui-dropdown-item-default-fg-hover	oklch(55.1% 0.027 264.364)	Light	--zui-dropdown-item-default-fg-hover-dark
--zui-dropdown-item-default-fg	oklch(21% 0.034 264.665)	Light	--zui-dropdown-item-default-fg-dark
--zui-dropdown-item-outline-bg-hover	oklch(96.7% 0.003 264.542)	Light	--zui-dropdown-item-outline-bg-hover-dark
--zui-dropdown-item-outline-fg-hover	oklch(55.1% 0.027 264.364)	Light	--zui-dropdown-item-outline-fg-hover-dark
--zui-dropdown-item-outline-border	#000000	Light	--zui-dropdown-item-outline-border-dark
--zui-dropdown-item-outline-fg	oklch(21% 0.034 264.665)	Light	--zui-dropdown-item-outline-fg-dark
--zui-dropdown-item-ghost-bg-hover	oklch(96.7% 0.003 264.542)	Light	--zui-dropdown-item-ghost-bg-hover-dark
--zui-dropdown-item-ghost-fg-hover	oklch(55.1% 0.027 264.364)	Light	--zui-dropdown-item-ghost-fg-hover-dark
--zui-dropdown-item-ghost-bg	transparent	Light	--zui-dropdown-item-ghost-bg-dark
--zui-dropdown-item-ghost-fg	oklch(21% 0.034 264.665)	Light	--zui-dropdown-item-ghost-fg-dark
--zui-dropdown-item-white-bg-hover	oklch(96.7% 0.003 264.542)	Light	--zui-dropdown-item-white-bg-hover-dark
--zui-dropdown-item-white-fg-hover	oklch(55.1% 0.027 264.364)	Light	--zui-dropdown-item-white-fg-hover-dark
--zui-dropdown-item-white-bg	#ffffff	Light	--zui-dropdown-item-white-bg-dark
--zui-dropdown-item-white-fg	oklch(21% 0.034 264.665)	Light	--zui-dropdown-item-white-fg-dark
--zui-dropdown-item-black-bg-hover	oklch(96.7% 0.003 264.542)	Light	--zui-dropdown-item-black-bg-hover-dark
--zui-dropdown-item-black-fg-hover	oklch(55.1% 0.027 264.364)	Light	--zui-dropdown-item-black-fg-hover-dark
--zui-dropdown-item-black-bg	#000000	Light	--zui-dropdown-item-black-bg-dark
--zui-dropdown-item-black-fg	#ffffff	Light	--zui-dropdown-item-black-fg-dark
--zui-dropdown-item-sky-bg-hover	oklch(95.1% 0.026 236.824)	Light	--zui-dropdown-item-sky-bg-hover-dark
--zui-dropdown-item-sky-fg-hover	oklch(44.3% 0.11 240.79)	Light	--zui-dropdown-item-sky-fg-hover-dark
--zui-dropdown-item-sky-bg	oklch(90.1% 0.058 230.902)	Light	--zui-dropdown-item-sky-bg-dark
--zui-dropdown-item-sky-fg	oklch(39.1% 0.09 240.876)	Light	--zui-dropdown-item-sky-fg-dark
--zui-dropdown-item-rose-bg-hover	oklch(94.1% 0.03 12.58)	Light	--zui-dropdown-item-rose-bg-hover-dark
--zui-dropdown-item-rose-fg-hover	oklch(45.5% 0.188 13.697)	Light	--zui-dropdown-item-rose-fg-hover-dark
--zui-dropdown-item-rose-bg	oklch(89.2% 0.058 10.001)	Light	--zui-dropdown-item-rose-bg-dark
--zui-dropdown-item-rose-fg	oklch(41% 0.159 10.272)	Light	--zui-dropdown-item-rose-fg-dark
--zui-dropdown-item-purple-bg-hover	oklch(94.6% 0.033 307.174)	Light	--zui-dropdown-item-purple-bg-hover-dark
--zui-dropdown-item-purple-fg-hover	oklch(43.8% 0.218 303.724)	Light	--zui-dropdown-item-purple-fg-hover-dark
--zui-dropdown-item-purple-bg	oklch(90.2% 0.063 306.703)	Light	--zui-dropdown-item-purple-bg-dark
--zui-dropdown-item-purple-fg	oklch(38.1% 0.176 304.987)	Light	--zui-dropdown-item-purple-fg-dark
--zui-dropdown-item-pink-bg-hover	oklch(94.8% 0.028 342.258)	Light	--zui-dropdown-item-pink-bg-hover-dark
--zui-dropdown-item-pink-fg-hover	oklch(45.9% 0.187 3.815)	Light	--zui-dropdown-item-pink-fg-hover-dark
--zui-dropdown-item-pink-bg	oklch(89.9% 0.061 343.231)	Light	--zui-dropdown-item-pink-bg-dark
--zui-dropdown-item-pink-fg	oklch(40.8% 0.153 2.432)	Light	--zui-dropdown-item-pink-fg-dark
--zui-dropdown-item-orange-bg-hover	oklch(95.4% 0.038 75.164)	Light	--zui-dropdown-item-orange-bg-hover-dark
--zui-dropdown-item-orange-fg-hover	oklch(47% 0.157 37.304)	Light	--zui-dropdown-item-orange-fg-hover-dark
--zui-dropdown-item-orange-bg	oklch(90.1% 0.076 70.697)	Light	--zui-dropdown-item-orange-bg-dark
--zui-dropdown-item-orange-fg	oklch(40.8% 0.123 38.172)	Light	--zui-dropdown-item-orange-fg-dark
--zui-dropdown-item-yellow-bg-hover	oklch(97.3% 0.071 103.193)	Light	--zui-dropdown-item-yellow-bg-hover-dark
--zui-dropdown-item-yellow-fg-hover	oklch(47.6% 0.114 61.907)	Light	--zui-dropdown-item-yellow-fg-hover-dark
--zui-dropdown-item-yellow-bg	oklch(94.5% 0.129 101.54)	Light	--zui-dropdown-item-yellow-bg-dark
--zui-dropdown-item-yellow-fg	oklch(42.1% 0.095 57.708)	Light	--zui-dropdown-item-yellow-fg-dark
--zui-dropdown-item-teal-bg-hover	oklch(95.3% 0.051 180.801)	Light	--zui-dropdown-item-teal-bg-hover-dark
--zui-dropdown-item-teal-fg-hover	oklch(43.7% 0.078 188.216)	Light	--zui-dropdown-item-teal-fg-hover-dark
--zui-dropdown-item-teal-bg	oklch(91% 0.096 180.426)	Light	--zui-dropdown-item-teal-bg-dark
--zui-dropdown-item-teal-fg	oklch(38.6% 0.063 188.416)	Light	--zui-dropdown-item-teal-fg-dark
--zui-dropdown-item-indigo-bg-hover	oklch(93% 0.034 272.788)	Light	--zui-dropdown-item-indigo-bg-hover-dark
--zui-dropdown-item-indigo-fg-hover	oklch(39.8% 0.195 277.366)	Light	--zui-dropdown-item-indigo-fg-hover-dark
--zui-dropdown-item-indigo-bg	oklch(87% 0.065 274.039)	Light	--zui-dropdown-item-indigo-bg-dark
--zui-dropdown-item-indigo-fg	oklch(35.9% 0.144 278.697)	Light	--zui-dropdown-item-indigo-fg-dark
--zui-dropdown-item-emerald-bg-hover	oklch(95% 0.052 163.051)	Light	--zui-dropdown-item-emerald-bg-hover-dark
--zui-dropdown-item-emerald-fg-hover	oklch(43.2% 0.095 166.913)	Light	--zui-dropdown-item-emerald-fg-hover-dark
--zui-dropdown-item-emerald-bg	oklch(90.5% 0.093 164.15)	Light	--zui-dropdown-item-emerald-bg-dark
--zui-dropdown-item-emerald-fg	oklch(37.8% 0.077 168.94)	Light	--zui-dropdown-item-emerald-fg-dark
--zui-dropdown-item-gray-bg-hover	oklch(96.7% 0.003 264.542)	Light	--zui-dropdown-item-gray-bg-hover-dark
--zui-dropdown-item-gray-fg-hover	oklch(55.1% 0.027 264.364)	Light	--zui-dropdown-item-gray-fg-hover-dark
--zui-dropdown-item-gray-bg	oklch(92.8% 0.006 264.531)	Light	--zui-dropdown-item-gray-bg-dark
--zui-dropdown-item-gray-fg	oklch(55.1% 0.027 264.364)	Light	--zui-dropdown-item-gray-fg-dark
--zui-dropdown-item-amber-bg-hover	oklch(96.2% 0.059 95.617)	Light	--zui-dropdown-item-amber-bg-hover-dark
--zui-dropdown-item-amber-fg-hover	oklch(47.3% 0.137 46.201)	Light	--zui-dropdown-item-amber-fg-hover-dark
--zui-dropdown-item-amber-bg	oklch(92.4% 0.12 95.746)	Light	--zui-dropdown-item-amber-bg-dark
--zui-dropdown-item-amber-fg	oklch(41.4% 0.112 45.904)	Light	--zui-dropdown-item-amber-fg-dark
--zui-dropdown-item-violet-bg-hover	oklch(94.3% 0.029 294.588)	Light	--zui-dropdown-item-violet-bg-hover-dark
--zui-dropdown-item-violet-fg-hover	oklch(43.2% 0.232 292.759)	Light	--zui-dropdown-item-violet-fg-hover-dark
--zui-dropdown-item-violet-bg	oklch(89.4% 0.057 293.283)	Light	--zui-dropdown-item-violet-bg-dark
--zui-dropdown-item-violet-fg	oklch(38% 0.189 293.745)	Light	--zui-dropdown-item-violet-fg-dark
--zui-dropdown-item-gradient-blue-from	oklch(42.4% 0.199 265.638)	Light	--zui-dropdown-item-gradient-blue-from-dark
--zui-dropdown-item-gradient-blue-to	oklch(43.8% 0.218 303.724)	Light	--zui-dropdown-item-gradient-blue-to-dark
--zui-dropdown-item-gradient-blue-fg-hover	oklch(62.3% 0.214 259.815)	Light	--zui-dropdown-item-gradient-blue-fg-hover-dark
--zui-dropdown-item-gradient-blue-fg	oklch(37.9% 0.146 265.522)	Shared	none
--zui-dropdown-item-gradient-green-from	oklch(44.8% 0.119 151.328)	Shared	none
--zui-dropdown-item-gradient-green-to	oklch(45.3% 0.124 130.933)	Shared	none
--zui-dropdown-item-gradient-green-fg-hover	oklch(72.3% 0.219 149.579)	Shared	none
--zui-dropdown-item-gradient-green-fg	oklch(39.3% 0.095 152.535)	Shared	none
--zui-dropdown-item-gradient-red-from	oklch(44.4% 0.177 26.899)	Shared	none
--zui-dropdown-item-gradient-red-to	oklch(45.9% 0.187 3.815)	Shared	none
--zui-dropdown-item-gradient-red-fg-hover	oklch(63.7% 0.237 25.331)	Shared	none
--zui-dropdown-item-gradient-red-fg	oklch(39.6% 0.141 25.723)	Shared	none
--zui-dropdown-item-gradient-yellow-from	oklch(47.6% 0.114 61.907)	Shared	none
--zui-dropdown-item-gradient-yellow-to	oklch(47% 0.157 37.304)	Shared	none
--zui-dropdown-item-gradient-yellow-fg-hover	oklch(79.5% 0.184 86.047)	Shared	none
--zui-dropdown-item-gradient-yellow-fg	oklch(42.1% 0.095 57.708)	Shared	none
--zui-dropdown-item-gradient-purple-from	oklch(43.8% 0.218 303.724)	Shared	none
--zui-dropdown-item-gradient-purple-to	oklch(45.9% 0.187 3.815)	Shared	none
--zui-dropdown-item-gradient-purple-fg-hover	oklch(62.7% 0.265 303.9)	Shared	none
--zui-dropdown-item-gradient-purple-fg	oklch(38.1% 0.176 304.987)	Shared	none
--zui-dropdown-item-gradient-teal-from	oklch(43.7% 0.078 188.216)	Shared	none
--zui-dropdown-item-gradient-teal-to	oklch(45% 0.085 224.283)	Shared	none
--zui-dropdown-item-gradient-teal-fg-hover	oklch(70.4% 0.14 182.503)	Shared	none
--zui-dropdown-item-gradient-teal-fg	oklch(38.6% 0.063 188.416)	Shared	none
--zui-dropdown-item-gradient-indigo-from	oklch(39.8% 0.195 277.366)	Shared	none
--zui-dropdown-item-gradient-indigo-to	oklch(43.8% 0.218 303.724)	Shared	none
--zui-dropdown-item-gradient-indigo-fg-hover	oklch(58.5% 0.233 277.117)	Shared	none
--zui-dropdown-item-gradient-indigo-fg	oklch(35.9% 0.144 278.697)	Shared	none
--zui-dropdown-item-gradient-pink-from	oklch(45.9% 0.187 3.815)	Shared	none
--zui-dropdown-item-gradient-pink-to	oklch(45.5% 0.188 13.697)	Shared	none
--zui-dropdown-item-gradient-pink-fg-hover	oklch(65.6% 0.241 354.308)	Shared	none
--zui-dropdown-item-gradient-pink-fg	oklch(40.8% 0.153 2.432)	Shared	none
--zui-dropdown-item-gradient-orange-from	oklch(47% 0.157 37.304)	Shared	none
--zui-dropdown-item-gradient-orange-to	oklch(44.4% 0.177 26.899)	Shared	none
--zui-dropdown-item-gradient-orange-fg-hover	oklch(70.5% 0.213 47.604)	Shared	none
--zui-dropdown-item-gradient-orange-fg	oklch(40.8% 0.123 38.172)	Shared	none
--zui-dropdown-label-fg	oklch(55.1% 0.027 264.364)	Light	--zui-dropdown-label-fg-dark
--zui-dropdown-separator-bg	oklch(20.8% 0.042 265.755 / 0.12)	Light	--zui-dropdown-separator-bg-dark
--zui-dropdown-content-border-dark	#ffffff1a	Dark	--zui-dropdown-content-border
--zui-dropdown-content-bg-dark	oklch(20.8% 0.042 265.755)	Dark	--zui-dropdown-content-bg
--zui-dropdown-content-fg-dark	oklch(96.8% 0.007 247.896)	Dark	--zui-dropdown-content-fg
--zui-dropdown-item-violet-bg-dark	oklch(28.3% 0.141 291.089)	Dark	--zui-dropdown-item-violet-bg
--zui-dropdown-item-emerald-bg-dark	oklch(26.2% 0.051 172.552)	Dark	--zui-dropdown-item-emerald-bg
--zui-dropdown-label-fg-dark	oklch(70.7% 0.022 261.325)	Dark	--zui-dropdown-label-fg
--zui-dropdown-separator-bg-dark	#ffffff1a	Dark	--zui-dropdown-separator-bg
--zui-dropdown-item-ring-focus-dark	Override with your dark theme value	Dark	--zui-dropdown-item-ring-focus
--zui-dropdown-item-default-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-default-bg-hover
--zui-dropdown-item-default-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-default-fg-hover
--zui-dropdown-item-default-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-default-fg
--zui-dropdown-item-outline-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-outline-bg-hover
--zui-dropdown-item-outline-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-outline-fg-hover
--zui-dropdown-item-outline-border-dark	Override with your dark theme value	Dark	--zui-dropdown-item-outline-border
--zui-dropdown-item-outline-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-outline-fg
--zui-dropdown-item-ghost-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-ghost-bg-hover
--zui-dropdown-item-ghost-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-ghost-fg-hover
--zui-dropdown-item-ghost-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-ghost-bg
--zui-dropdown-item-ghost-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-ghost-fg
--zui-dropdown-item-white-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-white-bg-hover
--zui-dropdown-item-white-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-white-fg-hover
--zui-dropdown-item-white-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-white-bg
--zui-dropdown-item-white-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-white-fg
--zui-dropdown-item-black-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-black-bg-hover
--zui-dropdown-item-black-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-black-fg-hover
--zui-dropdown-item-black-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-black-bg
--zui-dropdown-item-black-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-black-fg
--zui-dropdown-item-sky-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-sky-bg-hover
--zui-dropdown-item-sky-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-sky-fg-hover
--zui-dropdown-item-sky-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-sky-bg
--zui-dropdown-item-sky-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-sky-fg
--zui-dropdown-item-rose-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-rose-bg-hover
--zui-dropdown-item-rose-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-rose-fg-hover
--zui-dropdown-item-rose-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-rose-bg
--zui-dropdown-item-rose-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-rose-fg
--zui-dropdown-item-purple-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-purple-bg-hover
--zui-dropdown-item-purple-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-purple-fg-hover
--zui-dropdown-item-purple-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-purple-bg
--zui-dropdown-item-purple-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-purple-fg
--zui-dropdown-item-pink-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-pink-bg-hover
--zui-dropdown-item-pink-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-pink-fg-hover
--zui-dropdown-item-pink-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-pink-bg
--zui-dropdown-item-pink-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-pink-fg
--zui-dropdown-item-orange-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-orange-bg-hover
--zui-dropdown-item-orange-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-orange-fg-hover
--zui-dropdown-item-orange-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-orange-bg
--zui-dropdown-item-orange-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-orange-fg
--zui-dropdown-item-yellow-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-yellow-bg-hover
--zui-dropdown-item-yellow-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-yellow-fg-hover
--zui-dropdown-item-yellow-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-yellow-bg
--zui-dropdown-item-yellow-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-yellow-fg
--zui-dropdown-item-teal-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-teal-bg-hover
--zui-dropdown-item-teal-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-teal-fg-hover
--zui-dropdown-item-teal-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-teal-bg
--zui-dropdown-item-teal-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-teal-fg
--zui-dropdown-item-indigo-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-indigo-bg-hover
--zui-dropdown-item-indigo-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-indigo-fg-hover
--zui-dropdown-item-indigo-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-indigo-bg
--zui-dropdown-item-indigo-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-indigo-fg
--zui-dropdown-item-emerald-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-emerald-bg-hover
--zui-dropdown-item-emerald-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-emerald-fg-hover
--zui-dropdown-item-emerald-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-emerald-fg
--zui-dropdown-item-gray-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-gray-bg-hover
--zui-dropdown-item-gray-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-gray-fg-hover
--zui-dropdown-item-gray-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-gray-bg
--zui-dropdown-item-gray-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-gray-fg
--zui-dropdown-item-amber-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-amber-bg-hover
--zui-dropdown-item-amber-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-amber-fg-hover
--zui-dropdown-item-amber-bg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-amber-bg
--zui-dropdown-item-amber-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-amber-fg
--zui-dropdown-item-violet-bg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-violet-bg-hover
--zui-dropdown-item-violet-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-violet-fg-hover
--zui-dropdown-item-violet-fg-dark	Override with your dark theme value	Dark	--zui-dropdown-item-violet-fg
--zui-dropdown-item-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-dropdown-item-gradient-blue-from
--zui-dropdown-item-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-dropdown-item-gradient-blue-to
--zui-dropdown-item-gradient-blue-fg-hover-dark	Override with your dark theme value	Dark	--zui-dropdown-item-gradient-blue-fg-hover

Copy button

Override these copy-button variables on :root, a theme selector, or a component wrapper. Structural variables drive the radius, focus ring, and ring offset; each appearance sets background, foreground, border, shadow, and hover tokens.

207 tokens103 dark

Divider

Override these divider variables on :root, a theme selector, or a component wrapper.

52 tokens26 dark

Variable	Fallback	Theme	Pair
--zui-divider-default-fg	oklch(37.2% 0.044 257.287)	Light	--zui-divider-default-fg-dark
--zui-divider-muted-fg	oklch(55.4% 0.046 257.417)	Light	--zui-divider-muted-fg-dark
--zui-divider-primary-fg	oklch(52% 0.105 223.128)	Light	--zui-divider-primary-fg-dark
--zui-divider-destructive-fg	oklch(58.6% 0.253 17.585)	Light	--zui-divider-destructive-fg-dark
--zui-divider-ghost-fg	oklch(70.4% 0.04 256.788)	Light	--zui-divider-ghost-fg-dark
--zui-divider-sky-fg	oklch(58.8% 0.158 241.966)	Light	--zui-divider-sky-fg-dark
--zui-divider-rose-fg	oklch(58.6% 0.253 17.585)	Light	--zui-divider-rose-fg-dark
--zui-divider-purple-fg	oklch(55.8% 0.288 302.321)	Light	--zui-divider-purple-fg-dark
--zui-divider-pink-fg	oklch(59.2% 0.249 0.584)	Light	--zui-divider-pink-fg-dark
--zui-divider-orange-fg	oklch(64.6% 0.222 41.116)	Light	--zui-divider-orange-fg-dark
--zui-divider-yellow-fg	oklch(68.1% 0.162 75.834)	Light	--zui-divider-yellow-fg-dark
--zui-divider-teal-fg	oklch(60% 0.118 184.704)	Light	--zui-divider-teal-fg-dark
--zui-divider-indigo-fg	oklch(51.1% 0.262 276.966)	Light	--zui-divider-indigo-fg-dark
--zui-divider-emerald-fg	oklch(59.6% 0.145 163.225)	Light	--zui-divider-emerald-fg-dark
--zui-divider-gray-fg	oklch(44.6% 0.03 256.802)	Light	--zui-divider-gray-fg-dark
--zui-divider-amber-fg	oklch(66.6% 0.179 58.318)	Light	--zui-divider-amber-fg-dark
--zui-divider-violet-fg	oklch(54.1% 0.281 293.009)	Light	--zui-divider-violet-fg-dark
--zui-divider-gradient-blue-fg	oklch(54.6% 0.245 262.881)	Light	--zui-divider-gradient-blue-fg-dark
--zui-divider-gradient-green-fg	oklch(62.7% 0.194 149.214)	Light	--zui-divider-gradient-green-fg-dark
--zui-divider-gradient-red-fg	oklch(57.7% 0.245 27.325)	Light	--zui-divider-gradient-red-fg-dark
--zui-divider-gradient-yellow-fg	oklch(68.1% 0.162 75.834)	Light	--zui-divider-gradient-yellow-fg-dark
--zui-divider-gradient-purple-fg	oklch(55.8% 0.288 302.321)	Light	--zui-divider-gradient-purple-fg-dark
--zui-divider-gradient-teal-fg	oklch(60% 0.118 184.704)	Light	--zui-divider-gradient-teal-fg-dark
--zui-divider-gradient-indigo-fg	oklch(51.1% 0.262 276.966)	Light	--zui-divider-gradient-indigo-fg-dark
--zui-divider-gradient-pink-fg	oklch(59.2% 0.249 0.584)	Light	--zui-divider-gradient-pink-fg-dark
--zui-divider-gradient-orange-fg	oklch(64.6% 0.222 41.116)	Light	--zui-divider-gradient-orange-fg-dark
--zui-divider-default-fg-dark	oklch(92.9% 0.013 255.508)	Dark	--zui-divider-default-fg
--zui-divider-muted-fg-dark	oklch(55.4% 0.046 257.417)	Dark	--zui-divider-muted-fg
--zui-divider-primary-fg-dark	Override with your dark theme value	Dark	--zui-divider-primary-fg
--zui-divider-destructive-fg-dark	Override with your dark theme value	Dark	--zui-divider-destructive-fg
--zui-divider-ghost-fg-dark	Override with your dark theme value	Dark	--zui-divider-ghost-fg
--zui-divider-sky-fg-dark	Override with your dark theme value	Dark	--zui-divider-sky-fg
--zui-divider-rose-fg-dark	Override with your dark theme value	Dark	--zui-divider-rose-fg
--zui-divider-purple-fg-dark	Override with your dark theme value	Dark	--zui-divider-purple-fg
--zui-divider-pink-fg-dark	Override with your dark theme value	Dark	--zui-divider-pink-fg
--zui-divider-orange-fg-dark	Override with your dark theme value	Dark	--zui-divider-orange-fg
--zui-divider-yellow-fg-dark	Override with your dark theme value	Dark	--zui-divider-yellow-fg
--zui-divider-teal-fg-dark	Override with your dark theme value	Dark	--zui-divider-teal-fg
--zui-divider-indigo-fg-dark	Override with your dark theme value	Dark	--zui-divider-indigo-fg
--zui-divider-emerald-fg-dark	Override with your dark theme value	Dark	--zui-divider-emerald-fg
--zui-divider-gray-fg-dark	Override with your dark theme value	Dark	--zui-divider-gray-fg
--zui-divider-amber-fg-dark	Override with your dark theme value	Dark	--zui-divider-amber-fg
--zui-divider-violet-fg-dark	Override with your dark theme value	Dark	--zui-divider-violet-fg
--zui-divider-gradient-blue-fg-dark	Override with your dark theme value	Dark	--zui-divider-gradient-blue-fg
--zui-divider-gradient-green-fg-dark	Override with your dark theme value	Dark	--zui-divider-gradient-green-fg
--zui-divider-gradient-red-fg-dark	Override with your dark theme value	Dark	--zui-divider-gradient-red-fg
--zui-divider-gradient-yellow-fg-dark	Override with your dark theme value	Dark	--zui-divider-gradient-yellow-fg
--zui-divider-gradient-purple-fg-dark	Override with your dark theme value	Dark	--zui-divider-gradient-purple-fg
--zui-divider-gradient-teal-fg-dark	Override with your dark theme value	Dark	--zui-divider-gradient-teal-fg
--zui-divider-gradient-indigo-fg-dark	Override with your dark theme value	Dark	--zui-divider-gradient-indigo-fg
--zui-divider-gradient-pink-fg-dark	Override with your dark theme value	Dark	--zui-divider-gradient-pink-fg
--zui-divider-gradient-orange-fg-dark	Override with your dark theme value	Dark	--zui-divider-gradient-orange-fg

Drawer

Override these drawer variables on :root, a theme selector, or a component wrapper.

271 tokens135 dark

Dropdown

Override these dropdown variables on :root, a theme selector, or a component wrapper.

292 tokens123 dark

Dynamic stepper

Override these dynamic stepper variables on :root, a theme selector, or a component wrapper.

330 tokens119 dark

Empty state

Override these empty state variables on :root, a theme selector, or a component wrapper.

14 tokens7 dark

Variable	Fallback	Theme	Pair
--zui-empty-state-default-fg	oklch(20.8% 0.042 265.755)	Light	--zui-empty-state-default-fg-dark
--zui-empty-state-ghost-fg	oklch(37.2% 0.044 257.287)	Light	--zui-empty-state-ghost-fg-dark
--zui-empty-state-card-border	#0000001a	Light	--zui-empty-state-card-border-dark
--zui-empty-state-card-bg	#ffffffe6	Light	--zui-empty-state-card-bg-dark
--zui-empty-state-card-fg	oklch(20.8% 0.042 265.755)	Light	--zui-empty-state-card-fg-dark
--zui-empty-state-card-shadow	0 8px 24px rgba(15,23,42,0.12)	Light	--zui-empty-state-card-shadow-dark
--zui-empty-state-description-fg	oklch(55.4% 0.046 257.417)	Light	--zui-empty-state-description-fg-dark
--zui-empty-state-default-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-empty-state-default-fg
--zui-empty-state-ghost-fg-dark	oklch(92.9% 0.013 255.508)	Dark	--zui-empty-state-ghost-fg
--zui-empty-state-card-border-dark	Override with your dark theme value	Dark	--zui-empty-state-card-border
--zui-empty-state-card-bg-dark	Override with your dark theme value	Dark	--zui-empty-state-card-bg
--zui-empty-state-card-fg-dark	Override with your dark theme value	Dark	--zui-empty-state-card-fg
--zui-empty-state-card-shadow-dark	Override with your dark theme value	Dark	--zui-empty-state-card-shadow
--zui-empty-state-description-fg-dark	Override with your dark theme value	Dark	--zui-empty-state-description-fg

File upload

Override these file upload variables on :root, a theme selector, or a component wrapper.

88 tokens18 dark

Variable	Fallback	Theme	Pair
--zui-file-upload-ring-focus	oklch(70.2% 0.183 293.541 / 0.6)	Light	--zui-file-upload-ring-focus-dark
--zui-file-upload-ring-offset-focus	oklch(98.4% 0.003 247.858)	Light	--zui-file-upload-ring-offset-focus-dark
--zui-file-upload-idle-border	#00000026	Light	--zui-file-upload-idle-border-dark
--zui-file-upload-idle-bg	#0000000d	Light	--zui-file-upload-idle-bg-dark
--zui-file-upload-idle-fg	oklch(44.6% 0.043 257.281)	Light	--zui-file-upload-idle-fg-dark
--zui-file-upload-idle-border-hover	#00000040	Light	--zui-file-upload-idle-border-hover-dark
--zui-file-upload-idle-bg-hover	#00000012	Light	--zui-file-upload-idle-bg-hover-dark
--zui-file-upload-active-border	oklch(70.2% 0.183 293.541 / 0.7)	Light	--zui-file-upload-active-border-dark
--zui-file-upload-active-bg	oklch(60.6% 0.25 292.717 / 0.1)	Light	--zui-file-upload-active-bg-dark
--zui-file-upload-active-fg	oklch(20.8% 0.042 265.755)	Light	--zui-file-upload-active-fg-dark
--zui-file-upload-error-border	oklch(70.4% 0.191 22.216 / 0.7)	Light	--zui-file-upload-error-border-dark
--zui-file-upload-error-bg	oklch(63.7% 0.237 25.331 / 0.1)	Light	--zui-file-upload-error-bg-dark
--zui-file-upload-error-fg	oklch(57.7% 0.245 27.325)	Light	--zui-file-upload-error-fg-dark
--zui-file-upload-error-border-hover	oklch(70.4% 0.191 22.216 / 0.8)	Light	--zui-file-upload-error-border-hover-dark
--zui-file-upload-error-bg-hover	oklch(63.7% 0.237 25.331 / 0.15)	Light	--zui-file-upload-error-bg-hover-dark
--zui-file-upload-success-border	oklch(79.2% 0.209 151.711 / 0.7)	Light	--zui-file-upload-success-border-dark
--zui-file-upload-success-bg	oklch(72.3% 0.219 149.579 / 0.1)	Light	--zui-file-upload-success-bg-dark
--zui-file-upload-success-fg	oklch(62.7% 0.194 149.214)	Light	--zui-file-upload-success-fg-dark
--zui-file-upload-success-border-hover	oklch(79.2% 0.209 151.711 / 0.8)	Shared	none
--zui-file-upload-success-bg-hover	oklch(72.3% 0.219 149.579 / 0.15)	Shared	none
--zui-file-upload-warning-border	oklch(85.2% 0.199 91.936 / 0.7)	Shared	none
--zui-file-upload-warning-bg	oklch(79.5% 0.184 86.047 / 0.1)	Shared	none
--zui-file-upload-warning-fg	oklch(68.1% 0.162 75.834)	Shared	none
--zui-file-upload-warning-border-hover	oklch(85.2% 0.199 91.936 / 0.8)	Shared	none
--zui-file-upload-warning-bg-hover	oklch(79.5% 0.184 86.047 / 0.15)	Shared	none
--zui-file-upload-info-border	oklch(70.7% 0.165 254.624 / 0.7)	Shared	none
--zui-file-upload-info-bg	oklch(62.3% 0.214 259.815 / 0.1)	Shared	none
--zui-file-upload-info-fg	oklch(54.6% 0.245 262.881)	Shared	none
--zui-file-upload-info-border-hover	oklch(70.7% 0.165 254.624 / 0.8)	Shared	none
--zui-file-upload-info-bg-hover	oklch(62.3% 0.214 259.815 / 0.15)	Shared	none
--zui-file-upload-neutral-border	oklch(70.7% 0.022 261.325 / 0.7)	Shared	none
--zui-file-upload-neutral-bg	oklch(55.1% 0.027 264.364 / 0.1)	Shared	none
--zui-file-upload-neutral-fg	oklch(44.6% 0.03 256.802)	Shared	none
--zui-file-upload-neutral-border-hover	oklch(70.7% 0.022 261.325 / 0.8)	Shared	none
--zui-file-upload-neutral-bg-hover	oklch(55.1% 0.027 264.364 / 0.15)	Shared	none
--zui-file-upload-purple-border	oklch(71.4% 0.203 305.504 / 0.7)	Shared	none
--zui-file-upload-purple-bg	oklch(62.7% 0.265 303.9 / 0.1)	Shared	none
--zui-file-upload-purple-fg	oklch(55.8% 0.288 302.321)	Shared	none
--zui-file-upload-purple-border-hover	oklch(71.4% 0.203 305.504 / 0.8)	Shared	none
--zui-file-upload-purple-bg-hover	oklch(62.7% 0.265 303.9 / 0.15)	Shared	none
--zui-file-upload-indigo-border	oklch(67.3% 0.182 276.935 / 0.7)	Shared	none
--zui-file-upload-indigo-bg	oklch(58.5% 0.233 277.117 / 0.1)	Shared	none
--zui-file-upload-indigo-fg	oklch(51.1% 0.262 276.966)	Shared	none
--zui-file-upload-indigo-border-hover	oklch(67.3% 0.182 276.935 / 0.8)	Shared	none
--zui-file-upload-indigo-bg-hover	oklch(58.5% 0.233 277.117 / 0.15)	Shared	none
--zui-file-upload-emerald-border	oklch(76.5% 0.177 163.223 / 0.7)	Shared	none
--zui-file-upload-emerald-bg	oklch(69.6% 0.17 162.48 / 0.1)	Shared	none
--zui-file-upload-emerald-fg	oklch(59.6% 0.145 163.225)	Shared	none
--zui-file-upload-emerald-border-hover	oklch(76.5% 0.177 163.223 / 0.8)	Shared	none
--zui-file-upload-emerald-bg-hover	oklch(69.6% 0.17 162.48 / 0.15)	Shared	none
--zui-file-upload-amber-border	oklch(82.8% 0.189 84.429 / 0.7)	Shared	none
--zui-file-upload-amber-bg	oklch(76.9% 0.188 70.08 / 0.1)	Shared	none
--zui-file-upload-amber-fg	oklch(66.6% 0.179 58.318)	Shared	none
--zui-file-upload-amber-border-hover	oklch(82.8% 0.189 84.429 / 0.8)	Shared	none
--zui-file-upload-amber-bg-hover	oklch(76.9% 0.188 70.08 / 0.15)	Shared	none
--zui-file-upload-pink-border	oklch(71.8% 0.202 349.761 / 0.7)	Shared	none
--zui-file-upload-pink-bg	oklch(65.6% 0.241 354.308 / 0.1)	Shared	none
--zui-file-upload-pink-fg	oklch(59.2% 0.249 0.584)	Shared	none
--zui-file-upload-pink-border-hover	oklch(71.8% 0.202 349.761 / 0.8)	Shared	none
--zui-file-upload-pink-bg-hover	oklch(65.6% 0.241 354.308 / 0.15)	Shared	none
--zui-file-upload-orange-border	oklch(75% 0.183 55.934 / 0.7)	Shared	none
--zui-file-upload-orange-bg	oklch(70.5% 0.213 47.604 / 0.1)	Shared	none
--zui-file-upload-orange-fg	oklch(64.6% 0.222 41.116)	Shared	none
--zui-file-upload-orange-border-hover	oklch(75% 0.183 55.934 / 0.8)	Shared	none
--zui-file-upload-orange-bg-hover	oklch(70.5% 0.213 47.604 / 0.15)	Shared	none
--zui-file-upload-teal-border	oklch(77.7% 0.152 181.912 / 0.7)	Shared	none
--zui-file-upload-teal-bg	oklch(70.4% 0.14 182.503 / 0.1)	Shared	none
--zui-file-upload-teal-fg	oklch(60% 0.118 184.704)	Shared	none
--zui-file-upload-teal-border-hover	oklch(77.7% 0.152 181.912 / 0.8)	Shared	none
--zui-file-upload-teal-bg-hover	oklch(70.4% 0.14 182.503 / 0.15)	Shared	none
--zui-file-upload-ring-offset-focus-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-file-upload-ring-offset-focus
--zui-file-upload-idle-border-dark	#ffffff26	Dark	--zui-file-upload-idle-border
--zui-file-upload-ring-focus-dark	Override with your dark theme value	Dark	--zui-file-upload-ring-focus
--zui-file-upload-idle-bg-dark	Override with your dark theme value	Dark	--zui-file-upload-idle-bg
--zui-file-upload-idle-fg-dark	Override with your dark theme value	Dark	--zui-file-upload-idle-fg
--zui-file-upload-idle-border-hover-dark	Override with your dark theme value	Dark	--zui-file-upload-idle-border-hover
--zui-file-upload-idle-bg-hover-dark	Override with your dark theme value	Dark	--zui-file-upload-idle-bg-hover
--zui-file-upload-active-border-dark	Override with your dark theme value	Dark	--zui-file-upload-active-border
--zui-file-upload-active-bg-dark	Override with your dark theme value	Dark	--zui-file-upload-active-bg
--zui-file-upload-active-fg-dark	Override with your dark theme value	Dark	--zui-file-upload-active-fg
--zui-file-upload-error-border-dark	Override with your dark theme value	Dark	--zui-file-upload-error-border
--zui-file-upload-error-bg-dark	Override with your dark theme value	Dark	--zui-file-upload-error-bg
--zui-file-upload-error-fg-dark	Override with your dark theme value	Dark	--zui-file-upload-error-fg
--zui-file-upload-error-border-hover-dark	Override with your dark theme value	Dark	--zui-file-upload-error-border-hover
--zui-file-upload-error-bg-hover-dark	Override with your dark theme value	Dark	--zui-file-upload-error-bg-hover
--zui-file-upload-success-border-dark	Override with your dark theme value	Dark	--zui-file-upload-success-border
--zui-file-upload-success-bg-dark	Override with your dark theme value	Dark	--zui-file-upload-success-bg
--zui-file-upload-success-fg-dark	Override with your dark theme value	Dark	--zui-file-upload-success-fg

Inputs

Override these inputs variables on :root, a theme selector, or a component wrapper.

107 tokens42 dark

Variable	Fallback	Theme	Pair
--zui-input-bg	#0000000d	Light	--zui-input-bg-dark
--zui-input-fg	oklch(20.8% 0.042 265.755)	Light	--zui-input-fg-dark
--zui-input-shadow	0 1px 2px rgba(15,23,42,0.08)	Light	--zui-input-shadow-dark
--zui-input-ring-offset	oklch(98.4% 0.003 247.858)	Light	--zui-input-ring-offset-dark
--zui-input-placeholder-fg	oklch(55.4% 0.046 257.417)	Light	--zui-input-placeholder-fg-dark
--zui-input-bg-read-only	#00000008	Light	--zui-input-bg-read-only-dark
--zui-input-file-border	#0000001a	Light	--zui-input-file-border-dark
--zui-input-file-bg	#0000001a	Light	--zui-input-file-bg-dark
--zui-input-file-fg	oklch(37.2% 0.044 257.287)	Light	--zui-input-file-fg-dark
--zui-input-file-bg-hover	#00000026	Light	--zui-input-file-bg-hover-dark
--zui-input-file-fg-hover	#ffffff	Light	--zui-input-file-fg-hover-dark
--zui-input-checkbox-border	#0000004d	Light	--zui-input-checkbox-border-dark
--zui-input-checkbox-bg	transparent	Light	--zui-input-checkbox-bg-dark
--zui-input-radio-border	#0000004d	Light	--zui-input-radio-border-dark
--zui-input-radio-bg	transparent	Light	--zui-input-radio-bg-dark
--zui-input-radio-bg-read-only	transparent	Light	--zui-input-radio-bg-read-only-dark
--zui-input-radio-ring	#00000033	Light	--zui-input-radio-ring-dark
--zui-input-radio-ring-offset	oklch(98.4% 0.003 247.858)	Light	--zui-input-radio-ring-offset-dark
--zui-input-default-border	#0000001a	Light	--zui-input-default-border-dark
--zui-input-default-border-focus	#00000033	Light	--zui-input-default-border-focus-dark
--zui-input-warning-border	oklch(79.5% 0.184 86.047 / 0.8)	Light	--zui-input-warning-border-dark
--zui-input-warning-fg	oklch(28.6% 0.066 53.813)	Light	--zui-input-warning-fg-dark
--zui-input-warning-placeholder-fg	oklch(47.6% 0.114 61.907)	Light	--zui-input-warning-placeholder-fg-dark
--zui-input-warning-border-focus	oklch(68.1% 0.162 75.834)	Light	--zui-input-warning-border-focus-dark
--zui-input-warning-ring-focus	oklch(85.2% 0.199 91.936 / 0.8)	Light	--zui-input-warning-ring-focus-dark
--zui-input-error-border	oklch(64.5% 0.246 16.439 / 0.8)	Light	--zui-input-error-border-dark
--zui-input-error-fg	oklch(27.1% 0.105 12.094)	Light	--zui-input-error-fg-dark
--zui-input-error-placeholder-fg	oklch(45.5% 0.188 13.697)	Light	--zui-input-error-placeholder-fg-dark
--zui-input-error-border-focus	oklch(58.6% 0.253 17.585)	Light	--zui-input-error-border-focus-dark
--zui-input-error-ring-focus	oklch(71.2% 0.194 13.428 / 0.8)	Light	--zui-input-error-ring-focus-dark
--zui-input-success-border	oklch(69.6% 0.17 162.48 / 0.7)	Light	--zui-input-success-border-dark
--zui-input-success-fg	oklch(26.2% 0.051 172.552)	Light	--zui-input-success-fg-dark
--zui-input-success-placeholder-fg	oklch(43.2% 0.095 166.913)	Light	--zui-input-success-placeholder-fg-dark
--zui-input-success-border-focus	oklch(59.6% 0.145 163.225)	Light	--zui-input-success-border-focus-dark
--zui-input-success-ring-focus	oklch(76.5% 0.177 163.223 / 0.8)	Light	--zui-input-success-ring-focus-dark
--zui-input-info-border	oklch(62.3% 0.214 259.815 / 0.8)	Light	--zui-input-info-border-dark
--zui-input-info-fg	oklch(28.2% 0.091 267.935)	Light	--zui-input-info-fg-dark
--zui-input-info-placeholder-fg	oklch(42.4% 0.199 265.638)	Light	--zui-input-info-placeholder-fg-dark
--zui-input-info-border-focus	oklch(54.6% 0.245 262.881)	Light	--zui-input-info-border-focus-dark
--zui-input-info-ring-focus	oklch(70.7% 0.165 254.624 / 0.8)	Light	--zui-input-info-ring-focus-dark
--zui-input-violet-border	oklch(60.6% 0.25 292.717 / 0.8)	Light	--zui-input-violet-border-dark
--zui-input-violet-fg	oklch(28.3% 0.141 291.089)	Light	--zui-input-violet-fg-dark
--zui-input-violet-placeholder-fg	oklch(43.2% 0.232 292.759)	Shared	none
--zui-input-violet-border-focus	oklch(54.1% 0.281 293.009)	Shared	none
--zui-input-violet-ring-focus	oklch(70.2% 0.183 293.541 / 0.8)	Shared	none
--zui-input-amber-border	oklch(76.9% 0.188 70.08 / 0.8)	Shared	none
--zui-input-amber-fg	oklch(27.9% 0.077 45.635)	Shared	none
--zui-input-amber-placeholder-fg	oklch(47.3% 0.137 46.201)	Shared	none
--zui-input-amber-border-focus	oklch(66.6% 0.179 58.318)	Shared	none
--zui-input-amber-ring-focus	oklch(82.8% 0.189 84.429 / 0.8)	Shared	none
--zui-input-pink-border	oklch(65.6% 0.241 354.308 / 0.8)	Shared	none
--zui-input-pink-fg	oklch(28.4% 0.109 3.907)	Shared	none
--zui-input-pink-placeholder-fg	oklch(45.9% 0.187 3.815)	Shared	none
--zui-input-pink-border-focus	oklch(59.2% 0.249 0.584)	Shared	none
--zui-input-pink-ring-focus	oklch(71.8% 0.202 349.761 / 0.8)	Shared	none
--zui-input-indigo-border	oklch(58.5% 0.233 277.117 / 0.8)	Shared	none
--zui-input-indigo-fg	oklch(25.7% 0.09 281.288)	Shared	none
--zui-input-indigo-placeholder-fg	oklch(39.8% 0.195 277.366)	Shared	none
--zui-input-indigo-border-focus	oklch(51.1% 0.262 276.966)	Shared	none
--zui-input-indigo-ring-focus	oklch(67.3% 0.182 276.935 / 0.8)	Shared	none
--zui-input-orange-border	oklch(70.5% 0.213 47.604 / 0.8)	Shared	none
--zui-input-orange-fg	oklch(26.6% 0.079 36.259)	Shared	none
--zui-input-orange-placeholder-fg	oklch(47% 0.157 37.304)	Shared	none
--zui-input-orange-border-focus	oklch(64.6% 0.222 41.116)	Shared	none
--zui-input-orange-ring-focus	oklch(75% 0.183 55.934 / 0.8)	Shared	none
--zui-input-bg-dark	#ffffff0d	Dark	--zui-input-bg
--zui-input-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-input-fg
--zui-input-shadow-dark	Override with your dark theme value	Dark	--zui-input-shadow
--zui-input-ring-offset-dark	Override with your dark theme value	Dark	--zui-input-ring-offset
--zui-input-placeholder-fg-dark	Override with your dark theme value	Dark	--zui-input-placeholder-fg
--zui-input-bg-read-only-dark	Override with your dark theme value	Dark	--zui-input-bg-read-only
--zui-input-file-border-dark	Override with your dark theme value	Dark	--zui-input-file-border
--zui-input-file-bg-dark	Override with your dark theme value	Dark	--zui-input-file-bg
--zui-input-file-fg-dark	Override with your dark theme value	Dark	--zui-input-file-fg
--zui-input-file-bg-hover-dark	Override with your dark theme value	Dark	--zui-input-file-bg-hover
--zui-input-file-fg-hover-dark	Override with your dark theme value	Dark	--zui-input-file-fg-hover
--zui-input-checkbox-border-dark	Override with your dark theme value	Dark	--zui-input-checkbox-border
--zui-input-checkbox-bg-dark	Override with your dark theme value	Dark	--zui-input-checkbox-bg
--zui-input-radio-border-dark	Override with your dark theme value	Dark	--zui-input-radio-border
--zui-input-radio-bg-dark	Override with your dark theme value	Dark	--zui-input-radio-bg
--zui-input-radio-bg-read-only-dark	Override with your dark theme value	Dark	--zui-input-radio-bg-read-only
--zui-input-radio-ring-dark	Override with your dark theme value	Dark	--zui-input-radio-ring
--zui-input-radio-ring-offset-dark	Override with your dark theme value	Dark	--zui-input-radio-ring-offset
--zui-input-default-border-dark	Override with your dark theme value	Dark	--zui-input-default-border
--zui-input-default-border-focus-dark	Override with your dark theme value	Dark	--zui-input-default-border-focus
--zui-input-warning-border-dark	Override with your dark theme value	Dark	--zui-input-warning-border
--zui-input-warning-fg-dark	Override with your dark theme value	Dark	--zui-input-warning-fg
--zui-input-warning-placeholder-fg-dark	Override with your dark theme value	Dark	--zui-input-warning-placeholder-fg
--zui-input-warning-border-focus-dark	Override with your dark theme value	Dark	--zui-input-warning-border-focus
--zui-input-warning-ring-focus-dark	Override with your dark theme value	Dark	--zui-input-warning-ring-focus
--zui-input-error-border-dark	Override with your dark theme value	Dark	--zui-input-error-border
--zui-input-error-fg-dark	Override with your dark theme value	Dark	--zui-input-error-fg
--zui-input-error-placeholder-fg-dark	Override with your dark theme value	Dark	--zui-input-error-placeholder-fg
--zui-input-error-border-focus-dark	Override with your dark theme value	Dark	--zui-input-error-border-focus
--zui-input-error-ring-focus-dark	Override with your dark theme value	Dark	--zui-input-error-ring-focus
--zui-input-success-border-dark	Override with your dark theme value	Dark	--zui-input-success-border
--zui-input-success-fg-dark	Override with your dark theme value	Dark	--zui-input-success-fg
--zui-input-success-placeholder-fg-dark	Override with your dark theme value	Dark	--zui-input-success-placeholder-fg
--zui-input-success-border-focus-dark	Override with your dark theme value	Dark	--zui-input-success-border-focus
--zui-input-success-ring-focus-dark	Override with your dark theme value	Dark	--zui-input-success-ring-focus
--zui-input-info-border-dark	Override with your dark theme value	Dark	--zui-input-info-border
--zui-input-info-fg-dark	Override with your dark theme value	Dark	--zui-input-info-fg
--zui-input-info-placeholder-fg-dark	Override with your dark theme value	Dark	--zui-input-info-placeholder-fg
--zui-input-info-border-focus-dark	Override with your dark theme value	Dark	--zui-input-info-border-focus
--zui-input-info-ring-focus-dark	Override with your dark theme value	Dark	--zui-input-info-ring-focus
--zui-input-violet-border-dark	Override with your dark theme value	Dark	--zui-input-violet-border
--zui-input-violet-fg-dark	Override with your dark theme value	Dark	--zui-input-violet-fg

Kbd

Override these kbd variables on :root, a theme selector, or a component wrapper. Structural variables drive the radius and keycap shadow; each appearance sets the keycap background, foreground, and border tokens.

133 tokens66 dark

Variable	Fallback	Theme	Pair
--zui-kbd-radius	0.375rem	Light	--zui-kbd-radius-dark
--zui-kbd-shadow	inset 0 -1px 0 #0000001f	Light	--zui-kbd-shadow-dark
--zui-kbd-default-bg	#0f172a	Light	--zui-kbd-default-bg-dark
--zui-kbd-default-fg	#f8fafc	Light	--zui-kbd-default-fg-dark
--zui-kbd-default-shadow	0 1px 2px #0f172a14	Light	--zui-kbd-default-shadow-dark
--zui-kbd-secondary-bg	#e2e8f0	Light	--zui-kbd-secondary-bg-dark
--zui-kbd-secondary-fg	#0f172a	Light	--zui-kbd-secondary-fg-dark
--zui-kbd-destructive-bg	#f43f5e	Light	--zui-kbd-destructive-bg-dark
--zui-kbd-destructive-fg	#ffffff	Light	--zui-kbd-destructive-fg-dark
--zui-kbd-outline-border	#0000001a	Light	--zui-kbd-outline-border-dark
--zui-kbd-outline-bg	#0000000d	Light	--zui-kbd-outline-bg-dark
--zui-kbd-outline-fg	#0f172a	Light	--zui-kbd-outline-fg-dark
--zui-kbd-ghost-fg	#334155	Light	--zui-kbd-ghost-fg-dark
--zui-kbd-glass-border	#00000026	Light	--zui-kbd-glass-border-dark
--zui-kbd-glass-bg	#0000001a	Light	--zui-kbd-glass-bg-dark
--zui-kbd-glass-fg	#0f172a	Light	--zui-kbd-glass-fg-dark
--zui-kbd-emerald-bg	#10b981	Light	--zui-kbd-emerald-bg-dark
--zui-kbd-emerald-fg	#ffffff	Light	--zui-kbd-emerald-fg-dark
--zui-kbd-indigo-bg	#3730a3	Light	--zui-kbd-indigo-bg-dark
--zui-kbd-indigo-fg	#ffffff	Light	--zui-kbd-indigo-fg-dark
--zui-kbd-purple-bg	#6b21a8	Light	--zui-kbd-purple-bg-dark
--zui-kbd-purple-fg	#ffffff	Light	--zui-kbd-purple-fg-dark
--zui-kbd-pink-bg	#9d174d	Light	--zui-kbd-pink-bg-dark
--zui-kbd-pink-fg	#ffffff	Light	--zui-kbd-pink-fg-dark
--zui-kbd-rose-bg	#9f1239	Light	--zui-kbd-rose-bg-dark
--zui-kbd-rose-fg	#ffffff	Light	--zui-kbd-rose-fg-dark
--zui-kbd-sky-bg	#0ea5e9	Light	--zui-kbd-sky-bg-dark
--zui-kbd-sky-fg	#ffffff	Light	--zui-kbd-sky-fg-dark
--zui-kbd-teal-bg	#14b8a6	Light	--zui-kbd-teal-bg-dark
--zui-kbd-teal-fg	#ffffff	Light	--zui-kbd-teal-fg-dark
--zui-kbd-yellow-bg	#eab308	Light	--zui-kbd-yellow-bg-dark
--zui-kbd-yellow-fg	#ffffff	Light	--zui-kbd-yellow-fg-dark
--zui-kbd-orange-bg	#f97316	Light	--zui-kbd-orange-bg-dark
--zui-kbd-orange-fg	#ffffff	Light	--zui-kbd-orange-fg-dark
--zui-kbd-gray-bg	#6b7280	Light	--zui-kbd-gray-bg-dark
--zui-kbd-gray-fg	#ffffff	Light	--zui-kbd-gray-fg-dark
--zui-kbd-amber-bg	#f59e0b	Light	--zui-kbd-amber-bg-dark
--zui-kbd-amber-fg	#ffffff	Light	--zui-kbd-amber-fg-dark
--zui-kbd-violet-bg	#5b21b6	Light	--zui-kbd-violet-bg-dark
--zui-kbd-violet-fg	#ffffff	Light	--zui-kbd-violet-fg-dark
--zui-kbd-gradient-blue-from	#1e40af	Light	--zui-kbd-gradient-blue-from-dark
--zui-kbd-gradient-blue-to	#6b21a8	Light	--zui-kbd-gradient-blue-to-dark
--zui-kbd-gradient-blue-fg	#ffffff	Light	--zui-kbd-gradient-blue-fg-dark
--zui-kbd-gradient-green-from	#166534	Light	--zui-kbd-gradient-green-from-dark
--zui-kbd-gradient-green-to	#3f6212	Light	--zui-kbd-gradient-green-to-dark
--zui-kbd-gradient-green-fg	#ffffff	Light	--zui-kbd-gradient-green-fg-dark
--zui-kbd-gradient-red-from	#991b1b	Light	--zui-kbd-gradient-red-from-dark
--zui-kbd-gradient-red-to	#9d174d	Light	--zui-kbd-gradient-red-to-dark
--zui-kbd-gradient-red-fg	#ffffff	Light	--zui-kbd-gradient-red-fg-dark
--zui-kbd-gradient-yellow-from	#854d0e	Light	--zui-kbd-gradient-yellow-from-dark
--zui-kbd-gradient-yellow-to	#9a3412	Light	--zui-kbd-gradient-yellow-to-dark
--zui-kbd-gradient-yellow-fg	#ffffff	Light	--zui-kbd-gradient-yellow-fg-dark
--zui-kbd-gradient-purple-from	#6b21a8	Light	--zui-kbd-gradient-purple-from-dark
--zui-kbd-gradient-purple-to	#9d174d	Light	--zui-kbd-gradient-purple-to-dark
--zui-kbd-gradient-purple-fg	#ffffff	Light	--zui-kbd-gradient-purple-fg-dark
--zui-kbd-gradient-teal-from	#115e59	Light	--zui-kbd-gradient-teal-from-dark
--zui-kbd-gradient-teal-to	#155e75	Light	--zui-kbd-gradient-teal-to-dark
--zui-kbd-gradient-teal-fg	#ffffff	Light	--zui-kbd-gradient-teal-fg-dark
--zui-kbd-gradient-indigo-from	#3730a3	Light	--zui-kbd-gradient-indigo-from-dark
--zui-kbd-gradient-indigo-to	#6b21a8	Light	--zui-kbd-gradient-indigo-to-dark
--zui-kbd-gradient-indigo-fg	#ffffff	Light	--zui-kbd-gradient-indigo-fg-dark
--zui-kbd-gradient-pink-from	#9d174d	Light	--zui-kbd-gradient-pink-from-dark
--zui-kbd-gradient-pink-to	#9f1239	Light	--zui-kbd-gradient-pink-to-dark
--zui-kbd-gradient-pink-fg	#ffffff	Light	--zui-kbd-gradient-pink-fg-dark
--zui-kbd-gradient-orange-from	#9a3412	Light	--zui-kbd-gradient-orange-from-dark
--zui-kbd-gradient-orange-to	#991b1b	Light	--zui-kbd-gradient-orange-to-dark
--zui-kbd-gradient-orange-fg	#ffffff	Shared	none
--zui-kbd-shadow-dark	inset 0 -1px 0 #0000004d	Dark	--zui-kbd-shadow
--zui-kbd-default-bg-dark	#f8fafc	Dark	--zui-kbd-default-bg
--zui-kbd-radius-dark	Override with your dark theme value	Dark	--zui-kbd-radius
--zui-kbd-default-fg-dark	Override with your dark theme value	Dark	--zui-kbd-default-fg
--zui-kbd-default-shadow-dark	Override with your dark theme value	Dark	--zui-kbd-default-shadow
--zui-kbd-secondary-bg-dark	Override with your dark theme value	Dark	--zui-kbd-secondary-bg
--zui-kbd-secondary-fg-dark	Override with your dark theme value	Dark	--zui-kbd-secondary-fg
--zui-kbd-destructive-bg-dark	Override with your dark theme value	Dark	--zui-kbd-destructive-bg
--zui-kbd-destructive-fg-dark	Override with your dark theme value	Dark	--zui-kbd-destructive-fg
--zui-kbd-outline-border-dark	Override with your dark theme value	Dark	--zui-kbd-outline-border
--zui-kbd-outline-bg-dark	Override with your dark theme value	Dark	--zui-kbd-outline-bg
--zui-kbd-outline-fg-dark	Override with your dark theme value	Dark	--zui-kbd-outline-fg
--zui-kbd-ghost-fg-dark	Override with your dark theme value	Dark	--zui-kbd-ghost-fg
--zui-kbd-glass-border-dark	Override with your dark theme value	Dark	--zui-kbd-glass-border
--zui-kbd-glass-bg-dark	Override with your dark theme value	Dark	--zui-kbd-glass-bg
--zui-kbd-glass-fg-dark	Override with your dark theme value	Dark	--zui-kbd-glass-fg
--zui-kbd-emerald-bg-dark	Override with your dark theme value	Dark	--zui-kbd-emerald-bg
--zui-kbd-emerald-fg-dark	Override with your dark theme value	Dark	--zui-kbd-emerald-fg
--zui-kbd-indigo-bg-dark	Override with your dark theme value	Dark	--zui-kbd-indigo-bg
--zui-kbd-indigo-fg-dark	Override with your dark theme value	Dark	--zui-kbd-indigo-fg
--zui-kbd-purple-bg-dark	Override with your dark theme value	Dark	--zui-kbd-purple-bg
--zui-kbd-purple-fg-dark	Override with your dark theme value	Dark	--zui-kbd-purple-fg
--zui-kbd-pink-bg-dark	Override with your dark theme value	Dark	--zui-kbd-pink-bg
--zui-kbd-pink-fg-dark	Override with your dark theme value	Dark	--zui-kbd-pink-fg
--zui-kbd-rose-bg-dark	Override with your dark theme value	Dark	--zui-kbd-rose-bg
--zui-kbd-rose-fg-dark	Override with your dark theme value	Dark	--zui-kbd-rose-fg
--zui-kbd-sky-bg-dark	Override with your dark theme value	Dark	--zui-kbd-sky-bg
--zui-kbd-sky-fg-dark	Override with your dark theme value	Dark	--zui-kbd-sky-fg
--zui-kbd-teal-bg-dark	Override with your dark theme value	Dark	--zui-kbd-teal-bg
--zui-kbd-teal-fg-dark	Override with your dark theme value	Dark	--zui-kbd-teal-fg
--zui-kbd-yellow-bg-dark	Override with your dark theme value	Dark	--zui-kbd-yellow-bg
--zui-kbd-yellow-fg-dark	Override with your dark theme value	Dark	--zui-kbd-yellow-fg
--zui-kbd-orange-bg-dark	Override with your dark theme value	Dark	--zui-kbd-orange-bg
--zui-kbd-orange-fg-dark	Override with your dark theme value	Dark	--zui-kbd-orange-fg
--zui-kbd-gray-bg-dark	Override with your dark theme value	Dark	--zui-kbd-gray-bg
--zui-kbd-gray-fg-dark	Override with your dark theme value	Dark	--zui-kbd-gray-fg
--zui-kbd-amber-bg-dark	Override with your dark theme value	Dark	--zui-kbd-amber-bg
--zui-kbd-amber-fg-dark	Override with your dark theme value	Dark	--zui-kbd-amber-fg
--zui-kbd-violet-bg-dark	Override with your dark theme value	Dark	--zui-kbd-violet-bg
--zui-kbd-violet-fg-dark	Override with your dark theme value	Dark	--zui-kbd-violet-fg
--zui-kbd-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-blue-from
--zui-kbd-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-blue-to
--zui-kbd-gradient-blue-fg-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-blue-fg
--zui-kbd-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-green-from
--zui-kbd-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-green-to
--zui-kbd-gradient-green-fg-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-green-fg
--zui-kbd-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-red-from
--zui-kbd-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-red-to
--zui-kbd-gradient-red-fg-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-red-fg
--zui-kbd-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-yellow-from
--zui-kbd-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-yellow-to
--zui-kbd-gradient-yellow-fg-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-yellow-fg
--zui-kbd-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-purple-from
--zui-kbd-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-purple-to
--zui-kbd-gradient-purple-fg-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-purple-fg
--zui-kbd-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-teal-from
--zui-kbd-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-teal-to
--zui-kbd-gradient-teal-fg-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-teal-fg
--zui-kbd-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-indigo-from
--zui-kbd-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-indigo-to
--zui-kbd-gradient-indigo-fg-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-indigo-fg
--zui-kbd-gradient-pink-from-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-pink-from
--zui-kbd-gradient-pink-to-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-pink-to
--zui-kbd-gradient-pink-fg-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-pink-fg
--zui-kbd-gradient-orange-from-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-orange-from
--zui-kbd-gradient-orange-to-dark	Override with your dark theme value	Dark	--zui-kbd-gradient-orange-to

Marquee

Override these Marquee variables on :root, a theme selector, or a component wrapper.

68 tokens34 dark

Variable	Fallback	Theme	Pair
--zui-marquee-bg	transparent	Light	--zui-marquee-bg-dark
--zui-marquee-fg	oklch(20.8% 0.042 265.755)	Light	--zui-marquee-fg-dark
--zui-marquee-gap	1rem	Light	--zui-marquee-gap-dark
--zui-marquee-card-bg	#ffffff	Light	--zui-marquee-card-bg-dark
--zui-marquee-card-border	oklch(92.9% 0.013 255.508)	Light	--zui-marquee-card-border-dark
--zui-marquee-outline-border	oklch(86.9% 0.022 252.894)	Light	--zui-marquee-outline-border-dark
--zui-marquee-separated-border	oklch(86.9% 0.022 252.894)	Light	--zui-marquee-separated-border-dark
--zui-marquee-sky-border	oklch(62.3% 0.214 259.815 / 0.28)	Light	--zui-marquee-sky-border-dark
--zui-marquee-rose-border	oklch(58.6% 0.253 17.585 / 0.24)	Light	--zui-marquee-rose-border-dark
--zui-marquee-purple-border	oklch(62.7% 0.265 303.9 / 0.24)	Light	--zui-marquee-purple-border-dark
--zui-marquee-pink-border	oklch(65.6% 0.241 354.308 / 0.24)	Light	--zui-marquee-pink-border-dark
--zui-marquee-orange-border	oklch(70.5% 0.213 47.604 / 0.26)	Light	--zui-marquee-orange-border-dark
--zui-marquee-yellow-border	oklch(79.5% 0.184 86.047 / 0.3)	Light	--zui-marquee-yellow-border-dark
--zui-marquee-teal-border	oklch(70.4% 0.14 182.503 / 0.28)	Light	--zui-marquee-teal-border-dark
--zui-marquee-indigo-border	oklch(58.5% 0.233 277.117 / 0.24)	Light	--zui-marquee-indigo-border-dark
--zui-marquee-emerald-border	oklch(69.6% 0.17 162.48 / 0.28)	Light	--zui-marquee-emerald-border-dark
--zui-marquee-gradient-blue-from	oklch(62.3% 0.214 259.815)	Light	--zui-marquee-gradient-blue-from-dark
--zui-marquee-gradient-blue-to	oklch(54.6% 0.245 262.881)	Light	--zui-marquee-gradient-blue-to-dark
--zui-marquee-gradient-green-from	oklch(72.3% 0.219 149.579)	Light	--zui-marquee-gradient-green-from-dark
--zui-marquee-gradient-green-to	oklch(62.7% 0.194 149.214)	Light	--zui-marquee-gradient-green-to-dark
--zui-marquee-gradient-red-from	oklch(63.7% 0.237 25.331)	Light	--zui-marquee-gradient-red-from-dark
--zui-marquee-gradient-red-to	oklch(57.7% 0.245 27.325)	Light	--zui-marquee-gradient-red-to-dark
--zui-marquee-gradient-yellow-from	oklch(85.2% 0.199 91.936)	Light	--zui-marquee-gradient-yellow-from-dark
--zui-marquee-gradient-yellow-to	oklch(79.5% 0.184 86.047)	Light	--zui-marquee-gradient-yellow-to-dark
--zui-marquee-gradient-purple-from	oklch(71.4% 0.203 305.504)	Light	--zui-marquee-gradient-purple-from-dark
--zui-marquee-gradient-purple-to	oklch(62.7% 0.265 303.9)	Light	--zui-marquee-gradient-purple-to-dark
--zui-marquee-gradient-teal-from	oklch(77.7% 0.152 181.912)	Light	--zui-marquee-gradient-teal-from-dark
--zui-marquee-gradient-teal-to	oklch(70.4% 0.14 182.503)	Light	--zui-marquee-gradient-teal-to-dark
--zui-marquee-gradient-indigo-from	oklch(67.3% 0.182 276.935)	Light	--zui-marquee-gradient-indigo-from-dark
--zui-marquee-gradient-indigo-to	oklch(58.5% 0.233 277.117)	Light	--zui-marquee-gradient-indigo-to-dark
--zui-marquee-gradient-pink-from	oklch(71.8% 0.202 349.761)	Light	--zui-marquee-gradient-pink-from-dark
--zui-marquee-gradient-pink-to	oklch(65.6% 0.241 354.308)	Light	--zui-marquee-gradient-pink-to-dark
--zui-marquee-gradient-orange-from	oklch(75% 0.183 55.934)	Light	--zui-marquee-gradient-orange-from-dark
--zui-marquee-gradient-orange-to	oklch(70.5% 0.213 47.604)	Light	--zui-marquee-gradient-orange-to-dark
--zui-marquee-card-bg-dark	oklch(20.8% 0.042 265.755 / 0.9)	Dark	--zui-marquee-card-bg
--zui-marquee-card-border-dark	oklch(37.2% 0.044 257.287)	Dark	--zui-marquee-card-border
--zui-marquee-outline-border-dark	oklch(37.2% 0.044 257.287)	Dark	--zui-marquee-outline-border
--zui-marquee-separated-border-dark	oklch(37.2% 0.044 257.287)	Dark	--zui-marquee-separated-border
--zui-marquee-sky-border-dark	oklch(70.7% 0.165 254.624 / 0.3)	Dark	--zui-marquee-sky-border
--zui-marquee-rose-border-dark	oklch(71.2% 0.194 13.428 / 0.3)	Dark	--zui-marquee-rose-border
--zui-marquee-purple-border-dark	oklch(71.4% 0.203 305.504 / 0.3)	Dark	--zui-marquee-purple-border
--zui-marquee-pink-border-dark	oklch(71.8% 0.202 349.761 / 0.3)	Dark	--zui-marquee-pink-border
--zui-marquee-orange-border-dark	oklch(75% 0.183 55.934 / 0.32)	Dark	--zui-marquee-orange-border
--zui-marquee-yellow-border-dark	oklch(85.2% 0.199 91.936 / 0.32)	Dark	--zui-marquee-yellow-border
--zui-marquee-teal-border-dark	oklch(77.7% 0.152 181.912 / 0.32)	Dark	--zui-marquee-teal-border
--zui-marquee-indigo-border-dark	oklch(67.3% 0.182 276.935 / 0.32)	Dark	--zui-marquee-indigo-border
--zui-marquee-emerald-border-dark	oklch(76.5% 0.177 163.223 / 0.32)	Dark	--zui-marquee-emerald-border
--zui-marquee-bg-dark	Override with your dark theme value	Dark	--zui-marquee-bg
--zui-marquee-fg-dark	Override with your dark theme value	Dark	--zui-marquee-fg
--zui-marquee-gap-dark	Override with your dark theme value	Dark	--zui-marquee-gap
--zui-marquee-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-blue-from
--zui-marquee-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-blue-to
--zui-marquee-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-green-from
--zui-marquee-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-green-to
--zui-marquee-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-red-from
--zui-marquee-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-red-to
--zui-marquee-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-yellow-from
--zui-marquee-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-yellow-to
--zui-marquee-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-purple-from
--zui-marquee-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-purple-to
--zui-marquee-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-teal-from
--zui-marquee-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-teal-to
--zui-marquee-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-indigo-from
--zui-marquee-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-indigo-to
--zui-marquee-gradient-pink-from-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-pink-from
--zui-marquee-gradient-pink-to-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-pink-to
--zui-marquee-gradient-orange-from-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-orange-from
--zui-marquee-gradient-orange-to-dark	Override with your dark theme value	Dark	--zui-marquee-gradient-orange-to

Modal

Override these modal variables on :root, a theme selector, or a component wrapper.

271 tokens135 dark

OTP input

Override these OTP input variables on :root, a theme selector, or a component wrapper.

46 tokens23 dark

Variable	Fallback	Theme	Pair
--zui-otp-label-fg	oklch(20.8% 0.042 265.755)	Light	--zui-otp-label-fg-dark
--zui-otp-hint-fg	oklch(55.4% 0.046 257.417)	Light	--zui-otp-hint-fg-dark
--zui-otp-bg	#ffffff	Light	--zui-otp-bg-dark
--zui-otp-fg	oklch(20.8% 0.042 265.755)	Light	--zui-otp-fg-dark
--zui-otp-ring-offset-focus	#ffffff	Light	--zui-otp-ring-offset-focus-dark
--zui-otp-separator	#94a3b8	Light	--zui-otp-separator-dark
--zui-otp-error-fg	oklch(58.6% 0.253 17.585)	Light	--zui-otp-error-fg-dark
--zui-otp-default-border	#cbd5e1	Light	--zui-otp-default-border-dark
--zui-otp-default-border-focus	oklch(44.6% 0.043 257.281)	Light	--zui-otp-default-border-focus-dark
--zui-otp-default-ring-focus	oklch(44.6% 0.043 257.281 / 0.25)	Light	--zui-otp-default-ring-focus-dark
--zui-otp-outline-border	#64748b	Light	--zui-otp-outline-border-dark
--zui-otp-outline-border-focus	oklch(54.6% 0.245 262.881)	Light	--zui-otp-outline-border-focus-dark
--zui-otp-outline-ring-focus	oklch(54.6% 0.245 262.881 / 0.28)	Light	--zui-otp-outline-ring-focus-dark
--zui-otp-glass-border	#ffffff66	Light	--zui-otp-glass-border-dark
--zui-otp-glass-bg	#ffffffcc	Light	--zui-otp-glass-bg-dark
--zui-otp-glass-border-focus	oklch(70.7% 0.165 254.624)	Light	--zui-otp-glass-border-focus-dark
--zui-otp-glass-ring-focus	oklch(70.7% 0.165 254.624 / 0.32)	Light	--zui-otp-glass-ring-focus-dark
--zui-otp-success-border	oklch(69.6% 0.17 162.48 / 0.6)	Light	--zui-otp-success-border-dark
--zui-otp-success-border-focus	oklch(59.6% 0.145 163.225)	Light	--zui-otp-success-border-focus-dark
--zui-otp-success-ring-focus	oklch(59.6% 0.145 163.225 / 0.28)	Light	--zui-otp-success-ring-focus-dark
--zui-otp-error-border	oklch(58.6% 0.253 17.585 / 0.7)	Light	--zui-otp-error-border-dark
--zui-otp-error-border-focus	oklch(58.6% 0.253 17.585)	Light	--zui-otp-error-border-focus-dark
--zui-otp-error-ring-focus	oklch(58.6% 0.253 17.585 / 0.28)	Light	--zui-otp-error-ring-focus-dark
--zui-otp-label-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-otp-label-fg
--zui-otp-hint-fg-dark	oklch(70.4% 0.04 256.788)	Dark	--zui-otp-hint-fg
--zui-otp-bg-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-otp-bg
--zui-otp-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-otp-fg
--zui-otp-ring-offset-focus-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-otp-ring-offset-focus
--zui-otp-separator-dark	#64748b	Dark	--zui-otp-separator
--zui-otp-error-fg-dark	oklch(71.2% 0.194 13.428)	Dark	--zui-otp-error-fg
--zui-otp-default-border-dark	Override with your dark theme value	Dark	--zui-otp-default-border
--zui-otp-default-border-focus-dark	Override with your dark theme value	Dark	--zui-otp-default-border-focus
--zui-otp-default-ring-focus-dark	Override with your dark theme value	Dark	--zui-otp-default-ring-focus
--zui-otp-outline-border-dark	Override with your dark theme value	Dark	--zui-otp-outline-border
--zui-otp-outline-border-focus-dark	Override with your dark theme value	Dark	--zui-otp-outline-border-focus
--zui-otp-outline-ring-focus-dark	Override with your dark theme value	Dark	--zui-otp-outline-ring-focus
--zui-otp-glass-border-dark	Override with your dark theme value	Dark	--zui-otp-glass-border
--zui-otp-glass-bg-dark	Override with your dark theme value	Dark	--zui-otp-glass-bg
--zui-otp-glass-border-focus-dark	Override with your dark theme value	Dark	--zui-otp-glass-border-focus
--zui-otp-glass-ring-focus-dark	Override with your dark theme value	Dark	--zui-otp-glass-ring-focus
--zui-otp-success-border-dark	Override with your dark theme value	Dark	--zui-otp-success-border
--zui-otp-success-border-focus-dark	Override with your dark theme value	Dark	--zui-otp-success-border-focus
--zui-otp-success-ring-focus-dark	Override with your dark theme value	Dark	--zui-otp-success-ring-focus
--zui-otp-error-border-dark	Override with your dark theme value	Dark	--zui-otp-error-border
--zui-otp-error-border-focus-dark	Override with your dark theme value	Dark	--zui-otp-error-border-focus
--zui-otp-error-ring-focus-dark	Override with your dark theme value	Dark	--zui-otp-error-ring-focus

Pagination

Override these pagination variables on :root, a theme selector, or a component wrapper.

107 tokens40 dark

Popover

Override these popover variables on :root, a theme selector, or a component wrapper.

136 tokens68 dark

Variable	Fallback	Theme	Pair
--zui-popover-default-bg	#ffffff	Light	--zui-popover-default-bg-dark
--zui-popover-default-border	oklch(20.8% 0.042 265.755 / 0.1)	Light	--zui-popover-default-border-dark
--zui-popover-default-fg	oklch(20.8% 0.042 265.755)	Light	--zui-popover-default-fg-dark
--zui-popover-emerald-bg	oklch(90.5% 0.093 164.15)	Light	--zui-popover-emerald-bg-dark
--zui-popover-emerald-border	oklch(43.2% 0.095 166.913 / 0.35)	Light	--zui-popover-emerald-border-dark
--zui-popover-emerald-fg	oklch(37.8% 0.077 168.94)	Light	--zui-popover-emerald-fg-dark
--zui-popover-ghost-bg	oklch(96.7% 0.003 264.542)	Light	--zui-popover-ghost-bg-dark
--zui-popover-ghost-fg	oklch(21% 0.034 264.665)	Light	--zui-popover-ghost-fg-dark
--zui-popover-glass-bg	#ffffffb3	Light	--zui-popover-glass-bg-dark
--zui-popover-glass-border	#00000026	Light	--zui-popover-glass-border-dark
--zui-popover-glass-fg	oklch(20.8% 0.042 265.755)	Light	--zui-popover-glass-fg-dark
--zui-popover-gradient-blue-fg	#ffffff	Light	--zui-popover-gradient-blue-fg-dark
--zui-popover-gradient-blue-from	oklch(42.4% 0.199 265.638)	Light	--zui-popover-gradient-blue-from-dark
--zui-popover-gradient-blue-to	oklch(43.8% 0.218 303.724)	Light	--zui-popover-gradient-blue-to-dark
--zui-popover-gradient-green-fg	#ffffff	Light	--zui-popover-gradient-green-fg-dark
--zui-popover-gradient-green-from	oklch(44.8% 0.119 151.328)	Light	--zui-popover-gradient-green-from-dark
--zui-popover-gradient-green-to	oklch(45.3% 0.124 130.933)	Light	--zui-popover-gradient-green-to-dark
--zui-popover-gradient-indigo-fg	#ffffff	Light	--zui-popover-gradient-indigo-fg-dark
--zui-popover-gradient-indigo-from	oklch(39.8% 0.195 277.366)	Light	--zui-popover-gradient-indigo-from-dark
--zui-popover-gradient-indigo-to	oklch(43.8% 0.218 303.724)	Light	--zui-popover-gradient-indigo-to-dark
--zui-popover-gradient-orange-fg	#ffffff	Light	--zui-popover-gradient-orange-fg-dark
--zui-popover-gradient-orange-from	oklch(47% 0.157 37.304)	Light	--zui-popover-gradient-orange-from-dark
--zui-popover-gradient-orange-to	oklch(44.4% 0.177 26.899)	Light	--zui-popover-gradient-orange-to-dark
--zui-popover-gradient-pink-fg	#ffffff	Light	--zui-popover-gradient-pink-fg-dark
--zui-popover-gradient-pink-from	oklch(45.9% 0.187 3.815)	Light	--zui-popover-gradient-pink-from-dark
--zui-popover-gradient-pink-to	oklch(45.5% 0.188 13.697)	Light	--zui-popover-gradient-pink-to-dark
--zui-popover-gradient-purple-fg	#ffffff	Light	--zui-popover-gradient-purple-fg-dark
--zui-popover-gradient-purple-from	oklch(43.8% 0.218 303.724)	Light	--zui-popover-gradient-purple-from-dark
--zui-popover-gradient-purple-to	oklch(45.9% 0.187 3.815)	Light	--zui-popover-gradient-purple-to-dark
--zui-popover-gradient-red-fg	#ffffff	Light	--zui-popover-gradient-red-fg-dark
--zui-popover-gradient-red-from	oklch(44.4% 0.177 26.899)	Light	--zui-popover-gradient-red-from-dark
--zui-popover-gradient-red-to	oklch(45.9% 0.187 3.815)	Light	--zui-popover-gradient-red-to-dark
--zui-popover-gradient-teal-fg	#ffffff	Light	--zui-popover-gradient-teal-fg-dark
--zui-popover-gradient-teal-from	oklch(43.7% 0.078 188.216)	Light	--zui-popover-gradient-teal-from-dark
--zui-popover-gradient-teal-to	oklch(45% 0.085 224.283)	Light	--zui-popover-gradient-teal-to-dark
--zui-popover-gradient-yellow-fg	#ffffff	Light	--zui-popover-gradient-yellow-fg-dark
--zui-popover-gradient-yellow-from	oklch(47.6% 0.114 61.907)	Light	--zui-popover-gradient-yellow-from-dark
--zui-popover-gradient-yellow-to	oklch(47% 0.157 37.304)	Light	--zui-popover-gradient-yellow-to-dark
--zui-popover-green-bg	oklch(92.5% 0.084 155.995)	Light	--zui-popover-green-bg-dark
--zui-popover-green-border	oklch(44.8% 0.119 151.328 / 0.35)	Light	--zui-popover-green-border-dark
--zui-popover-green-fg	oklch(39.3% 0.095 152.535)	Light	--zui-popover-green-fg-dark
--zui-popover-indigo-bg	oklch(87% 0.065 274.039)	Light	--zui-popover-indigo-bg-dark
--zui-popover-indigo-border	oklch(39.8% 0.195 277.366 / 0.35)	Light	--zui-popover-indigo-border-dark
--zui-popover-indigo-fg	oklch(35.9% 0.144 278.697)	Light	--zui-popover-indigo-fg-dark
--zui-popover-orange-bg	oklch(90.1% 0.076 70.697)	Light	--zui-popover-orange-bg-dark
--zui-popover-orange-border	oklch(47% 0.157 37.304 / 0.35)	Light	--zui-popover-orange-border-dark
--zui-popover-orange-fg	oklch(40.8% 0.123 38.172)	Light	--zui-popover-orange-fg-dark
--zui-popover-outline-bg	#ffffff	Light	--zui-popover-outline-bg-dark
--zui-popover-outline-border	oklch(37.3% 0.034 259.733)	Light	--zui-popover-outline-border-dark
--zui-popover-outline-fg	oklch(21% 0.034 264.665)	Light	--zui-popover-outline-fg-dark
--zui-popover-pink-bg	oklch(89.9% 0.061 343.231)	Light	--zui-popover-pink-bg-dark
--zui-popover-pink-border	oklch(45.9% 0.187 3.815 / 0.35)	Light	--zui-popover-pink-border-dark
--zui-popover-pink-fg	oklch(40.8% 0.153 2.432)	Light	--zui-popover-pink-fg-dark
--zui-popover-purple-bg	oklch(90.2% 0.063 306.703)	Light	--zui-popover-purple-bg-dark
--zui-popover-purple-border	oklch(43.8% 0.218 303.724 / 0.35)	Light	--zui-popover-purple-border-dark
--zui-popover-purple-fg	oklch(38.1% 0.176 304.987)	Light	--zui-popover-purple-fg-dark
--zui-popover-rose-bg	oklch(89.2% 0.058 10.001)	Light	--zui-popover-rose-bg-dark
--zui-popover-rose-border	oklch(45.5% 0.188 13.697 / 0.35)	Light	--zui-popover-rose-border-dark
--zui-popover-rose-fg	oklch(41% 0.159 10.272)	Light	--zui-popover-rose-fg-dark
--zui-popover-sky-bg	oklch(90.1% 0.058 230.902)	Light	--zui-popover-sky-bg-dark
--zui-popover-sky-border	oklch(44.3% 0.11 240.79 / 0.35)	Light	--zui-popover-sky-border-dark
--zui-popover-sky-fg	oklch(39.1% 0.09 240.876)	Light	--zui-popover-sky-fg-dark
--zui-popover-teal-bg	oklch(91% 0.096 180.426)	Light	--zui-popover-teal-bg-dark
--zui-popover-teal-border	oklch(43.7% 0.078 188.216 / 0.35)	Light	--zui-popover-teal-border-dark
--zui-popover-teal-fg	oklch(38.6% 0.063 188.416)	Light	--zui-popover-teal-fg-dark
--zui-popover-yellow-bg	oklch(94.5% 0.129 101.54)	Light	--zui-popover-yellow-bg-dark
--zui-popover-yellow-border	oklch(47.6% 0.114 61.907 / 0.35)	Light	--zui-popover-yellow-border-dark
--zui-popover-yellow-fg	oklch(42.1% 0.095 57.708)	Light	--zui-popover-yellow-fg-dark
--zui-popover-default-bg-dark	oklch(20.8% 0.042 265.755)	Dark	--zui-popover-default-bg
--zui-popover-default-border-dark	#ffffff1a	Dark	--zui-popover-default-border
--zui-popover-default-fg-dark	oklch(96.8% 0.007 247.896)	Dark	--zui-popover-default-fg
--zui-popover-emerald-bg-dark	oklch(26.2% 0.051 172.552)	Dark	--zui-popover-emerald-bg
--zui-popover-emerald-border-dark	oklch(43.2% 0.095 166.913 / 0.35)	Dark	--zui-popover-emerald-border
--zui-popover-emerald-fg-dark	oklch(90.5% 0.093 164.15)	Dark	--zui-popover-emerald-fg
--zui-popover-ghost-bg-dark	oklch(27.8% 0.033 256.848)	Dark	--zui-popover-ghost-bg
--zui-popover-ghost-fg-dark	#ffffffe6	Dark	--zui-popover-ghost-fg
--zui-popover-glass-bg-dark	#020617b3	Dark	--zui-popover-glass-bg
--zui-popover-glass-border-dark	#ffffff26	Dark	--zui-popover-glass-border
--zui-popover-glass-fg-dark	#ffffff	Dark	--zui-popover-glass-fg
--zui-popover-gradient-blue-fg-dark	#ffffff	Dark	--zui-popover-gradient-blue-fg
--zui-popover-gradient-blue-from-dark	oklch(42.4% 0.199 265.638)	Dark	--zui-popover-gradient-blue-from
--zui-popover-gradient-blue-to-dark	oklch(43.8% 0.218 303.724)	Dark	--zui-popover-gradient-blue-to
--zui-popover-gradient-green-fg-dark	#ffffff	Dark	--zui-popover-gradient-green-fg
--zui-popover-gradient-green-from-dark	oklch(44.8% 0.119 151.328)	Dark	--zui-popover-gradient-green-from
--zui-popover-gradient-green-to-dark	oklch(45.3% 0.124 130.933)	Dark	--zui-popover-gradient-green-to
--zui-popover-gradient-indigo-fg-dark	#ffffff	Dark	--zui-popover-gradient-indigo-fg
--zui-popover-gradient-indigo-from-dark	oklch(39.8% 0.195 277.366)	Dark	--zui-popover-gradient-indigo-from
--zui-popover-gradient-indigo-to-dark	oklch(43.8% 0.218 303.724)	Dark	--zui-popover-gradient-indigo-to
--zui-popover-gradient-orange-fg-dark	#ffffff	Dark	--zui-popover-gradient-orange-fg
--zui-popover-gradient-orange-from-dark	oklch(47% 0.157 37.304)	Dark	--zui-popover-gradient-orange-from
--zui-popover-gradient-orange-to-dark	oklch(44.4% 0.177 26.899)	Dark	--zui-popover-gradient-orange-to
--zui-popover-gradient-pink-fg-dark	#ffffff	Dark	--zui-popover-gradient-pink-fg
--zui-popover-gradient-pink-from-dark	oklch(45.9% 0.187 3.815)	Dark	--zui-popover-gradient-pink-from
--zui-popover-gradient-pink-to-dark	oklch(45.5% 0.188 13.697)	Dark	--zui-popover-gradient-pink-to
--zui-popover-gradient-purple-fg-dark	#ffffff	Dark	--zui-popover-gradient-purple-fg
--zui-popover-gradient-purple-from-dark	oklch(43.8% 0.218 303.724)	Dark	--zui-popover-gradient-purple-from
--zui-popover-gradient-purple-to-dark	oklch(45.9% 0.187 3.815)	Dark	--zui-popover-gradient-purple-to
--zui-popover-gradient-red-fg-dark	#ffffff	Dark	--zui-popover-gradient-red-fg
--zui-popover-gradient-red-from-dark	oklch(44.4% 0.177 26.899)	Dark	--zui-popover-gradient-red-from
--zui-popover-gradient-red-to-dark	oklch(45.9% 0.187 3.815)	Dark	--zui-popover-gradient-red-to
--zui-popover-gradient-teal-fg-dark	#ffffff	Dark	--zui-popover-gradient-teal-fg
--zui-popover-gradient-teal-from-dark	oklch(43.7% 0.078 188.216)	Dark	--zui-popover-gradient-teal-from
--zui-popover-gradient-teal-to-dark	oklch(45% 0.085 224.283)	Dark	--zui-popover-gradient-teal-to
--zui-popover-gradient-yellow-fg-dark	#ffffff	Dark	--zui-popover-gradient-yellow-fg
--zui-popover-gradient-yellow-from-dark	oklch(47.6% 0.114 61.907)	Dark	--zui-popover-gradient-yellow-from
--zui-popover-gradient-yellow-to-dark	oklch(47% 0.157 37.304)	Dark	--zui-popover-gradient-yellow-to
--zui-popover-green-bg-dark	oklch(26.6% 0.065 152.934)	Dark	--zui-popover-green-bg
--zui-popover-green-border-dark	oklch(44.8% 0.119 151.328 / 0.35)	Dark	--zui-popover-green-border
--zui-popover-green-fg-dark	oklch(92.5% 0.084 155.995)	Dark	--zui-popover-green-fg
--zui-popover-indigo-bg-dark	oklch(25.7% 0.09 281.288)	Dark	--zui-popover-indigo-bg
--zui-popover-indigo-border-dark	oklch(39.8% 0.195 277.366 / 0.35)	Dark	--zui-popover-indigo-border
--zui-popover-indigo-fg-dark	oklch(87% 0.065 274.039)	Dark	--zui-popover-indigo-fg
--zui-popover-orange-bg-dark	oklch(26.6% 0.079 36.259)	Dark	--zui-popover-orange-bg
--zui-popover-orange-border-dark	oklch(47% 0.157 37.304 / 0.35)	Dark	--zui-popover-orange-border
--zui-popover-orange-fg-dark	oklch(90.1% 0.076 70.697)	Dark	--zui-popover-orange-fg
--zui-popover-outline-bg-dark	#000000	Dark	--zui-popover-outline-bg
--zui-popover-outline-border-dark	oklch(87.2% 0.01 258.338)	Dark	--zui-popover-outline-border
--zui-popover-outline-fg-dark	#ffffff	Dark	--zui-popover-outline-fg
--zui-popover-pink-bg-dark	oklch(28.4% 0.109 3.907)	Dark	--zui-popover-pink-bg
--zui-popover-pink-border-dark	oklch(45.9% 0.187 3.815 / 0.35)	Dark	--zui-popover-pink-border
--zui-popover-pink-fg-dark	oklch(89.9% 0.061 343.231)	Dark	--zui-popover-pink-fg
--zui-popover-purple-bg-dark	oklch(29.1% 0.149 302.717)	Dark	--zui-popover-purple-bg
--zui-popover-purple-border-dark	oklch(43.8% 0.218 303.724 / 0.35)	Dark	--zui-popover-purple-border
--zui-popover-purple-fg-dark	oklch(90.2% 0.063 306.703)	Dark	--zui-popover-purple-fg
--zui-popover-rose-bg-dark	oklch(27.1% 0.105 12.094)	Dark	--zui-popover-rose-bg
--zui-popover-rose-border-dark	oklch(45.5% 0.188 13.697 / 0.35)	Dark	--zui-popover-rose-border
--zui-popover-rose-fg-dark	oklch(89.2% 0.058 10.001)	Dark	--zui-popover-rose-fg
--zui-popover-sky-bg-dark	oklch(29.3% 0.066 243.157)	Dark	--zui-popover-sky-bg
--zui-popover-sky-border-dark	oklch(44.3% 0.11 240.79 / 0.35)	Dark	--zui-popover-sky-border
--zui-popover-sky-fg-dark	oklch(90.1% 0.058 230.902)	Dark	--zui-popover-sky-fg
--zui-popover-teal-bg-dark	oklch(27.7% 0.046 192.524)	Dark	--zui-popover-teal-bg
--zui-popover-teal-border-dark	oklch(43.7% 0.078 188.216 / 0.35)	Dark	--zui-popover-teal-border
--zui-popover-teal-fg-dark	oklch(91% 0.096 180.426)	Dark	--zui-popover-teal-fg
--zui-popover-yellow-bg-dark	oklch(28.6% 0.066 53.813)	Dark	--zui-popover-yellow-bg
--zui-popover-yellow-border-dark	oklch(47.6% 0.114 61.907 / 0.35)	Dark	--zui-popover-yellow-border
--zui-popover-yellow-fg-dark	oklch(94.5% 0.129 101.54)	Dark	--zui-popover-yellow-fg

Progress

Override these progress variables on :root, a theme selector, or a component wrapper.

54 tokens27 dark

Variable	Fallback	Theme	Pair
--zui-progress-fg	oklch(20.8% 0.042 265.755)	Light	--zui-progress-fg-dark
--zui-progress-default-fill	oklch(20.8% 0.042 265.755)	Light	--zui-progress-default-fill-dark
--zui-progress-secondary-fill	oklch(44.6% 0.043 257.281)	Light	--zui-progress-secondary-fill-dark
--zui-progress-destructive-fill	oklch(45.5% 0.188 13.697)	Light	--zui-progress-destructive-fill-dark
--zui-progress-emerald-fill	oklch(43.2% 0.095 166.913)	Light	--zui-progress-emerald-fill-dark
--zui-progress-indigo-fill	oklch(39.8% 0.195 277.366)	Light	--zui-progress-indigo-fill-dark
--zui-progress-purple-fill	oklch(43.8% 0.218 303.724)	Light	--zui-progress-purple-fill-dark
--zui-progress-pink-fill	oklch(45.9% 0.187 3.815)	Light	--zui-progress-pink-fill-dark
--zui-progress-rose-fill	oklch(45.5% 0.188 13.697)	Light	--zui-progress-rose-fill-dark
--zui-progress-sky-fill	oklch(44.3% 0.11 240.79)	Light	--zui-progress-sky-fill-dark
--zui-progress-teal-fill	oklch(43.7% 0.078 188.216)	Light	--zui-progress-teal-fill-dark
--zui-progress-yellow-fill	oklch(47.6% 0.114 61.907)	Light	--zui-progress-yellow-fill-dark
--zui-progress-orange-fill	oklch(47% 0.157 37.304)	Light	--zui-progress-orange-fill-dark
--zui-progress-outline-fill	oklch(52% 0.105 223.128)	Light	--zui-progress-outline-fill-dark
--zui-progress-ghost-fill	oklch(27.9% 0.041 260.031)	Light	--zui-progress-ghost-fill-dark
--zui-progress-glass-fill	oklch(20.8% 0.042 265.755)	Light	--zui-progress-glass-fill-dark
--zui-progress-gradient-blue-fill	linear-gradient(90deg,oklch(62.3% 0.214 259.815),oklch(62.7% 0.265 303.9))	Light	--zui-progress-gradient-blue-fill-dark
--zui-progress-gradient-green-fill	linear-gradient(90deg,oklch(72.3% 0.219 149.579),oklch(76.8% 0.233 130.85))	Light	--zui-progress-gradient-green-fill-dark
--zui-progress-gradient-red-fill	linear-gradient(90deg,oklch(63.7% 0.237 25.331),oklch(65.6% 0.241 354.308))	Light	--zui-progress-gradient-red-fill-dark
--zui-progress-gradient-yellow-fill	linear-gradient(90deg,oklch(79.5% 0.184 86.047),oklch(70.5% 0.213 47.604))	Light	--zui-progress-gradient-yellow-fill-dark
--zui-progress-gradient-purple-fill	linear-gradient(90deg,oklch(62.7% 0.265 303.9),oklch(65.6% 0.241 354.308))	Light	--zui-progress-gradient-purple-fill-dark
--zui-progress-gradient-teal-fill	linear-gradient(90deg,oklch(70.4% 0.14 182.503),oklch(71.5% 0.143 215.221))	Light	--zui-progress-gradient-teal-fill-dark
--zui-progress-gradient-indigo-fill	linear-gradient(90deg,oklch(58.5% 0.233 277.117),oklch(62.7% 0.265 303.9))	Light	--zui-progress-gradient-indigo-fill-dark
--zui-progress-gradient-pink-fill	linear-gradient(90deg,oklch(65.6% 0.241 354.308),oklch(64.5% 0.246 16.439))	Light	--zui-progress-gradient-pink-fill-dark
--zui-progress-gradient-orange-fill	linear-gradient(90deg,oklch(70.5% 0.213 47.604),oklch(63.7% 0.237 25.331))	Light	--zui-progress-gradient-orange-fill-dark
--zui-progress-track-bg	#0000001a	Light	--zui-progress-track-bg-dark
--zui-progress-bar-bg-striped	repeating-linear-gradient(135deg,rgba(255,255,255,0.28) 0,rgba(255,255,255,0.28) 10px,transparent 10px,transparent 20px)	Light	--zui-progress-bar-bg-striped-dark
--zui-progress-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-progress-fg
--zui-progress-default-fill-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-progress-default-fill
--zui-progress-secondary-fill-dark	Override with your dark theme value	Dark	--zui-progress-secondary-fill
--zui-progress-destructive-fill-dark	Override with your dark theme value	Dark	--zui-progress-destructive-fill
--zui-progress-emerald-fill-dark	Override with your dark theme value	Dark	--zui-progress-emerald-fill
--zui-progress-indigo-fill-dark	Override with your dark theme value	Dark	--zui-progress-indigo-fill
--zui-progress-purple-fill-dark	Override with your dark theme value	Dark	--zui-progress-purple-fill
--zui-progress-pink-fill-dark	Override with your dark theme value	Dark	--zui-progress-pink-fill
--zui-progress-rose-fill-dark	Override with your dark theme value	Dark	--zui-progress-rose-fill
--zui-progress-sky-fill-dark	Override with your dark theme value	Dark	--zui-progress-sky-fill
--zui-progress-teal-fill-dark	Override with your dark theme value	Dark	--zui-progress-teal-fill
--zui-progress-yellow-fill-dark	Override with your dark theme value	Dark	--zui-progress-yellow-fill
--zui-progress-orange-fill-dark	Override with your dark theme value	Dark	--zui-progress-orange-fill
--zui-progress-outline-fill-dark	Override with your dark theme value	Dark	--zui-progress-outline-fill
--zui-progress-ghost-fill-dark	Override with your dark theme value	Dark	--zui-progress-ghost-fill
--zui-progress-glass-fill-dark	Override with your dark theme value	Dark	--zui-progress-glass-fill
--zui-progress-gradient-blue-fill-dark	Override with your dark theme value	Dark	--zui-progress-gradient-blue-fill
--zui-progress-gradient-green-fill-dark	Override with your dark theme value	Dark	--zui-progress-gradient-green-fill
--zui-progress-gradient-red-fill-dark	Override with your dark theme value	Dark	--zui-progress-gradient-red-fill
--zui-progress-gradient-yellow-fill-dark	Override with your dark theme value	Dark	--zui-progress-gradient-yellow-fill
--zui-progress-gradient-purple-fill-dark	Override with your dark theme value	Dark	--zui-progress-gradient-purple-fill
--zui-progress-gradient-teal-fill-dark	Override with your dark theme value	Dark	--zui-progress-gradient-teal-fill
--zui-progress-gradient-indigo-fill-dark	Override with your dark theme value	Dark	--zui-progress-gradient-indigo-fill
--zui-progress-gradient-pink-fill-dark	Override with your dark theme value	Dark	--zui-progress-gradient-pink-fill
--zui-progress-gradient-orange-fill-dark	Override with your dark theme value	Dark	--zui-progress-gradient-orange-fill
--zui-progress-track-bg-dark	Override with your dark theme value	Dark	--zui-progress-track-bg
--zui-progress-bar-bg-striped-dark	Override with your dark theme value	Dark	--zui-progress-bar-bg-striped

RadioGroup

Override these radio group variables on :root, a theme selector, or a component wrapper.

27 tokens4 dark

Variable	Fallback	Theme	Pair
--zui-radio-label-fg	oklch(20.8% 0.042 265.755)	Light	--zui-radio-label-fg-dark
--zui-radio-border	#0000004d	Light	--zui-radio-border-dark
--zui-radio-bg	transparent	Shared	none
--zui-radio-ring-focus	oklch(44.6% 0.043 257.281 / 0.7)	Light	--zui-radio-ring-focus-dark
--zui-radio-ring-offset-focus	oklch(98.4% 0.003 247.858)	Light	--zui-radio-ring-offset-focus-dark
--zui-radio-default-border-checked	oklch(44.6% 0.043 257.281)	Shared	none
--zui-radio-default-indicator-bg	oklch(44.6% 0.043 257.281)	Shared	none
--zui-radio-success-border-checked	oklch(59.6% 0.145 163.225)	Shared	none
--zui-radio-success-indicator-bg	oklch(59.6% 0.145 163.225)	Shared	none
--zui-radio-warning-border-checked	oklch(68.1% 0.162 75.834)	Shared	none
--zui-radio-warning-indicator-bg	oklch(68.1% 0.162 75.834)	Shared	none
--zui-radio-error-border-checked	oklch(58.6% 0.253 17.585)	Shared	none
--zui-radio-error-indicator-bg	oklch(58.6% 0.253 17.585)	Shared	none
--zui-radio-info-border-checked	oklch(54.6% 0.245 262.881)	Shared	none
--zui-radio-info-indicator-bg	oklch(54.6% 0.245 262.881)	Shared	none
--zui-radio-violet-border-checked	oklch(54.1% 0.281 293.009)	Shared	none
--zui-radio-violet-indicator-bg	oklch(54.1% 0.281 293.009)	Shared	none
--zui-radio-amber-border-checked	oklch(66.6% 0.179 58.318)	Shared	none
--zui-radio-amber-indicator-bg	oklch(66.6% 0.179 58.318)	Shared	none
--zui-radio-pink-border-checked	oklch(59.2% 0.249 0.584)	Shared	none
--zui-radio-pink-indicator-bg	oklch(59.2% 0.249 0.584)	Shared	none
--zui-radio-indigo-border-checked	oklch(51.1% 0.262 276.966)	Shared	none
--zui-radio-indigo-indicator-bg	oklch(51.1% 0.262 276.966)	Shared	none
--zui-radio-label-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-radio-label-fg
--zui-radio-border-dark	#ffffff4d	Dark	--zui-radio-border
--zui-radio-ring-focus-dark	oklch(86.9% 0.022 252.894 / 0.7)	Dark	--zui-radio-ring-focus
--zui-radio-ring-offset-focus-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-radio-ring-offset-focus

Rating

Override these rating variables on :root, a theme selector, or a component wrapper. Structural variables drive the label, hint, empty icon, focus ring, and error text; each appearance sets the active (filled) icon color.

66 tokens32 dark

Variable	Fallback	Theme	Pair
--zui-rating-label-fg	oklch(20.8% 0.042 265.755)	Light	--zui-rating-label-fg-dark
--zui-rating-hint-fg	oklch(55.4% 0.046 257.417)	Light	--zui-rating-hint-fg-dark
--zui-rating-error-fg	oklch(58.6% 0.253 17.585)	Light	--zui-rating-error-fg-dark
--zui-rating-empty	oklch(86.9% 0.022 252.894)	Light	--zui-rating-empty-dark
--zui-rating-gap	0.25rem	Light	--zui-rating-gap-dark
--zui-rating-ring-focus	oklch(54.6% 0.245 262.881 / 0.32)	Light	--zui-rating-ring-focus-dark
--zui-rating-ring-offset-focus	#ffffff	Light	--zui-rating-ring-offset-focus-dark
--zui-rating-default-active	oklch(20.8% 0.042 265.755)	Light	--zui-rating-default-active-dark
--zui-rating-secondary-active	oklch(44.6% 0.043 257.281)	Light	--zui-rating-secondary-active-dark
--zui-rating-destructive-active	oklch(58.6% 0.253 17.585)	Light	--zui-rating-destructive-active-dark
--zui-rating-outline-active	oklch(44.6% 0.043 257.281)	Light	--zui-rating-outline-active-dark
--zui-rating-ghost-active	oklch(37.2% 0.044 257.287)	Light	--zui-rating-ghost-active-dark
--zui-rating-glass-active	oklch(54.6% 0.245 262.881)	Light	--zui-rating-glass-active-dark
--zui-rating-emerald-active	oklch(59.6% 0.145 163.225)	Light	--zui-rating-emerald-active-dark
--zui-rating-indigo-active	oklch(51.1% 0.262 276.966)	Light	--zui-rating-indigo-active-dark
--zui-rating-purple-active	oklch(55.8% 0.288 302.321)	Light	--zui-rating-purple-active-dark
--zui-rating-pink-active	oklch(59.2% 0.249 0.584)	Light	--zui-rating-pink-active-dark
--zui-rating-rose-active	oklch(58.6% 0.253 17.585)	Light	--zui-rating-rose-active-dark
--zui-rating-sky-active	oklch(62.3% 0.214 259.815)	Light	--zui-rating-sky-active-dark
--zui-rating-teal-active	oklch(60% 0.118 184.704)	Light	--zui-rating-teal-active-dark
--zui-rating-yellow-active	oklch(79.5% 0.184 86.047)	Light	--zui-rating-yellow-active-dark
--zui-rating-orange-active	oklch(64.6% 0.222 41.116)	Light	--zui-rating-orange-active-dark
--zui-rating-gray-active	oklch(55.1% 0.027 264.364)	Light	--zui-rating-gray-active-dark
--zui-rating-amber-active	oklch(76.9% 0.188 70.08)	Light	--zui-rating-amber-active-dark
--zui-rating-violet-active	oklch(54.1% 0.281 293.009)	Light	--zui-rating-violet-active-dark
--zui-rating-gradient-blue-active	oklch(54.6% 0.245 262.881)	Light	--zui-rating-gradient-blue-active-dark
--zui-rating-gradient-green-active	oklch(62.7% 0.194 149.214)	Light	--zui-rating-gradient-green-active-dark
--zui-rating-gradient-red-active	oklch(57.7% 0.245 27.325)	Light	--zui-rating-gradient-red-active-dark
--zui-rating-gradient-yellow-active	oklch(79.5% 0.184 86.047)	Light	--zui-rating-gradient-yellow-active-dark
--zui-rating-gradient-purple-active	oklch(62.7% 0.265 303.9)	Light	--zui-rating-gradient-purple-active-dark
--zui-rating-gradient-teal-active	oklch(60% 0.118 184.704)	Light	--zui-rating-gradient-teal-active-dark
--zui-rating-gradient-indigo-active	oklch(51.1% 0.262 276.966)	Light	--zui-rating-gradient-indigo-active-dark
--zui-rating-gradient-pink-active	oklch(59.2% 0.249 0.584)	Shared	none
--zui-rating-gradient-orange-active	oklch(64.6% 0.222 41.116)	Shared	none
--zui-rating-label-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-rating-label-fg
--zui-rating-empty-dark	oklch(37.2% 0.044 257.287)	Dark	--zui-rating-empty
--zui-rating-hint-fg-dark	Override with your dark theme value	Dark	--zui-rating-hint-fg
--zui-rating-error-fg-dark	Override with your dark theme value	Dark	--zui-rating-error-fg
--zui-rating-gap-dark	Override with your dark theme value	Dark	--zui-rating-gap
--zui-rating-ring-focus-dark	Override with your dark theme value	Dark	--zui-rating-ring-focus
--zui-rating-ring-offset-focus-dark	Override with your dark theme value	Dark	--zui-rating-ring-offset-focus
--zui-rating-default-active-dark	Override with your dark theme value	Dark	--zui-rating-default-active
--zui-rating-secondary-active-dark	Override with your dark theme value	Dark	--zui-rating-secondary-active
--zui-rating-destructive-active-dark	Override with your dark theme value	Dark	--zui-rating-destructive-active
--zui-rating-outline-active-dark	Override with your dark theme value	Dark	--zui-rating-outline-active
--zui-rating-ghost-active-dark	Override with your dark theme value	Dark	--zui-rating-ghost-active
--zui-rating-glass-active-dark	Override with your dark theme value	Dark	--zui-rating-glass-active
--zui-rating-emerald-active-dark	Override with your dark theme value	Dark	--zui-rating-emerald-active
--zui-rating-indigo-active-dark	Override with your dark theme value	Dark	--zui-rating-indigo-active
--zui-rating-purple-active-dark	Override with your dark theme value	Dark	--zui-rating-purple-active
--zui-rating-pink-active-dark	Override with your dark theme value	Dark	--zui-rating-pink-active
--zui-rating-rose-active-dark	Override with your dark theme value	Dark	--zui-rating-rose-active
--zui-rating-sky-active-dark	Override with your dark theme value	Dark	--zui-rating-sky-active
--zui-rating-teal-active-dark	Override with your dark theme value	Dark	--zui-rating-teal-active
--zui-rating-yellow-active-dark	Override with your dark theme value	Dark	--zui-rating-yellow-active
--zui-rating-orange-active-dark	Override with your dark theme value	Dark	--zui-rating-orange-active
--zui-rating-gray-active-dark	Override with your dark theme value	Dark	--zui-rating-gray-active
--zui-rating-amber-active-dark	Override with your dark theme value	Dark	--zui-rating-amber-active
--zui-rating-violet-active-dark	Override with your dark theme value	Dark	--zui-rating-violet-active
--zui-rating-gradient-blue-active-dark	Override with your dark theme value	Dark	--zui-rating-gradient-blue-active
--zui-rating-gradient-green-active-dark	Override with your dark theme value	Dark	--zui-rating-gradient-green-active
--zui-rating-gradient-red-active-dark	Override with your dark theme value	Dark	--zui-rating-gradient-red-active
--zui-rating-gradient-yellow-active-dark	Override with your dark theme value	Dark	--zui-rating-gradient-yellow-active
--zui-rating-gradient-purple-active-dark	Override with your dark theme value	Dark	--zui-rating-gradient-purple-active
--zui-rating-gradient-teal-active-dark	Override with your dark theme value	Dark	--zui-rating-gradient-teal-active
--zui-rating-gradient-indigo-active-dark	Override with your dark theme value	Dark	--zui-rating-gradient-indigo-active

ScrollArea

Override these ScrollArea variables on :root, a theme selector, or a component wrapper.

22 tokens8 dark

Variable	Fallback	Theme	Pair
--zui-scroll-area-thumb	#94a3b8	Light	--zui-scroll-area-thumb-dark
--zui-scroll-area-thumb-border	#f8fafc	Light	--zui-scroll-area-thumb-border-dark
--zui-scroll-area-track	#e2e8f0	Light	--zui-scroll-area-track-dark
--zui-scroll-area-size	0.625rem	Light	--zui-scroll-area-size-dark
--zui-scroll-area-ring-focus	oklch(54.6% 0.245 262.881 / 0.28)	Light	--zui-scroll-area-ring-focus-dark
--zui-scroll-area-ring-offset-focus	#ffffff	Light	--zui-scroll-area-ring-offset-focus-dark
--zui-scroll-area-outline-border	#cbd5e1	Light	--zui-scroll-area-outline-border-dark
--zui-scroll-area-glass-border	#ffffff80	Light	--zui-scroll-area-glass-border-dark
--zui-scroll-area-glass-bg	#ffffff99	Shared	none
--zui-scroll-area-sky-border	oklch(62.3% 0.214 259.815 / 0.35)	Shared	none
--zui-scroll-area-emerald-border	oklch(59.6% 0.145 163.225 / 0.35)	Shared	none
--zui-scroll-area-rose-border	oklch(58.6% 0.253 17.585 / 0.3)	Shared	none
--zui-scroll-area-amber-border	oklch(76.9% 0.188 70.08 / 0.35)	Shared	none
--zui-scroll-area-violet-border	oklch(60.6% 0.25 292.717 / 0.35)	Shared	none
--zui-scroll-area-thumb-dark	#64748b	Dark	--zui-scroll-area-thumb
--zui-scroll-area-thumb-border-dark	#020617	Dark	--zui-scroll-area-thumb-border
--zui-scroll-area-track-dark	Override with your dark theme value	Dark	--zui-scroll-area-track
--zui-scroll-area-size-dark	Override with your dark theme value	Dark	--zui-scroll-area-size
--zui-scroll-area-ring-focus-dark	Override with your dark theme value	Dark	--zui-scroll-area-ring-focus
--zui-scroll-area-ring-offset-focus-dark	Override with your dark theme value	Dark	--zui-scroll-area-ring-offset-focus
--zui-scroll-area-outline-border-dark	Override with your dark theme value	Dark	--zui-scroll-area-outline-border
--zui-scroll-area-glass-border-dark	Override with your dark theme value	Dark	--zui-scroll-area-glass-border

Search

SearchBar composes the Input recipe, so these are the zui variables available through the search input.

107 tokens42 dark

Variable	Fallback	Theme	Pair
--zui-input-bg	#0000000d	Light	--zui-input-bg-dark
--zui-input-fg	oklch(20.8% 0.042 265.755)	Light	--zui-input-fg-dark
--zui-input-shadow	0 1px 2px rgba(15,23,42,0.08)	Light	--zui-input-shadow-dark
--zui-input-ring-offset	oklch(98.4% 0.003 247.858)	Light	--zui-input-ring-offset-dark
--zui-input-placeholder-fg	oklch(55.4% 0.046 257.417)	Light	--zui-input-placeholder-fg-dark
--zui-input-bg-read-only	#00000008	Light	--zui-input-bg-read-only-dark
--zui-input-file-border	#0000001a	Light	--zui-input-file-border-dark
--zui-input-file-bg	#0000001a	Light	--zui-input-file-bg-dark
--zui-input-file-fg	oklch(37.2% 0.044 257.287)	Light	--zui-input-file-fg-dark
--zui-input-file-bg-hover	#00000026	Light	--zui-input-file-bg-hover-dark
--zui-input-file-fg-hover	#ffffff	Light	--zui-input-file-fg-hover-dark
--zui-input-checkbox-border	#0000004d	Light	--zui-input-checkbox-border-dark
--zui-input-checkbox-bg	transparent	Light	--zui-input-checkbox-bg-dark
--zui-input-radio-border	#0000004d	Light	--zui-input-radio-border-dark
--zui-input-radio-bg	transparent	Light	--zui-input-radio-bg-dark
--zui-input-radio-bg-read-only	transparent	Light	--zui-input-radio-bg-read-only-dark
--zui-input-radio-ring	#00000033	Light	--zui-input-radio-ring-dark
--zui-input-radio-ring-offset	oklch(98.4% 0.003 247.858)	Light	--zui-input-radio-ring-offset-dark
--zui-input-default-border	#0000001a	Light	--zui-input-default-border-dark
--zui-input-default-border-focus	#00000033	Light	--zui-input-default-border-focus-dark
--zui-input-warning-border	oklch(79.5% 0.184 86.047 / 0.8)	Light	--zui-input-warning-border-dark
--zui-input-warning-fg	oklch(28.6% 0.066 53.813)	Light	--zui-input-warning-fg-dark
--zui-input-warning-placeholder-fg	oklch(47.6% 0.114 61.907)	Light	--zui-input-warning-placeholder-fg-dark
--zui-input-warning-border-focus	oklch(68.1% 0.162 75.834)	Light	--zui-input-warning-border-focus-dark
--zui-input-warning-ring-focus	oklch(85.2% 0.199 91.936 / 0.8)	Light	--zui-input-warning-ring-focus-dark
--zui-input-error-border	oklch(64.5% 0.246 16.439 / 0.8)	Light	--zui-input-error-border-dark
--zui-input-error-fg	oklch(27.1% 0.105 12.094)	Light	--zui-input-error-fg-dark
--zui-input-error-placeholder-fg	oklch(45.5% 0.188 13.697)	Light	--zui-input-error-placeholder-fg-dark
--zui-input-error-border-focus	oklch(58.6% 0.253 17.585)	Light	--zui-input-error-border-focus-dark
--zui-input-error-ring-focus	oklch(71.2% 0.194 13.428 / 0.8)	Light	--zui-input-error-ring-focus-dark
--zui-input-success-border	oklch(69.6% 0.17 162.48 / 0.7)	Light	--zui-input-success-border-dark
--zui-input-success-fg	oklch(26.2% 0.051 172.552)	Light	--zui-input-success-fg-dark
--zui-input-success-placeholder-fg	oklch(43.2% 0.095 166.913)	Light	--zui-input-success-placeholder-fg-dark
--zui-input-success-border-focus	oklch(59.6% 0.145 163.225)	Light	--zui-input-success-border-focus-dark
--zui-input-success-ring-focus	oklch(76.5% 0.177 163.223 / 0.8)	Light	--zui-input-success-ring-focus-dark
--zui-input-info-border	oklch(62.3% 0.214 259.815 / 0.8)	Light	--zui-input-info-border-dark
--zui-input-info-fg	oklch(28.2% 0.091 267.935)	Light	--zui-input-info-fg-dark
--zui-input-info-placeholder-fg	oklch(42.4% 0.199 265.638)	Light	--zui-input-info-placeholder-fg-dark
--zui-input-info-border-focus	oklch(54.6% 0.245 262.881)	Light	--zui-input-info-border-focus-dark
--zui-input-info-ring-focus	oklch(70.7% 0.165 254.624 / 0.8)	Light	--zui-input-info-ring-focus-dark
--zui-input-violet-border	oklch(60.6% 0.25 292.717 / 0.8)	Light	--zui-input-violet-border-dark
--zui-input-violet-fg	oklch(28.3% 0.141 291.089)	Light	--zui-input-violet-fg-dark
--zui-input-violet-placeholder-fg	oklch(43.2% 0.232 292.759)	Shared	none
--zui-input-violet-border-focus	oklch(54.1% 0.281 293.009)	Shared	none
--zui-input-violet-ring-focus	oklch(70.2% 0.183 293.541 / 0.8)	Shared	none
--zui-input-amber-border	oklch(76.9% 0.188 70.08 / 0.8)	Shared	none
--zui-input-amber-fg	oklch(27.9% 0.077 45.635)	Shared	none
--zui-input-amber-placeholder-fg	oklch(47.3% 0.137 46.201)	Shared	none
--zui-input-amber-border-focus	oklch(66.6% 0.179 58.318)	Shared	none
--zui-input-amber-ring-focus	oklch(82.8% 0.189 84.429 / 0.8)	Shared	none
--zui-input-pink-border	oklch(65.6% 0.241 354.308 / 0.8)	Shared	none
--zui-input-pink-fg	oklch(28.4% 0.109 3.907)	Shared	none
--zui-input-pink-placeholder-fg	oklch(45.9% 0.187 3.815)	Shared	none
--zui-input-pink-border-focus	oklch(59.2% 0.249 0.584)	Shared	none
--zui-input-pink-ring-focus	oklch(71.8% 0.202 349.761 / 0.8)	Shared	none
--zui-input-indigo-border	oklch(58.5% 0.233 277.117 / 0.8)	Shared	none
--zui-input-indigo-fg	oklch(25.7% 0.09 281.288)	Shared	none
--zui-input-indigo-placeholder-fg	oklch(39.8% 0.195 277.366)	Shared	none
--zui-input-indigo-border-focus	oklch(51.1% 0.262 276.966)	Shared	none
--zui-input-indigo-ring-focus	oklch(67.3% 0.182 276.935 / 0.8)	Shared	none
--zui-input-orange-border	oklch(70.5% 0.213 47.604 / 0.8)	Shared	none
--zui-input-orange-fg	oklch(26.6% 0.079 36.259)	Shared	none
--zui-input-orange-placeholder-fg	oklch(47% 0.157 37.304)	Shared	none
--zui-input-orange-border-focus	oklch(64.6% 0.222 41.116)	Shared	none
--zui-input-orange-ring-focus	oklch(75% 0.183 55.934 / 0.8)	Shared	none
--zui-input-bg-dark	#ffffff0d	Dark	--zui-input-bg
--zui-input-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-input-fg
--zui-input-shadow-dark	Override with your dark theme value	Dark	--zui-input-shadow
--zui-input-ring-offset-dark	Override with your dark theme value	Dark	--zui-input-ring-offset
--zui-input-placeholder-fg-dark	Override with your dark theme value	Dark	--zui-input-placeholder-fg
--zui-input-bg-read-only-dark	Override with your dark theme value	Dark	--zui-input-bg-read-only
--zui-input-file-border-dark	Override with your dark theme value	Dark	--zui-input-file-border
--zui-input-file-bg-dark	Override with your dark theme value	Dark	--zui-input-file-bg
--zui-input-file-fg-dark	Override with your dark theme value	Dark	--zui-input-file-fg
--zui-input-file-bg-hover-dark	Override with your dark theme value	Dark	--zui-input-file-bg-hover
--zui-input-file-fg-hover-dark	Override with your dark theme value	Dark	--zui-input-file-fg-hover
--zui-input-checkbox-border-dark	Override with your dark theme value	Dark	--zui-input-checkbox-border
--zui-input-checkbox-bg-dark	Override with your dark theme value	Dark	--zui-input-checkbox-bg
--zui-input-radio-border-dark	Override with your dark theme value	Dark	--zui-input-radio-border
--zui-input-radio-bg-dark	Override with your dark theme value	Dark	--zui-input-radio-bg
--zui-input-radio-bg-read-only-dark	Override with your dark theme value	Dark	--zui-input-radio-bg-read-only
--zui-input-radio-ring-dark	Override with your dark theme value	Dark	--zui-input-radio-ring
--zui-input-radio-ring-offset-dark	Override with your dark theme value	Dark	--zui-input-radio-ring-offset
--zui-input-default-border-dark	Override with your dark theme value	Dark	--zui-input-default-border
--zui-input-default-border-focus-dark	Override with your dark theme value	Dark	--zui-input-default-border-focus
--zui-input-warning-border-dark	Override with your dark theme value	Dark	--zui-input-warning-border
--zui-input-warning-fg-dark	Override with your dark theme value	Dark	--zui-input-warning-fg
--zui-input-warning-placeholder-fg-dark	Override with your dark theme value	Dark	--zui-input-warning-placeholder-fg
--zui-input-warning-border-focus-dark	Override with your dark theme value	Dark	--zui-input-warning-border-focus
--zui-input-warning-ring-focus-dark	Override with your dark theme value	Dark	--zui-input-warning-ring-focus
--zui-input-error-border-dark	Override with your dark theme value	Dark	--zui-input-error-border
--zui-input-error-fg-dark	Override with your dark theme value	Dark	--zui-input-error-fg
--zui-input-error-placeholder-fg-dark	Override with your dark theme value	Dark	--zui-input-error-placeholder-fg
--zui-input-error-border-focus-dark	Override with your dark theme value	Dark	--zui-input-error-border-focus
--zui-input-error-ring-focus-dark	Override with your dark theme value	Dark	--zui-input-error-ring-focus
--zui-input-success-border-dark	Override with your dark theme value	Dark	--zui-input-success-border
--zui-input-success-fg-dark	Override with your dark theme value	Dark	--zui-input-success-fg
--zui-input-success-placeholder-fg-dark	Override with your dark theme value	Dark	--zui-input-success-placeholder-fg
--zui-input-success-border-focus-dark	Override with your dark theme value	Dark	--zui-input-success-border-focus
--zui-input-success-ring-focus-dark	Override with your dark theme value	Dark	--zui-input-success-ring-focus
--zui-input-info-border-dark	Override with your dark theme value	Dark	--zui-input-info-border
--zui-input-info-fg-dark	Override with your dark theme value	Dark	--zui-input-info-fg
--zui-input-info-placeholder-fg-dark	Override with your dark theme value	Dark	--zui-input-info-placeholder-fg
--zui-input-info-border-focus-dark	Override with your dark theme value	Dark	--zui-input-info-border-focus
--zui-input-info-ring-focus-dark	Override with your dark theme value	Dark	--zui-input-info-ring-focus
--zui-input-violet-border-dark	Override with your dark theme value	Dark	--zui-input-violet-border
--zui-input-violet-fg-dark	Override with your dark theme value	Dark	--zui-input-violet-fg

Select

Override these select variables on :root, a theme selector, or a component wrapper.

287 tokens125 dark

Skeleton

Override these skeleton variables on :root, a theme selector, or a component wrapper.

57 tokens22 dark

Variable	Fallback	Theme	Pair
--zui-skeleton-bg	#0000001a	Light	--zui-skeleton-bg-dark
--zui-skeleton-fg	transparent	Light	--zui-skeleton-fg-dark
--zui-skeleton-default-bg	#0000001a	Light	--zui-skeleton-default-bg-dark
--zui-skeleton-subtle-bg	#00000012	Light	--zui-skeleton-subtle-bg-dark
--zui-skeleton-muted-bg	oklch(92.9% 0.013 255.508 / 0.8)	Light	--zui-skeleton-muted-bg-dark
--zui-skeleton-sky-bg	oklch(68.5% 0.169 237.323 / 0.1)	Light	--zui-skeleton-sky-bg-dark
--zui-skeleton-rose-bg	oklch(64.5% 0.246 16.439 / 0.1)	Light	--zui-skeleton-rose-bg-dark
--zui-skeleton-purple-bg	oklch(62.7% 0.265 303.9 / 0.1)	Light	--zui-skeleton-purple-bg-dark
--zui-skeleton-pink-bg	oklch(65.6% 0.241 354.308 / 0.1)	Light	--zui-skeleton-pink-bg-dark
--zui-skeleton-orange-bg	oklch(70.5% 0.213 47.604 / 0.1)	Light	--zui-skeleton-orange-bg-dark
--zui-skeleton-yellow-bg	oklch(79.5% 0.184 86.047 / 0.1)	Light	--zui-skeleton-yellow-bg-dark
--zui-skeleton-teal-bg	oklch(70.4% 0.14 182.503 / 0.1)	Light	--zui-skeleton-teal-bg-dark
--zui-skeleton-indigo-bg	oklch(58.5% 0.233 277.117 / 0.1)	Light	--zui-skeleton-indigo-bg-dark
--zui-skeleton-emerald-bg	oklch(69.6% 0.17 162.48 / 0.1)	Light	--zui-skeleton-emerald-bg-dark
--zui-skeleton-gray-bg	oklch(55.1% 0.027 264.364 / 0.1)	Light	--zui-skeleton-gray-bg-dark
--zui-skeleton-amber-bg	oklch(76.9% 0.188 70.08 / 0.1)	Light	--zui-skeleton-amber-bg-dark
--zui-skeleton-violet-bg	oklch(60.6% 0.25 292.717 / 0.1)	Light	--zui-skeleton-violet-bg-dark
--zui-skeleton-gradient-blue-from	oklch(42.4% 0.199 265.638)	Light	--zui-skeleton-gradient-blue-from-dark
--zui-skeleton-gradient-blue-to	oklch(43.8% 0.218 303.724)	Light	--zui-skeleton-gradient-blue-to-dark
--zui-skeleton-gradient-green-from	oklch(44.8% 0.119 151.328)	Light	--zui-skeleton-gradient-green-from-dark
--zui-skeleton-gradient-green-to	oklch(45.3% 0.124 130.933)	Light	--zui-skeleton-gradient-green-to-dark
--zui-skeleton-gradient-red-from	oklch(44.4% 0.177 26.899)	Light	--zui-skeleton-gradient-red-from-dark
--zui-skeleton-gradient-red-to	oklch(45.9% 0.187 3.815)	Shared	none
--zui-skeleton-gradient-yellow-from	oklch(47.6% 0.114 61.907)	Shared	none
--zui-skeleton-gradient-yellow-to	oklch(47% 0.157 37.304)	Shared	none
--zui-skeleton-gradient-purple-from	oklch(43.8% 0.218 303.724)	Shared	none
--zui-skeleton-gradient-purple-to	oklch(45.9% 0.187 3.815)	Shared	none
--zui-skeleton-gradient-teal-from	oklch(43.7% 0.078 188.216)	Shared	none
--zui-skeleton-gradient-teal-to	oklch(45% 0.085 224.283)	Shared	none
--zui-skeleton-gradient-indigo-from	oklch(39.8% 0.195 277.366)	Shared	none
--zui-skeleton-gradient-indigo-to	oklch(43.8% 0.218 303.724)	Shared	none
--zui-skeleton-gradient-pink-from	oklch(45.9% 0.187 3.815)	Shared	none
--zui-skeleton-gradient-pink-to	oklch(45.5% 0.188 13.697)	Shared	none
--zui-skeleton-gradient-orange-from	oklch(47% 0.157 37.304)	Shared	none
--zui-skeleton-gradient-orange-to	oklch(44.4% 0.177 26.899)	Shared	none
--zui-skeleton-bg-dark	#ffffff1a	Dark	--zui-skeleton-bg
--zui-skeleton-default-bg-dark	#ffffff1a	Dark	--zui-skeleton-default-bg
--zui-skeleton-fg-dark	Override with your dark theme value	Dark	--zui-skeleton-fg
--zui-skeleton-subtle-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-subtle-bg
--zui-skeleton-muted-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-muted-bg
--zui-skeleton-sky-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-sky-bg
--zui-skeleton-rose-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-rose-bg
--zui-skeleton-purple-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-purple-bg
--zui-skeleton-pink-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-pink-bg
--zui-skeleton-orange-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-orange-bg
--zui-skeleton-yellow-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-yellow-bg
--zui-skeleton-teal-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-teal-bg
--zui-skeleton-indigo-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-indigo-bg
--zui-skeleton-emerald-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-emerald-bg
--zui-skeleton-gray-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-gray-bg
--zui-skeleton-amber-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-amber-bg
--zui-skeleton-violet-bg-dark	Override with your dark theme value	Dark	--zui-skeleton-violet-bg
--zui-skeleton-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-skeleton-gradient-blue-from
--zui-skeleton-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-skeleton-gradient-blue-to
--zui-skeleton-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-skeleton-gradient-green-from
--zui-skeleton-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-skeleton-gradient-green-to
--zui-skeleton-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-skeleton-gradient-red-from

Slider

Override these slider variables on :root, a theme selector, or a component wrapper.

79 tokens28 dark

Variable	Fallback	Theme	Pair
--zui-slider-track-bg	#0000001a	Light	--zui-slider-track-bg-dark
--zui-slider-range-from	oklch(60.6% 0.25 292.717)	Light	--zui-slider-range-from-dark
--zui-slider-range-to	oklch(51.1% 0.262 276.966)	Light	--zui-slider-range-to-dark
--zui-slider-range-default-from	oklch(60.6% 0.25 292.717)	Light	--zui-slider-range-default-from-dark
--zui-slider-range-default-to	oklch(51.1% 0.262 276.966)	Light	--zui-slider-range-default-to-dark
--zui-slider-range-sky-from	oklch(68.5% 0.169 237.323)	Light	--zui-slider-range-sky-from-dark
--zui-slider-range-sky-to	oklch(51.1% 0.262 276.966)	Light	--zui-slider-range-sky-to-dark
--zui-slider-range-rose-from	oklch(64.5% 0.246 16.439)	Light	--zui-slider-range-rose-from-dark
--zui-slider-range-rose-to	oklch(51.1% 0.262 276.966)	Light	--zui-slider-range-rose-to-dark
--zui-slider-range-purple-from	oklch(62.7% 0.265 303.9)	Light	--zui-slider-range-purple-from-dark
--zui-slider-range-purple-to	oklch(51.1% 0.262 276.966)	Light	--zui-slider-range-purple-to-dark
--zui-slider-range-pink-from	oklch(65.6% 0.241 354.308)	Light	--zui-slider-range-pink-from-dark
--zui-slider-range-pink-to	oklch(51.1% 0.262 276.966)	Light	--zui-slider-range-pink-to-dark
--zui-slider-range-orange-from	oklch(70.5% 0.213 47.604)	Light	--zui-slider-range-orange-from-dark
--zui-slider-range-orange-to	oklch(51.1% 0.262 276.966)	Light	--zui-slider-range-orange-to-dark
--zui-slider-range-yellow-from	oklch(79.5% 0.184 86.047)	Light	--zui-slider-range-yellow-from-dark
--zui-slider-range-yellow-to	oklch(51.1% 0.262 276.966)	Light	--zui-slider-range-yellow-to-dark
--zui-slider-range-teal-from	oklch(70.4% 0.14 182.503)	Light	--zui-slider-range-teal-from-dark
--zui-slider-range-teal-to	oklch(51.1% 0.262 276.966)	Light	--zui-slider-range-teal-to-dark
--zui-slider-range-indigo-from	oklch(58.5% 0.233 277.117)	Light	--zui-slider-range-indigo-from-dark
--zui-slider-range-indigo-to	oklch(51.1% 0.262 276.966)	Light	--zui-slider-range-indigo-to-dark
--zui-slider-range-emerald-from	oklch(69.6% 0.17 162.48)	Light	--zui-slider-range-emerald-from-dark
--zui-slider-range-emerald-to	oklch(60% 0.118 184.704)	Light	--zui-slider-range-emerald-to-dark
--zui-slider-range-amber-from	oklch(76.9% 0.188 70.08)	Light	--zui-slider-range-amber-from-dark
--zui-slider-range-amber-to	oklch(64.6% 0.222 41.116)	Light	--zui-slider-range-amber-to-dark
--zui-slider-range-gray-from	oklch(55.1% 0.027 264.364)	Light	--zui-slider-range-gray-from-dark
--zui-slider-range-gray-to	oklch(51.1% 0.262 276.966)	Light	--zui-slider-range-gray-to-dark
--zui-slider-range-violet-from	oklch(60.6% 0.25 292.717)	Light	--zui-slider-range-violet-from-dark
--zui-slider-range-violet-to	oklch(51.1% 0.262 276.966)	Shared	none
--zui-slider-range-gradient-blue-from	oklch(62.3% 0.214 259.815)	Shared	none
--zui-slider-range-gradient-blue-to	oklch(51.1% 0.262 276.966)	Shared	none
--zui-slider-range-gradient-green-from	oklch(72.3% 0.219 149.579)	Shared	none
--zui-slider-range-gradient-green-to	oklch(51.1% 0.262 276.966)	Shared	none
--zui-slider-range-gradient-red-from	oklch(63.7% 0.237 25.331)	Shared	none
--zui-slider-range-gradient-red-to	oklch(51.1% 0.262 276.966)	Shared	none
--zui-slider-range-gradient-yellow-from	oklch(79.5% 0.184 86.047)	Shared	none
--zui-slider-range-gradient-yellow-to	oklch(51.1% 0.262 276.966)	Shared	none
--zui-slider-range-gradient-purple-from	oklch(62.7% 0.265 303.9)	Shared	none
--zui-slider-range-gradient-purple-to	oklch(51.1% 0.262 276.966)	Shared	none
--zui-slider-range-gradient-teal-from	oklch(70.4% 0.14 182.503)	Shared	none
--zui-slider-range-gradient-teal-to	oklch(51.1% 0.262 276.966)	Shared	none
--zui-slider-range-gradient-indigo-from	oklch(58.5% 0.233 277.117)	Shared	none
--zui-slider-range-gradient-indigo-to	oklch(51.1% 0.262 276.966)	Shared	none
--zui-slider-range-gradient-pink-from	oklch(65.6% 0.241 354.308)	Shared	none
--zui-slider-range-gradient-pink-to	oklch(51.1% 0.262 276.966)	Shared	none
--zui-slider-range-gradient-orange-from	oklch(70.5% 0.213 47.604)	Shared	none
--zui-slider-range-gradient-orange-to	oklch(51.1% 0.262 276.966)	Shared	none
--zui-slider-thumb-border	#00000033	Shared	none
--zui-slider-thumb-bg	#000000	Shared	none
--zui-slider-thumb-ring-offset	oklch(98.4% 0.003 247.858)	Shared	none
--zui-slider-thumb-ring-focus	#00000066	Shared	none
--zui-slider-track-bg-dark	#ffffff1a	Dark	--zui-slider-track-bg
--zui-slider-range-to-dark	oklch(67.3% 0.182 276.935)	Dark	--zui-slider-range-to
--zui-slider-range-from-dark	Override with your dark theme value	Dark	--zui-slider-range-from
--zui-slider-range-default-from-dark	Override with your dark theme value	Dark	--zui-slider-range-default-from
--zui-slider-range-default-to-dark	Override with your dark theme value	Dark	--zui-slider-range-default-to
--zui-slider-range-sky-from-dark	Override with your dark theme value	Dark	--zui-slider-range-sky-from
--zui-slider-range-sky-to-dark	Override with your dark theme value	Dark	--zui-slider-range-sky-to
--zui-slider-range-rose-from-dark	Override with your dark theme value	Dark	--zui-slider-range-rose-from
--zui-slider-range-rose-to-dark	Override with your dark theme value	Dark	--zui-slider-range-rose-to
--zui-slider-range-purple-from-dark	Override with your dark theme value	Dark	--zui-slider-range-purple-from
--zui-slider-range-purple-to-dark	Override with your dark theme value	Dark	--zui-slider-range-purple-to
--zui-slider-range-pink-from-dark	Override with your dark theme value	Dark	--zui-slider-range-pink-from
--zui-slider-range-pink-to-dark	Override with your dark theme value	Dark	--zui-slider-range-pink-to
--zui-slider-range-orange-from-dark	Override with your dark theme value	Dark	--zui-slider-range-orange-from
--zui-slider-range-orange-to-dark	Override with your dark theme value	Dark	--zui-slider-range-orange-to
--zui-slider-range-yellow-from-dark	Override with your dark theme value	Dark	--zui-slider-range-yellow-from
--zui-slider-range-yellow-to-dark	Override with your dark theme value	Dark	--zui-slider-range-yellow-to
--zui-slider-range-teal-from-dark	Override with your dark theme value	Dark	--zui-slider-range-teal-from
--zui-slider-range-teal-to-dark	Override with your dark theme value	Dark	--zui-slider-range-teal-to
--zui-slider-range-indigo-from-dark	Override with your dark theme value	Dark	--zui-slider-range-indigo-from
--zui-slider-range-indigo-to-dark	Override with your dark theme value	Dark	--zui-slider-range-indigo-to
--zui-slider-range-emerald-from-dark	Override with your dark theme value	Dark	--zui-slider-range-emerald-from
--zui-slider-range-emerald-to-dark	Override with your dark theme value	Dark	--zui-slider-range-emerald-to
--zui-slider-range-amber-from-dark	Override with your dark theme value	Dark	--zui-slider-range-amber-from
--zui-slider-range-amber-to-dark	Override with your dark theme value	Dark	--zui-slider-range-amber-to
--zui-slider-range-gray-from-dark	Override with your dark theme value	Dark	--zui-slider-range-gray-from
--zui-slider-range-gray-to-dark	Override with your dark theme value	Dark	--zui-slider-range-gray-to
--zui-slider-range-violet-from-dark	Override with your dark theme value	Dark	--zui-slider-range-violet-from

Spinner

Override these spinner variables on :root, a theme selector, or a component wrapper.

44 tokens22 dark

Variable	Fallback	Theme	Pair
--zui-spinner-default-fg	oklch(20.8% 0.042 265.755)	Light	--zui-spinner-default-fg-dark
--zui-spinner-secondary-fg	oklch(44.6% 0.043 257.281)	Light	--zui-spinner-secondary-fg-dark
--zui-spinner-destructive-fg	oklch(58.6% 0.253 17.585)	Light	--zui-spinner-destructive-fg-dark
--zui-spinner-ghost-fg	oklch(44.6% 0.043 257.281)	Light	--zui-spinner-ghost-fg-dark
--zui-spinner-emerald-fg	oklch(59.6% 0.145 163.225)	Light	--zui-spinner-emerald-fg-dark
--zui-spinner-indigo-fg	oklch(51.1% 0.262 276.966)	Light	--zui-spinner-indigo-fg-dark
--zui-spinner-purple-fg	oklch(55.8% 0.288 302.321)	Light	--zui-spinner-purple-fg-dark
--zui-spinner-pink-fg	oklch(59.2% 0.249 0.584)	Light	--zui-spinner-pink-fg-dark
--zui-spinner-rose-fg	oklch(58.6% 0.253 17.585)	Light	--zui-spinner-rose-fg-dark
--zui-spinner-sky-fg	oklch(58.8% 0.158 241.966)	Light	--zui-spinner-sky-fg-dark
--zui-spinner-teal-fg	oklch(60% 0.118 184.704)	Light	--zui-spinner-teal-fg-dark
--zui-spinner-yellow-fg	oklch(68.1% 0.162 75.834)	Light	--zui-spinner-yellow-fg-dark
--zui-spinner-orange-fg	oklch(64.6% 0.222 41.116)	Light	--zui-spinner-orange-fg-dark
--zui-spinner-gradient-blue-fg	oklch(54.6% 0.245 262.881)	Light	--zui-spinner-gradient-blue-fg-dark
--zui-spinner-gradient-green-fg	oklch(62.7% 0.194 149.214)	Light	--zui-spinner-gradient-green-fg-dark
--zui-spinner-gradient-red-fg	oklch(57.7% 0.245 27.325)	Light	--zui-spinner-gradient-red-fg-dark
--zui-spinner-gradient-yellow-fg	oklch(68.1% 0.162 75.834)	Light	--zui-spinner-gradient-yellow-fg-dark
--zui-spinner-gradient-purple-fg	oklch(55.8% 0.288 302.321)	Light	--zui-spinner-gradient-purple-fg-dark
--zui-spinner-gradient-teal-fg	oklch(60% 0.118 184.704)	Light	--zui-spinner-gradient-teal-fg-dark
--zui-spinner-gradient-indigo-fg	oklch(51.1% 0.262 276.966)	Light	--zui-spinner-gradient-indigo-fg-dark
--zui-spinner-gradient-pink-fg	oklch(59.2% 0.249 0.584)	Light	--zui-spinner-gradient-pink-fg-dark
--zui-spinner-gradient-orange-fg	oklch(64.6% 0.222 41.116)	Light	--zui-spinner-gradient-orange-fg-dark
--zui-spinner-default-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-spinner-default-fg
--zui-spinner-secondary-fg-dark	oklch(86.9% 0.022 252.894)	Dark	--zui-spinner-secondary-fg
--zui-spinner-destructive-fg-dark	Override with your dark theme value	Dark	--zui-spinner-destructive-fg
--zui-spinner-ghost-fg-dark	Override with your dark theme value	Dark	--zui-spinner-ghost-fg
--zui-spinner-emerald-fg-dark	Override with your dark theme value	Dark	--zui-spinner-emerald-fg
--zui-spinner-indigo-fg-dark	Override with your dark theme value	Dark	--zui-spinner-indigo-fg
--zui-spinner-purple-fg-dark	Override with your dark theme value	Dark	--zui-spinner-purple-fg
--zui-spinner-pink-fg-dark	Override with your dark theme value	Dark	--zui-spinner-pink-fg
--zui-spinner-rose-fg-dark	Override with your dark theme value	Dark	--zui-spinner-rose-fg
--zui-spinner-sky-fg-dark	Override with your dark theme value	Dark	--zui-spinner-sky-fg
--zui-spinner-teal-fg-dark	Override with your dark theme value	Dark	--zui-spinner-teal-fg
--zui-spinner-yellow-fg-dark	Override with your dark theme value	Dark	--zui-spinner-yellow-fg
--zui-spinner-orange-fg-dark	Override with your dark theme value	Dark	--zui-spinner-orange-fg
--zui-spinner-gradient-blue-fg-dark	Override with your dark theme value	Dark	--zui-spinner-gradient-blue-fg
--zui-spinner-gradient-green-fg-dark	Override with your dark theme value	Dark	--zui-spinner-gradient-green-fg
--zui-spinner-gradient-red-fg-dark	Override with your dark theme value	Dark	--zui-spinner-gradient-red-fg
--zui-spinner-gradient-yellow-fg-dark	Override with your dark theme value	Dark	--zui-spinner-gradient-yellow-fg
--zui-spinner-gradient-purple-fg-dark	Override with your dark theme value	Dark	--zui-spinner-gradient-purple-fg
--zui-spinner-gradient-teal-fg-dark	Override with your dark theme value	Dark	--zui-spinner-gradient-teal-fg
--zui-spinner-gradient-indigo-fg-dark	Override with your dark theme value	Dark	--zui-spinner-gradient-indigo-fg
--zui-spinner-gradient-pink-fg-dark	Override with your dark theme value	Dark	--zui-spinner-gradient-pink-fg
--zui-spinner-gradient-orange-fg-dark	Override with your dark theme value	Dark	--zui-spinner-gradient-orange-fg

Stepper

Override these stepper variables on :root, a theme selector, or a component wrapper.

117 tokens26 dark

Variable	Fallback	Theme	Pair
--zui-stepper-indicator-complete-border	oklch(69.6% 0.17 162.48 / 0.6)	Light	--zui-stepper-indicator-complete-border-dark
--zui-stepper-indicator-complete-bg	oklch(69.6% 0.17 162.48 / 0.2)	Light	--zui-stepper-indicator-complete-bg-dark
--zui-stepper-indicator-complete-fg	oklch(37.8% 0.077 168.94)	Light	--zui-stepper-indicator-complete-fg-dark
--zui-stepper-indicator-complete-ring	oklch(76.5% 0.177 163.223 / 0.3)	Light	--zui-stepper-indicator-complete-ring-dark
--zui-stepper-indicator-current-border	oklch(54.1% 0.281 293.009)	Light	--zui-stepper-indicator-current-border-dark
--zui-stepper-indicator-current-bg	oklch(60.6% 0.25 292.717 / 0.2)	Light	--zui-stepper-indicator-current-bg-dark
--zui-stepper-indicator-current-fg	oklch(20.8% 0.042 265.755)	Light	--zui-stepper-indicator-current-fg-dark
--zui-stepper-indicator-current-ring	oklch(70.2% 0.183 293.541 / 0.5)	Light	--zui-stepper-indicator-current-ring-dark
--zui-stepper-indicator-upcoming-border	#00000026	Light	--zui-stepper-indicator-upcoming-border-dark
--zui-stepper-indicator-upcoming-bg	#0000000d	Light	--zui-stepper-indicator-upcoming-bg-dark
--zui-stepper-indicator-upcoming-fg	oklch(55.4% 0.046 257.417)	Light	--zui-stepper-indicator-upcoming-fg-dark
--zui-stepper-indicator-sky-border	oklch(68.5% 0.169 237.323 / 0.6)	Light	--zui-stepper-indicator-sky-border-dark
--zui-stepper-indicator-sky-bg	oklch(68.5% 0.169 237.323 / 0.2)	Light	--zui-stepper-indicator-sky-bg-dark
--zui-stepper-indicator-sky-fg	oklch(39.1% 0.09 240.876)	Light	--zui-stepper-indicator-sky-fg-dark
--zui-stepper-indicator-sky-ring	oklch(74.6% 0.16 232.661 / 0.3)	Light	--zui-stepper-indicator-sky-ring-dark
--zui-stepper-indicator-rose-border	oklch(64.5% 0.246 16.439 / 0.6)	Light	--zui-stepper-indicator-rose-border-dark
--zui-stepper-indicator-rose-bg	oklch(64.5% 0.246 16.439 / 0.2)	Light	--zui-stepper-indicator-rose-bg-dark
--zui-stepper-indicator-rose-fg	oklch(41% 0.159 10.272)	Light	--zui-stepper-indicator-rose-fg-dark
--zui-stepper-indicator-rose-ring	oklch(71.2% 0.194 13.428 / 0.3)	Light	--zui-stepper-indicator-rose-ring-dark
--zui-stepper-indicator-purple-border	oklch(62.7% 0.265 303.9 / 0.6)	Light	--zui-stepper-indicator-purple-border-dark
--zui-stepper-indicator-purple-bg	oklch(62.7% 0.265 303.9 / 0.2)	Light	--zui-stepper-indicator-purple-bg-dark
--zui-stepper-indicator-purple-fg	oklch(38.1% 0.176 304.987)	Light	--zui-stepper-indicator-purple-fg-dark
--zui-stepper-indicator-purple-ring	oklch(71.4% 0.203 305.504 / 0.3)	Light	--zui-stepper-indicator-purple-ring-dark
--zui-stepper-indicator-pink-border	oklch(65.6% 0.241 354.308 / 0.6)	Light	--zui-stepper-indicator-pink-border-dark
--zui-stepper-indicator-pink-bg	oklch(65.6% 0.241 354.308 / 0.2)	Light	--zui-stepper-indicator-pink-bg-dark
--zui-stepper-indicator-pink-fg	oklch(40.8% 0.153 2.432)	Light	--zui-stepper-indicator-pink-fg-dark
--zui-stepper-indicator-pink-ring	oklch(71.8% 0.202 349.761 / 0.3)	Shared	none
--zui-stepper-indicator-orange-border	oklch(70.5% 0.213 47.604 / 0.6)	Shared	none
--zui-stepper-indicator-orange-bg	oklch(70.5% 0.213 47.604 / 0.2)	Shared	none
--zui-stepper-indicator-orange-fg	oklch(40.8% 0.123 38.172)	Shared	none
--zui-stepper-indicator-orange-ring	oklch(75% 0.183 55.934 / 0.3)	Shared	none
--zui-stepper-indicator-yellow-border	oklch(79.5% 0.184 86.047 / 0.6)	Shared	none
--zui-stepper-indicator-yellow-bg	oklch(79.5% 0.184 86.047 / 0.2)	Shared	none
--zui-stepper-indicator-yellow-fg	oklch(42.1% 0.095 57.708)	Shared	none
--zui-stepper-indicator-yellow-ring	oklch(85.2% 0.199 91.936 / 0.3)	Shared	none
--zui-stepper-indicator-teal-border	oklch(70.4% 0.14 182.503 / 0.6)	Shared	none
--zui-stepper-indicator-teal-bg	oklch(70.4% 0.14 182.503 / 0.2)	Shared	none
--zui-stepper-indicator-teal-fg	oklch(38.6% 0.063 188.416)	Shared	none
--zui-stepper-indicator-teal-ring	oklch(77.7% 0.152 181.912 / 0.3)	Shared	none
--zui-stepper-indicator-indigo-border	oklch(58.5% 0.233 277.117 / 0.6)	Shared	none
--zui-stepper-indicator-indigo-bg	oklch(58.5% 0.233 277.117 / 0.2)	Shared	none
--zui-stepper-indicator-indigo-fg	oklch(35.9% 0.144 278.697)	Shared	none
--zui-stepper-indicator-indigo-ring	oklch(67.3% 0.182 276.935 / 0.3)	Shared	none
--zui-stepper-indicator-emerald-border	oklch(69.6% 0.17 162.48 / 0.6)	Shared	none
--zui-stepper-indicator-emerald-bg	oklch(69.6% 0.17 162.48 / 0.2)	Shared	none
--zui-stepper-indicator-emerald-fg	oklch(37.8% 0.077 168.94)	Shared	none
--zui-stepper-indicator-emerald-ring	oklch(76.5% 0.177 163.223 / 0.3)	Shared	none
--zui-stepper-indicator-gray-border	oklch(55.1% 0.027 264.364 / 0.6)	Shared	none
--zui-stepper-indicator-gray-bg	oklch(55.1% 0.027 264.364 / 0.2)	Shared	none
--zui-stepper-indicator-gray-fg	oklch(21% 0.034 264.665)	Shared	none
--zui-stepper-indicator-gray-ring	oklch(70.7% 0.022 261.325 / 0.3)	Shared	none
--zui-stepper-indicator-violet-border	oklch(60.6% 0.25 292.717 / 0.6)	Shared	none
--zui-stepper-indicator-violet-bg	oklch(60.6% 0.25 292.717 / 0.2)	Shared	none
--zui-stepper-indicator-violet-fg	oklch(38% 0.189 293.745)	Shared	none
--zui-stepper-indicator-violet-ring	oklch(70.2% 0.183 293.541 / 0.3)	Shared	none
--zui-stepper-indicator-gradient-blue-border	oklch(62.3% 0.214 259.815 / 0.6)	Shared	none
--zui-stepper-indicator-gradient-blue-bg	oklch(62.3% 0.214 259.815 / 0.2)	Shared	none
--zui-stepper-indicator-gradient-blue-fg	oklch(37.9% 0.146 265.522)	Shared	none
--zui-stepper-indicator-gradient-blue-ring	oklch(70.7% 0.165 254.624 / 0.3)	Shared	none
--zui-stepper-indicator-gradient-green-border	oklch(72.3% 0.219 149.579 / 0.6)	Shared	none
--zui-stepper-indicator-gradient-green-bg	oklch(72.3% 0.219 149.579 / 0.2)	Shared	none
--zui-stepper-indicator-gradient-green-fg	oklch(39.3% 0.095 152.535)	Shared	none
--zui-stepper-indicator-gradient-green-ring	oklch(79.2% 0.209 151.711 / 0.3)	Shared	none
--zui-stepper-indicator-gradient-red-border	oklch(63.7% 0.237 25.331 / 0.6)	Shared	none
--zui-stepper-indicator-gradient-red-bg	oklch(63.7% 0.237 25.331 / 0.2)	Shared	none
--zui-stepper-indicator-gradient-red-fg	oklch(39.6% 0.141 25.723)	Shared	none
--zui-stepper-indicator-gradient-red-ring	oklch(70.4% 0.191 22.216 / 0.3)	Shared	none
--zui-stepper-indicator-gradient-yellow-border	oklch(79.5% 0.184 86.047 / 0.6)	Shared	none
--zui-stepper-indicator-gradient-yellow-bg	oklch(79.5% 0.184 86.047 / 0.2)	Shared	none
--zui-stepper-indicator-gradient-yellow-fg	oklch(42.1% 0.095 57.708)	Shared	none
--zui-stepper-indicator-gradient-yellow-ring	oklch(85.2% 0.199 91.936 / 0.3)	Shared	none
--zui-stepper-indicator-gradient-purple-border	oklch(62.7% 0.265 303.9 / 0.6)	Shared	none
--zui-stepper-indicator-gradient-purple-bg	oklch(62.7% 0.265 303.9 / 0.2)	Shared	none
--zui-stepper-indicator-gradient-purple-fg	oklch(38.1% 0.176 304.987)	Shared	none
--zui-stepper-indicator-gradient-purple-ring	oklch(71.4% 0.203 305.504 / 0.3)	Shared	none
--zui-stepper-indicator-gradient-teal-border	oklch(70.4% 0.14 182.503 / 0.6)	Shared	none
--zui-stepper-indicator-gradient-teal-bg	oklch(70.4% 0.14 182.503 / 0.2)	Shared	none
--zui-stepper-indicator-gradient-teal-fg	oklch(38.6% 0.063 188.416)	Shared	none
--zui-stepper-indicator-gradient-teal-ring	oklch(77.7% 0.152 181.912 / 0.3)	Shared	none
--zui-stepper-indicator-gradient-indigo-border	oklch(58.5% 0.233 277.117 / 0.6)	Shared	none
--zui-stepper-indicator-gradient-indigo-bg	oklch(58.5% 0.233 277.117 / 0.2)	Shared	none
--zui-stepper-indicator-gradient-indigo-fg	oklch(35.9% 0.144 278.697)	Shared	none
--zui-stepper-indicator-gradient-indigo-ring	oklch(67.3% 0.182 276.935 / 0.3)	Shared	none
--zui-stepper-indicator-gradient-pink-border	oklch(65.6% 0.241 354.308 / 0.6)	Shared	none
--zui-stepper-indicator-gradient-pink-bg	oklch(65.6% 0.241 354.308 / 0.2)	Shared	none
--zui-stepper-indicator-gradient-pink-fg	oklch(40.8% 0.153 2.432)	Shared	none
--zui-stepper-indicator-gradient-pink-ring	oklch(71.8% 0.202 349.761 / 0.3)	Shared	none
--zui-stepper-indicator-gradient-orange-border	oklch(70.5% 0.213 47.604 / 0.6)	Shared	none
--zui-stepper-indicator-gradient-orange-bg	oklch(70.5% 0.213 47.604 / 0.2)	Shared	none
--zui-stepper-indicator-gradient-orange-fg	oklch(40.8% 0.123 38.172)	Shared	none
--zui-stepper-indicator-gradient-orange-ring	oklch(75% 0.183 55.934 / 0.3)	Shared	none
--zui-stepper-indicator-complete-fg-dark	oklch(95% 0.052 163.051)	Dark	--zui-stepper-indicator-complete-fg
--zui-stepper-indicator-current-border-dark	oklch(70.2% 0.183 293.541)	Dark	--zui-stepper-indicator-current-border
--zui-stepper-indicator-complete-border-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-complete-border
--zui-stepper-indicator-complete-bg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-complete-bg
--zui-stepper-indicator-complete-ring-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-complete-ring
--zui-stepper-indicator-current-bg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-current-bg
--zui-stepper-indicator-current-fg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-current-fg
--zui-stepper-indicator-current-ring-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-current-ring
--zui-stepper-indicator-upcoming-border-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-upcoming-border
--zui-stepper-indicator-upcoming-bg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-upcoming-bg
--zui-stepper-indicator-upcoming-fg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-upcoming-fg
--zui-stepper-indicator-sky-border-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-sky-border
--zui-stepper-indicator-sky-bg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-sky-bg
--zui-stepper-indicator-sky-fg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-sky-fg
--zui-stepper-indicator-sky-ring-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-sky-ring
--zui-stepper-indicator-rose-border-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-rose-border
--zui-stepper-indicator-rose-bg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-rose-bg
--zui-stepper-indicator-rose-fg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-rose-fg
--zui-stepper-indicator-rose-ring-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-rose-ring
--zui-stepper-indicator-purple-border-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-purple-border
--zui-stepper-indicator-purple-bg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-purple-bg
--zui-stepper-indicator-purple-fg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-purple-fg
--zui-stepper-indicator-purple-ring-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-purple-ring
--zui-stepper-indicator-pink-border-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-pink-border
--zui-stepper-indicator-pink-bg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-pink-bg
--zui-stepper-indicator-pink-fg-dark	Override with your dark theme value	Dark	--zui-stepper-indicator-pink-fg

Table

Override these table variables on :root, a theme selector, or a component wrapper.

129 tokens58 dark

Variable	Fallback	Theme	Pair
--zui-table-fg	oklch(37.2% 0.044 257.287)	Light	--zui-table-fg-dark
--zui-table-bordered-border	#0000001a	Light	--zui-table-bordered-border-dark
--zui-table-sky-border	oklch(44.3% 0.11 240.79)	Light	--zui-table-sky-border-dark
--zui-table-rose-border	oklch(45.5% 0.188 13.697)	Light	--zui-table-rose-border-dark
--zui-table-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-table-purple-border-dark
--zui-table-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-table-pink-border-dark
--zui-table-orange-border	oklch(47% 0.157 37.304)	Light	--zui-table-orange-border-dark
--zui-table-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-table-yellow-border-dark
--zui-table-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-table-teal-border-dark
--zui-table-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-table-indigo-border-dark
--zui-table-emerald-border	oklch(43.2% 0.095 166.913)	Light	--zui-table-emerald-border-dark
--zui-table-gray-border	oklch(27.8% 0.033 256.848)	Light	--zui-table-gray-border-dark
--zui-table-amber-border	oklch(47.3% 0.137 46.201)	Light	--zui-table-amber-border-dark
--zui-table-violet-border	oklch(43.2% 0.232 292.759)	Light	--zui-table-violet-border-dark
--zui-table-row-border	#0000000d	Light	--zui-table-row-border-dark
--zui-table-row-bg-selected	#0000000f	Light	--zui-table-row-bg-selected-dark
--zui-table-row-striped-bg	#00000008	Light	--zui-table-row-striped-bg-dark
--zui-table-row-ghost-border	transparent	Light	--zui-table-row-ghost-border-dark
--zui-table-row-ghost-bg-hover	#00000008	Light	--zui-table-row-ghost-bg-hover-dark
--zui-table-row-sky-border	oklch(44.3% 0.11 240.79)	Light	--zui-table-row-sky-border-dark
--zui-table-row-sky-bg-hover	oklch(44.3% 0.11 240.79)	Light	--zui-table-row-sky-bg-hover-dark
--zui-table-row-sky-fg-hover	oklch(95.1% 0.026 236.824)	Light	--zui-table-row-sky-fg-hover-dark
--zui-table-row-rose-border	oklch(45.5% 0.188 13.697)	Light	--zui-table-row-rose-border-dark
--zui-table-row-rose-bg-hover	oklch(64.5% 0.246 16.439)	Light	--zui-table-row-rose-bg-hover-dark
--zui-table-row-rose-fg-hover	oklch(94.1% 0.03 12.58)	Light	--zui-table-row-rose-fg-hover-dark
--zui-table-row-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-table-row-purple-border-dark
--zui-table-row-purple-bg-hover	oklch(62.7% 0.265 303.9)	Light	--zui-table-row-purple-bg-hover-dark
--zui-table-row-purple-fg-hover	oklch(94.6% 0.033 307.174)	Light	--zui-table-row-purple-fg-hover-dark
--zui-table-row-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-table-row-pink-border-dark
--zui-table-row-pink-bg-hover	oklch(65.6% 0.241 354.308)	Light	--zui-table-row-pink-bg-hover-dark
--zui-table-row-pink-fg-hover	oklch(94.8% 0.028 342.258)	Light	--zui-table-row-pink-fg-hover-dark
--zui-table-row-orange-border	oklch(47% 0.157 37.304)	Light	--zui-table-row-orange-border-dark
--zui-table-row-orange-bg-hover	oklch(70.5% 0.213 47.604)	Light	--zui-table-row-orange-bg-hover-dark
--zui-table-row-orange-fg-hover	oklch(95.4% 0.038 75.164)	Light	--zui-table-row-orange-fg-hover-dark
--zui-table-row-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-table-row-yellow-border-dark
--zui-table-row-yellow-bg-hover	oklch(79.5% 0.184 86.047)	Light	--zui-table-row-yellow-bg-hover-dark
--zui-table-row-yellow-fg-hover	oklch(97.3% 0.071 103.193)	Light	--zui-table-row-yellow-fg-hover-dark
--zui-table-row-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-table-row-teal-border-dark
--zui-table-row-teal-bg-hover	oklch(70.4% 0.14 182.503)	Light	--zui-table-row-teal-bg-hover-dark
--zui-table-row-teal-fg-hover	oklch(95.3% 0.051 180.801)	Light	--zui-table-row-teal-fg-hover-dark
--zui-table-row-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-table-row-indigo-border-dark
--zui-table-row-indigo-bg-hover	oklch(58.5% 0.233 277.117)	Light	--zui-table-row-indigo-bg-hover-dark
--zui-table-row-indigo-fg-hover	oklch(93% 0.034 272.788)	Light	--zui-table-row-indigo-fg-hover-dark
--zui-table-row-emerald-border	oklch(43.2% 0.095 166.913)	Light	--zui-table-row-emerald-border-dark
--zui-table-row-emerald-bg-hover	oklch(69.6% 0.17 162.48)	Light	--zui-table-row-emerald-bg-hover-dark
--zui-table-row-emerald-fg-hover	oklch(95% 0.052 163.051)	Light	--zui-table-row-emerald-fg-hover-dark
--zui-table-row-gray-border	oklch(27.8% 0.033 256.848)	Light	--zui-table-row-gray-border-dark
--zui-table-row-gray-bg-hover	oklch(55.1% 0.027 264.364)	Light	--zui-table-row-gray-bg-hover-dark
--zui-table-row-gray-fg-hover	oklch(96.7% 0.003 264.542)	Light	--zui-table-row-gray-fg-hover-dark
--zui-table-row-amber-border	oklch(47.3% 0.137 46.201)	Light	--zui-table-row-amber-border-dark
--zui-table-row-amber-bg-hover	oklch(76.9% 0.188 70.08)	Light	--zui-table-row-amber-bg-hover-dark
--zui-table-row-amber-fg-hover	oklch(96.2% 0.059 95.617)	Light	--zui-table-row-amber-fg-hover-dark
--zui-table-row-violet-border	oklch(43.2% 0.232 292.759)	Light	--zui-table-row-violet-border-dark
--zui-table-row-violet-bg-hover	oklch(60.6% 0.25 292.717)	Light	--zui-table-row-violet-bg-hover-dark
--zui-table-row-violet-fg-hover	oklch(94.3% 0.029 294.588)	Light	--zui-table-row-violet-fg-hover-dark
--zui-table-cell-default-border	#0000001a	Light	--zui-table-cell-default-border-dark
--zui-table-cell-striped-border	#0000001a	Light	--zui-table-cell-striped-border-dark
--zui-table-cell-bordered-border	#0000001a	Light	--zui-table-cell-bordered-border-dark
--zui-table-cell-ghost-border	#0000001a	Shared	none
--zui-table-cell-sky-border	oklch(44.3% 0.11 240.79)	Shared	none
--zui-table-cell-rose-border	oklch(45.5% 0.188 13.697)	Shared	none
--zui-table-cell-purple-border	oklch(43.8% 0.218 303.724)	Shared	none
--zui-table-cell-pink-border	oklch(45.9% 0.187 3.815)	Shared	none
--zui-table-cell-orange-border	oklch(47% 0.157 37.304)	Shared	none
--zui-table-cell-yellow-border	oklch(47.6% 0.114 61.907)	Shared	none
--zui-table-cell-teal-border	oklch(43.7% 0.078 188.216)	Shared	none
--zui-table-cell-indigo-border	oklch(39.8% 0.195 277.366)	Shared	none
--zui-table-cell-emerald-border	oklch(43.2% 0.095 166.913)	Shared	none
--zui-table-cell-gray-border	oklch(27.8% 0.033 256.848)	Shared	none
--zui-table-cell-amber-border	oklch(47.3% 0.137 46.201)	Shared	none
--zui-table-cell-violet-border	oklch(43.2% 0.232 292.759)	Shared	none
--zui-table-fg-dark	oklch(92.9% 0.013 255.508)	Dark	--zui-table-fg
--zui-table-bordered-border-dark	#ffffff1a	Dark	--zui-table-bordered-border
--zui-table-sky-border-dark	Override with your dark theme value	Dark	--zui-table-sky-border
--zui-table-rose-border-dark	Override with your dark theme value	Dark	--zui-table-rose-border
--zui-table-purple-border-dark	Override with your dark theme value	Dark	--zui-table-purple-border
--zui-table-pink-border-dark	Override with your dark theme value	Dark	--zui-table-pink-border
--zui-table-orange-border-dark	Override with your dark theme value	Dark	--zui-table-orange-border
--zui-table-yellow-border-dark	Override with your dark theme value	Dark	--zui-table-yellow-border
--zui-table-teal-border-dark	Override with your dark theme value	Dark	--zui-table-teal-border
--zui-table-indigo-border-dark	Override with your dark theme value	Dark	--zui-table-indigo-border
--zui-table-emerald-border-dark	Override with your dark theme value	Dark	--zui-table-emerald-border
--zui-table-gray-border-dark	Override with your dark theme value	Dark	--zui-table-gray-border
--zui-table-amber-border-dark	Override with your dark theme value	Dark	--zui-table-amber-border
--zui-table-violet-border-dark	Override with your dark theme value	Dark	--zui-table-violet-border
--zui-table-row-border-dark	Override with your dark theme value	Dark	--zui-table-row-border
--zui-table-row-bg-selected-dark	Override with your dark theme value	Dark	--zui-table-row-bg-selected
--zui-table-row-striped-bg-dark	Override with your dark theme value	Dark	--zui-table-row-striped-bg
--zui-table-row-ghost-border-dark	Override with your dark theme value	Dark	--zui-table-row-ghost-border
--zui-table-row-ghost-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-ghost-bg-hover
--zui-table-row-sky-border-dark	Override with your dark theme value	Dark	--zui-table-row-sky-border
--zui-table-row-sky-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-sky-bg-hover
--zui-table-row-sky-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-sky-fg-hover
--zui-table-row-rose-border-dark	Override with your dark theme value	Dark	--zui-table-row-rose-border
--zui-table-row-rose-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-rose-bg-hover
--zui-table-row-rose-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-rose-fg-hover
--zui-table-row-purple-border-dark	Override with your dark theme value	Dark	--zui-table-row-purple-border
--zui-table-row-purple-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-purple-bg-hover
--zui-table-row-purple-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-purple-fg-hover
--zui-table-row-pink-border-dark	Override with your dark theme value	Dark	--zui-table-row-pink-border
--zui-table-row-pink-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-pink-bg-hover
--zui-table-row-pink-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-pink-fg-hover
--zui-table-row-orange-border-dark	Override with your dark theme value	Dark	--zui-table-row-orange-border
--zui-table-row-orange-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-orange-bg-hover
--zui-table-row-orange-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-orange-fg-hover
--zui-table-row-yellow-border-dark	Override with your dark theme value	Dark	--zui-table-row-yellow-border
--zui-table-row-yellow-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-yellow-bg-hover
--zui-table-row-yellow-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-yellow-fg-hover
--zui-table-row-teal-border-dark	Override with your dark theme value	Dark	--zui-table-row-teal-border
--zui-table-row-teal-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-teal-bg-hover
--zui-table-row-teal-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-teal-fg-hover
--zui-table-row-indigo-border-dark	Override with your dark theme value	Dark	--zui-table-row-indigo-border
--zui-table-row-indigo-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-indigo-bg-hover
--zui-table-row-indigo-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-indigo-fg-hover
--zui-table-row-emerald-border-dark	Override with your dark theme value	Dark	--zui-table-row-emerald-border
--zui-table-row-emerald-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-emerald-bg-hover
--zui-table-row-emerald-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-emerald-fg-hover
--zui-table-row-gray-border-dark	Override with your dark theme value	Dark	--zui-table-row-gray-border
--zui-table-row-gray-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-gray-bg-hover
--zui-table-row-gray-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-gray-fg-hover
--zui-table-row-amber-border-dark	Override with your dark theme value	Dark	--zui-table-row-amber-border
--zui-table-row-amber-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-amber-bg-hover
--zui-table-row-amber-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-amber-fg-hover
--zui-table-row-violet-border-dark	Override with your dark theme value	Dark	--zui-table-row-violet-border
--zui-table-row-violet-bg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-violet-bg-hover
--zui-table-row-violet-fg-hover-dark	Override with your dark theme value	Dark	--zui-table-row-violet-fg-hover
--zui-table-cell-default-border-dark	Override with your dark theme value	Dark	--zui-table-cell-default-border
--zui-table-cell-striped-border-dark	Override with your dark theme value	Dark	--zui-table-cell-striped-border
--zui-table-cell-bordered-border-dark	Override with your dark theme value	Dark	--zui-table-cell-bordered-border

Tabs

Override these tabs variables on :root, a theme selector, or a component wrapper.

194 tokens95 dark

Timeline

Override these timeline variables on :root, a theme selector, or a component wrapper.

102 tokens15 dark

Variable	Fallback	Theme	Pair
--zui-timeline-indicator-default-border	oklch(55.1% 0.027 264.364 / 0.6)	Light	--zui-timeline-indicator-default-border-dark
--zui-timeline-indicator-default-bg	oklch(55.1% 0.027 264.364 / 0.2)	Light	--zui-timeline-indicator-default-bg-dark
--zui-timeline-indicator-default-fg	oklch(21% 0.034 264.665)	Light	--zui-timeline-indicator-default-fg-dark
--zui-timeline-indicator-default-ring	oklch(70.7% 0.022 261.325 / 0.3)	Light	--zui-timeline-indicator-default-ring-dark
--zui-timeline-indicator-sky-border	oklch(68.5% 0.169 237.323 / 0.6)	Light	--zui-timeline-indicator-sky-border-dark
--zui-timeline-indicator-sky-bg	oklch(68.5% 0.169 237.323 / 0.2)	Light	--zui-timeline-indicator-sky-bg-dark
--zui-timeline-indicator-sky-fg	oklch(39.1% 0.09 240.876)	Light	--zui-timeline-indicator-sky-fg-dark
--zui-timeline-indicator-sky-ring	oklch(74.6% 0.16 232.661 / 0.3)	Light	--zui-timeline-indicator-sky-ring-dark
--zui-timeline-indicator-rose-border	oklch(64.5% 0.246 16.439 / 0.6)	Light	--zui-timeline-indicator-rose-border-dark
--zui-timeline-indicator-rose-bg	oklch(64.5% 0.246 16.439 / 0.2)	Light	--zui-timeline-indicator-rose-bg-dark
--zui-timeline-indicator-rose-fg	oklch(41% 0.159 10.272)	Light	--zui-timeline-indicator-rose-fg-dark
--zui-timeline-indicator-rose-ring	oklch(71.2% 0.194 13.428 / 0.3)	Light	--zui-timeline-indicator-rose-ring-dark
--zui-timeline-indicator-purple-border	oklch(62.7% 0.265 303.9 / 0.6)	Light	--zui-timeline-indicator-purple-border-dark
--zui-timeline-indicator-purple-bg	oklch(62.7% 0.265 303.9 / 0.2)	Light	--zui-timeline-indicator-purple-bg-dark
--zui-timeline-indicator-purple-fg	oklch(38.1% 0.176 304.987)	Shared	none
--zui-timeline-indicator-purple-ring	oklch(71.4% 0.203 305.504 / 0.3)	Shared	none
--zui-timeline-indicator-pink-border	oklch(65.6% 0.241 354.308 / 0.6)	Shared	none
--zui-timeline-indicator-pink-bg	oklch(65.6% 0.241 354.308 / 0.2)	Shared	none
--zui-timeline-indicator-pink-fg	oklch(40.8% 0.153 2.432)	Shared	none
--zui-timeline-indicator-pink-ring	oklch(71.8% 0.202 349.761 / 0.3)	Shared	none
--zui-timeline-indicator-orange-border	oklch(70.5% 0.213 47.604 / 0.6)	Shared	none
--zui-timeline-indicator-orange-bg	oklch(70.5% 0.213 47.604 / 0.2)	Shared	none
--zui-timeline-indicator-orange-fg	oklch(40.8% 0.123 38.172)	Shared	none
--zui-timeline-indicator-orange-ring	oklch(75% 0.183 55.934 / 0.3)	Shared	none
--zui-timeline-indicator-yellow-border	oklch(79.5% 0.184 86.047 / 0.6)	Shared	none
--zui-timeline-indicator-yellow-bg	oklch(79.5% 0.184 86.047 / 0.2)	Shared	none
--zui-timeline-indicator-yellow-fg	oklch(42.1% 0.095 57.708)	Shared	none
--zui-timeline-indicator-yellow-ring	oklch(85.2% 0.199 91.936 / 0.3)	Shared	none
--zui-timeline-indicator-teal-border	oklch(70.4% 0.14 182.503 / 0.6)	Shared	none
--zui-timeline-indicator-teal-bg	oklch(70.4% 0.14 182.503 / 0.2)	Shared	none
--zui-timeline-indicator-teal-fg	oklch(38.6% 0.063 188.416)	Shared	none
--zui-timeline-indicator-teal-ring	oklch(77.7% 0.152 181.912 / 0.3)	Shared	none
--zui-timeline-indicator-indigo-border	oklch(58.5% 0.233 277.117 / 0.6)	Shared	none
--zui-timeline-indicator-indigo-bg	oklch(58.5% 0.233 277.117 / 0.2)	Shared	none
--zui-timeline-indicator-indigo-fg	oklch(35.9% 0.144 278.697)	Shared	none
--zui-timeline-indicator-indigo-ring	oklch(67.3% 0.182 276.935 / 0.3)	Shared	none
--zui-timeline-indicator-emerald-border	oklch(69.6% 0.17 162.48 / 0.6)	Shared	none
--zui-timeline-indicator-emerald-bg	oklch(69.6% 0.17 162.48 / 0.2)	Shared	none
--zui-timeline-indicator-emerald-fg	oklch(37.8% 0.077 168.94)	Shared	none
--zui-timeline-indicator-emerald-ring	oklch(76.5% 0.177 163.223 / 0.3)	Shared	none
--zui-timeline-indicator-gray-border	oklch(55.1% 0.027 264.364 / 0.6)	Shared	none
--zui-timeline-indicator-gray-bg	oklch(55.1% 0.027 264.364 / 0.2)	Shared	none
--zui-timeline-indicator-gray-fg	oklch(21% 0.034 264.665)	Shared	none
--zui-timeline-indicator-gray-ring	oklch(70.7% 0.022 261.325 / 0.3)	Shared	none
--zui-timeline-indicator-violet-border	oklch(60.6% 0.25 292.717 / 0.6)	Shared	none
--zui-timeline-indicator-violet-bg	oklch(60.6% 0.25 292.717 / 0.2)	Shared	none
--zui-timeline-indicator-violet-fg	oklch(38% 0.189 293.745)	Shared	none
--zui-timeline-indicator-violet-ring	oklch(70.2% 0.183 293.541 / 0.3)	Shared	none
--zui-timeline-indicator-gradient-blue-from	oklch(62.3% 0.214 259.815)	Shared	none
--zui-timeline-indicator-gradient-blue-to	oklch(54.6% 0.245 262.881)	Shared	none
--zui-timeline-indicator-gradient-blue-fg	#ffffff	Shared	none
--zui-timeline-indicator-gradient-blue-ring	oklch(70.7% 0.165 254.624 / 0.3)	Shared	none
--zui-timeline-indicator-gradient-green-from	oklch(72.3% 0.219 149.579)	Shared	none
--zui-timeline-indicator-gradient-green-to	oklch(62.7% 0.194 149.214)	Shared	none
--zui-timeline-indicator-gradient-green-fg	#ffffff	Shared	none
--zui-timeline-indicator-gradient-green-ring	oklch(79.2% 0.209 151.711 / 0.3)	Shared	none
--zui-timeline-indicator-gradient-red-from	oklch(63.7% 0.237 25.331)	Shared	none
--zui-timeline-indicator-gradient-red-to	oklch(57.7% 0.245 27.325)	Shared	none
--zui-timeline-indicator-gradient-red-fg	#ffffff	Shared	none
--zui-timeline-indicator-gradient-red-ring	oklch(70.4% 0.191 22.216 / 0.3)	Shared	none
--zui-timeline-indicator-gradient-yellow-from	oklch(85.2% 0.199 91.936)	Shared	none
--zui-timeline-indicator-gradient-yellow-to	oklch(79.5% 0.184 86.047)	Shared	none
--zui-timeline-indicator-gradient-yellow-fg	oklch(42.1% 0.095 57.708)	Shared	none
--zui-timeline-indicator-gradient-yellow-ring	oklch(85.2% 0.199 91.936 / 0.3)	Shared	none
--zui-timeline-indicator-gradient-purple-from	oklch(71.4% 0.203 305.504)	Shared	none
--zui-timeline-indicator-gradient-purple-to	oklch(62.7% 0.265 303.9)	Shared	none
--zui-timeline-indicator-gradient-purple-fg	#ffffff	Shared	none
--zui-timeline-indicator-gradient-purple-ring	oklch(71.4% 0.203 305.504 / 0.3)	Shared	none
--zui-timeline-indicator-gradient-teal-from	oklch(77.7% 0.152 181.912)	Shared	none
--zui-timeline-indicator-gradient-teal-to	oklch(70.4% 0.14 182.503)	Shared	none
--zui-timeline-indicator-gradient-teal-fg	#ffffff	Shared	none
--zui-timeline-indicator-gradient-teal-ring	oklch(77.7% 0.152 181.912 / 0.3)	Shared	none
--zui-timeline-indicator-gradient-indigo-from	oklch(67.3% 0.182 276.935)	Shared	none
--zui-timeline-indicator-gradient-indigo-to	oklch(58.5% 0.233 277.117)	Shared	none
--zui-timeline-indicator-gradient-indigo-fg	#ffffff	Shared	none
--zui-timeline-indicator-gradient-indigo-ring	oklch(67.3% 0.182 276.935 / 0.3)	Shared	none
--zui-timeline-indicator-gradient-pink-from	oklch(71.8% 0.202 349.761)	Shared	none
--zui-timeline-indicator-gradient-pink-to	oklch(65.6% 0.241 354.308)	Shared	none
--zui-timeline-indicator-gradient-pink-fg	#ffffff	Shared	none
--zui-timeline-indicator-gradient-pink-ring	oklch(71.8% 0.202 349.761 / 0.3)	Shared	none
--zui-timeline-indicator-gradient-orange-from	oklch(75% 0.183 55.934)	Shared	none
--zui-timeline-indicator-gradient-orange-to	oklch(70.5% 0.213 47.604)	Shared	none
--zui-timeline-indicator-gradient-orange-fg	#ffffff	Shared	none
--zui-timeline-indicator-gradient-orange-ring	oklch(75% 0.183 55.934 / 0.3)	Shared	none
--zui-timeline-connector	#0000001f	Light	--zui-timeline-connector-dark
--zui-timeline-title-fg	oklch(20.8% 0.042 265.755)	Shared	none
--zui-timeline-description-fg	oklch(44.6% 0.03 256.802)	Shared	none
--zui-timeline-indicator-default-fg-dark	oklch(96.7% 0.003 264.542)	Dark	--zui-timeline-indicator-default-fg
--zui-timeline-connector-dark	#ffffff1f	Dark	--zui-timeline-connector
--zui-timeline-indicator-default-border-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-default-border
--zui-timeline-indicator-default-bg-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-default-bg
--zui-timeline-indicator-default-ring-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-default-ring
--zui-timeline-indicator-sky-border-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-sky-border
--zui-timeline-indicator-sky-bg-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-sky-bg
--zui-timeline-indicator-sky-fg-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-sky-fg
--zui-timeline-indicator-sky-ring-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-sky-ring
--zui-timeline-indicator-rose-border-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-rose-border
--zui-timeline-indicator-rose-bg-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-rose-bg
--zui-timeline-indicator-rose-fg-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-rose-fg
--zui-timeline-indicator-rose-ring-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-rose-ring
--zui-timeline-indicator-purple-border-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-purple-border
--zui-timeline-indicator-purple-bg-dark	Override with your dark theme value	Dark	--zui-timeline-indicator-purple-bg

Toast

Override these toast variables on :root, a theme selector, or a component wrapper.

116 tokens39 dark

Variable	Fallback	Theme	Pair
--zui-toast-root-bg	oklch(98.4% 0.003 247.858)	Light	--zui-toast-root-bg-dark
--zui-toast-root-fg	oklch(20.8% 0.042 265.755)	Light	--zui-toast-root-fg-dark
--zui-toast-root-shadow	0 8px 24px rgba(15,23,42,0.12)	Light	--zui-toast-root-shadow-dark
--zui-toast-root-default-bg	oklch(12.9% 0.042 264.695)	Light	--zui-toast-root-default-bg-dark
--zui-toast-root-default-fg	oklch(98.4% 0.003 247.858)	Light	--zui-toast-root-default-fg-dark
--zui-toast-root-success-border	oklch(69.6% 0.17 162.48 / 0.4)	Light	--zui-toast-root-success-border-dark
--zui-toast-root-success-bg	oklch(26.2% 0.051 172.552)	Light	--zui-toast-root-success-bg-dark
--zui-toast-root-success-fg	oklch(97.9% 0.021 166.113)	Light	--zui-toast-root-success-fg-dark
--zui-toast-root-warning-border	oklch(76.9% 0.188 70.08 / 0.4)	Light	--zui-toast-root-warning-border-dark
--zui-toast-root-warning-bg	oklch(27.9% 0.077 45.635)	Light	--zui-toast-root-warning-bg-dark
--zui-toast-root-warning-fg	oklch(98.7% 0.022 95.277)	Light	--zui-toast-root-warning-fg-dark
--zui-toast-root-error-border	oklch(64.5% 0.246 16.439 / 0.5)	Light	--zui-toast-root-error-border-dark
--zui-toast-root-error-bg	oklch(27.1% 0.105 12.094)	Light	--zui-toast-root-error-bg-dark
--zui-toast-root-error-fg	oklch(96.9% 0.015 12.422)	Light	--zui-toast-root-error-fg-dark
--zui-toast-root-info-border	oklch(68.5% 0.169 237.323 / 0.4)	Light	--zui-toast-root-info-border-dark
--zui-toast-root-info-bg	oklch(29.3% 0.066 243.157)	Light	--zui-toast-root-info-bg-dark
--zui-toast-root-info-fg	oklch(97.7% 0.013 236.62)	Light	--zui-toast-root-info-fg-dark
--zui-toast-root-ghost-border	transparent	Light	--zui-toast-root-ghost-border-dark
--zui-toast-root-ghost-bg	transparent	Light	--zui-toast-root-ghost-bg-dark
--zui-toast-root-ghost-fg	oklch(20.8% 0.042 265.755)	Light	--zui-toast-root-ghost-fg-dark
--zui-toast-root-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-toast-root-purple-border-dark
--zui-toast-root-purple-bg	oklch(29.1% 0.149 302.717)	Light	--zui-toast-root-purple-bg-dark
--zui-toast-root-purple-fg	oklch(97.7% 0.014 308.299)	Light	--zui-toast-root-purple-fg-dark
--zui-toast-root-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-toast-root-pink-border-dark
--zui-toast-root-pink-bg	oklch(28.4% 0.109 3.907)	Light	--zui-toast-root-pink-bg-dark
--zui-toast-root-pink-fg	oklch(97.1% 0.014 343.198)	Light	--zui-toast-root-pink-fg-dark
--zui-toast-root-orange-border	oklch(47% 0.157 37.304)	Light	--zui-toast-root-orange-border-dark
--zui-toast-root-orange-bg	oklch(26.6% 0.079 36.259)	Light	--zui-toast-root-orange-bg-dark
--zui-toast-root-orange-fg	oklch(98% 0.016 73.684)	Light	--zui-toast-root-orange-fg-dark
--zui-toast-root-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-toast-root-yellow-border-dark
--zui-toast-root-yellow-bg	oklch(28.6% 0.066 53.813)	Light	--zui-toast-root-yellow-bg-dark
--zui-toast-root-yellow-fg	oklch(98.7% 0.026 102.212)	Light	--zui-toast-root-yellow-fg-dark
--zui-toast-root-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-toast-root-teal-border-dark
--zui-toast-root-teal-bg	oklch(27.7% 0.046 192.524)	Light	--zui-toast-root-teal-bg-dark
--zui-toast-root-teal-fg	oklch(98.4% 0.014 180.72)	Light	--zui-toast-root-teal-fg-dark
--zui-toast-root-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-toast-root-indigo-border-dark
--zui-toast-root-indigo-bg	oklch(25.7% 0.09 281.288)	Light	--zui-toast-root-indigo-bg-dark
--zui-toast-root-indigo-fg	oklch(96.2% 0.018 272.314)	Light	--zui-toast-root-indigo-fg-dark
--zui-toast-root-emerald-border	oklch(43.2% 0.095 166.913)	Light	--zui-toast-root-emerald-border-dark
--zui-toast-root-emerald-bg	oklch(26.2% 0.051 172.552)	Shared	none
--zui-toast-root-emerald-fg	oklch(97.9% 0.021 166.113)	Shared	none
--zui-toast-root-gray-border	oklch(27.8% 0.033 256.848)	Shared	none
--zui-toast-root-gray-bg	oklch(13% 0.028 261.692)	Shared	none
--zui-toast-root-gray-fg	oklch(98.5% 0.002 247.839)	Shared	none
--zui-toast-root-amber-border	oklch(47.3% 0.137 46.201)	Shared	none
--zui-toast-root-amber-bg	oklch(27.9% 0.077 45.635)	Shared	none
--zui-toast-root-amber-fg	oklch(98.7% 0.022 95.277)	Shared	none
--zui-toast-root-violet-border	oklch(43.2% 0.232 292.759)	Shared	none
--zui-toast-root-violet-bg	oklch(28.3% 0.141 291.089)	Shared	none
--zui-toast-root-violet-fg	oklch(96.9% 0.016 293.756)	Shared	none
--zui-toast-root-gradient-blue-border	oklch(42.4% 0.199 265.638)	Shared	none
--zui-toast-root-gradient-blue-from	oklch(97% 0.014 254.604)	Shared	none
--zui-toast-root-gradient-blue-to	oklch(97.7% 0.014 308.299)	Shared	none
--zui-toast-root-gradient-green-border	oklch(44.8% 0.119 151.328)	Shared	none
--zui-toast-root-gradient-green-from	oklch(98.2% 0.018 155.826)	Shared	none
--zui-toast-root-gradient-green-to	oklch(98.6% 0.031 120.757)	Shared	none
--zui-toast-root-gradient-red-border	oklch(44.4% 0.177 26.899)	Shared	none
--zui-toast-root-gradient-red-from	oklch(97.1% 0.013 17.38)	Shared	none
--zui-toast-root-gradient-red-to	oklch(97.1% 0.014 343.198)	Shared	none
--zui-toast-root-gradient-yellow-border	oklch(47.6% 0.114 61.907)	Shared	none
--zui-toast-root-gradient-yellow-from	oklch(98.7% 0.026 102.212)	Shared	none
--zui-toast-root-gradient-yellow-to	oklch(98% 0.016 73.684)	Shared	none
--zui-toast-root-gradient-purple-border	oklch(43.8% 0.218 303.724)	Shared	none
--zui-toast-root-gradient-purple-from	oklch(97.7% 0.014 308.299)	Shared	none
--zui-toast-root-gradient-purple-to	oklch(97.1% 0.014 343.198)	Shared	none
--zui-toast-root-gradient-teal-border	oklch(43.7% 0.078 188.216)	Shared	none
--zui-toast-root-gradient-teal-from	oklch(98.4% 0.014 180.72)	Shared	none
--zui-toast-root-gradient-teal-to	oklch(98.4% 0.019 200.873)	Shared	none
--zui-toast-root-gradient-indigo-border	oklch(39.8% 0.195 277.366)	Shared	none
--zui-toast-root-gradient-indigo-from	oklch(96.2% 0.018 272.314)	Shared	none
--zui-toast-root-gradient-indigo-to	oklch(97.7% 0.014 308.299)	Shared	none
--zui-toast-root-gradient-pink-border	oklch(45.9% 0.187 3.815)	Shared	none
--zui-toast-root-gradient-pink-from	oklch(97.1% 0.014 343.198)	Shared	none
--zui-toast-root-gradient-pink-to	oklch(96.9% 0.015 12.422)	Shared	none
--zui-toast-root-gradient-orange-border	oklch(47% 0.157 37.304)	Shared	none
--zui-toast-root-gradient-orange-from	oklch(98% 0.016 73.684)	Shared	none
--zui-toast-root-gradient-orange-to	oklch(97.1% 0.013 17.38)	Shared	none
--zui-toast-root-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-toast-root-fg
--zui-toast-root-shadow-dark	0 18px 48px rgba(15,23,42,0.45)	Dark	--zui-toast-root-shadow
--zui-toast-root-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-bg
--zui-toast-root-default-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-default-bg
--zui-toast-root-default-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-default-fg
--zui-toast-root-success-border-dark	Override with your dark theme value	Dark	--zui-toast-root-success-border
--zui-toast-root-success-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-success-bg
--zui-toast-root-success-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-success-fg
--zui-toast-root-warning-border-dark	Override with your dark theme value	Dark	--zui-toast-root-warning-border
--zui-toast-root-warning-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-warning-bg
--zui-toast-root-warning-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-warning-fg
--zui-toast-root-error-border-dark	Override with your dark theme value	Dark	--zui-toast-root-error-border
--zui-toast-root-error-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-error-bg
--zui-toast-root-error-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-error-fg
--zui-toast-root-info-border-dark	Override with your dark theme value	Dark	--zui-toast-root-info-border
--zui-toast-root-info-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-info-bg
--zui-toast-root-info-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-info-fg
--zui-toast-root-ghost-border-dark	Override with your dark theme value	Dark	--zui-toast-root-ghost-border
--zui-toast-root-ghost-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-ghost-bg
--zui-toast-root-ghost-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-ghost-fg
--zui-toast-root-purple-border-dark	Override with your dark theme value	Dark	--zui-toast-root-purple-border
--zui-toast-root-purple-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-purple-bg
--zui-toast-root-purple-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-purple-fg
--zui-toast-root-pink-border-dark	Override with your dark theme value	Dark	--zui-toast-root-pink-border
--zui-toast-root-pink-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-pink-bg
--zui-toast-root-pink-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-pink-fg
--zui-toast-root-orange-border-dark	Override with your dark theme value	Dark	--zui-toast-root-orange-border
--zui-toast-root-orange-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-orange-bg
--zui-toast-root-orange-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-orange-fg
--zui-toast-root-yellow-border-dark	Override with your dark theme value	Dark	--zui-toast-root-yellow-border
--zui-toast-root-yellow-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-yellow-bg
--zui-toast-root-yellow-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-yellow-fg
--zui-toast-root-teal-border-dark	Override with your dark theme value	Dark	--zui-toast-root-teal-border
--zui-toast-root-teal-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-teal-bg
--zui-toast-root-teal-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-teal-fg
--zui-toast-root-indigo-border-dark	Override with your dark theme value	Dark	--zui-toast-root-indigo-border
--zui-toast-root-indigo-bg-dark	Override with your dark theme value	Dark	--zui-toast-root-indigo-bg
--zui-toast-root-indigo-fg-dark	Override with your dark theme value	Dark	--zui-toast-root-indigo-fg
--zui-toast-root-emerald-border-dark	Override with your dark theme value	Dark	--zui-toast-root-emerald-border

Toggle

Override these toggle variables on :root, a theme selector, or a component wrapper.

141 tokens42 dark

Variable	Fallback	Theme	Pair
--zui-toggle-track-border	#0000001a	Light	--zui-toggle-track-border-dark
--zui-toggle-track-ring-focus	oklch(44.6% 0.043 257.281)	Light	--zui-toggle-track-ring-focus-dark
--zui-toggle-track-ring-offset-focus	oklch(98.4% 0.003 247.858)	Light	--zui-toggle-track-ring-offset-focus-dark
--zui-toggle-track-border-checked	oklch(71.5% 0.143 215.221 / 0.4)	Light	--zui-toggle-track-border-checked-dark
--zui-toggle-track-default-bg-checked	oklch(78.9% 0.154 211.53 / 0.7)	Light	--zui-toggle-track-default-bg-checked-dark
--zui-toggle-track-success-border-checked	oklch(69.6% 0.17 162.48 / 0.7)	Light	--zui-toggle-track-success-border-checked-dark
--zui-toggle-track-success-bg-checked	oklch(76.5% 0.177 163.223 / 0.8)	Light	--zui-toggle-track-success-bg-checked-dark
--zui-toggle-track-destructive-border-checked	oklch(64.5% 0.246 16.439 / 0.4)	Light	--zui-toggle-track-destructive-border-checked-dark
--zui-toggle-track-destructive-bg-checked	oklch(71.2% 0.194 13.428 / 0.8)	Light	--zui-toggle-track-destructive-bg-checked-dark
--zui-toggle-track-neutral-border-checked	oklch(55.4% 0.046 257.417 / 0.4)	Light	--zui-toggle-track-neutral-border-checked-dark
--zui-toggle-track-neutral-bg-checked	oklch(70.4% 0.04 256.788 / 0.9)	Light	--zui-toggle-track-neutral-bg-checked-dark
--zui-toggle-track-indigo-border-checked	oklch(58.5% 0.233 277.117 / 0.4)	Light	--zui-toggle-track-indigo-border-checked-dark
--zui-toggle-track-indigo-bg-checked	oklch(67.3% 0.182 276.935 / 0.8)	Light	--zui-toggle-track-indigo-bg-checked-dark
--zui-toggle-track-purple-border-checked	oklch(62.7% 0.265 303.9 / 0.4)	Light	--zui-toggle-track-purple-border-checked-dark
--zui-toggle-track-purple-bg-checked	oklch(71.4% 0.203 305.504 / 0.8)	Light	--zui-toggle-track-purple-bg-checked-dark
--zui-toggle-track-pink-border-checked	oklch(65.6% 0.241 354.308 / 0.4)	Light	--zui-toggle-track-pink-border-checked-dark
--zui-toggle-track-pink-bg-checked	oklch(71.8% 0.202 349.761 / 0.8)	Light	--zui-toggle-track-pink-bg-checked-dark
--zui-toggle-track-orange-border-checked	oklch(70.5% 0.213 47.604 / 0.4)	Light	--zui-toggle-track-orange-border-checked-dark
--zui-toggle-track-orange-bg-checked	oklch(75% 0.183 55.934 / 0.8)	Light	--zui-toggle-track-orange-bg-checked-dark
--zui-toggle-track-yellow-border-checked	oklch(79.5% 0.184 86.047 / 0.4)	Light	--zui-toggle-track-yellow-border-checked-dark
--zui-toggle-track-yellow-bg-checked	oklch(85.2% 0.199 91.936 / 0.8)	Light	--zui-toggle-track-yellow-bg-checked-dark
--zui-toggle-track-green-border-checked	oklch(72.3% 0.219 149.579 / 0.4)	Light	--zui-toggle-track-green-border-checked-dark
--zui-toggle-track-green-bg-checked	oklch(79.2% 0.209 151.711 / 0.8)	Light	--zui-toggle-track-green-bg-checked-dark
--zui-toggle-track-teal-border-checked	oklch(70.4% 0.14 182.503 / 0.4)	Light	--zui-toggle-track-teal-border-checked-dark
--zui-toggle-track-teal-bg-checked	oklch(77.7% 0.152 181.912 / 0.8)	Light	--zui-toggle-track-teal-bg-checked-dark
--zui-toggle-track-cyan-border-checked	oklch(71.5% 0.143 215.221 / 0.4)	Light	--zui-toggle-track-cyan-border-checked-dark
--zui-toggle-track-cyan-bg-checked	oklch(78.9% 0.154 211.53 / 0.8)	Light	--zui-toggle-track-cyan-bg-checked-dark
--zui-toggle-track-lime-border-checked	oklch(76.8% 0.233 130.85 / 0.4)	Light	--zui-toggle-track-lime-border-checked-dark
--zui-toggle-track-lime-bg-checked	oklch(84.1% 0.238 128.85 / 0.8)	Light	--zui-toggle-track-lime-bg-checked-dark
--zui-toggle-track-emerald-border-checked	oklch(69.6% 0.17 162.48 / 0.4)	Light	--zui-toggle-track-emerald-border-checked-dark
--zui-toggle-track-emerald-bg-checked	oklch(76.5% 0.177 163.223 / 0.8)	Light	--zui-toggle-track-emerald-bg-checked-dark
--zui-toggle-track-rose-border-checked	oklch(64.5% 0.246 16.439 / 0.4)	Light	--zui-toggle-track-rose-border-checked-dark
--zui-toggle-track-rose-bg-checked	oklch(71.2% 0.194 13.428 / 0.8)	Light	--zui-toggle-track-rose-bg-checked-dark
--zui-toggle-track-slate-border-checked	oklch(55.4% 0.046 257.417 / 0.4)	Light	--zui-toggle-track-slate-border-checked-dark
--zui-toggle-track-slate-bg-checked	oklch(70.4% 0.04 256.788 / 0.9)	Light	--zui-toggle-track-slate-bg-checked-dark
--zui-toggle-track-zinc-border-checked	oklch(70.5% 0.015 286.067 / 0.4)	Light	--zui-toggle-track-zinc-border-checked-dark
--zui-toggle-track-zinc-bg-checked	oklch(44.2% 0.017 285.786 / 0.9)	Light	--zui-toggle-track-zinc-bg-checked-dark
--zui-toggle-track-gray-border-checked	oklch(70.7% 0.022 261.325 / 0.4)	Light	--zui-toggle-track-gray-border-checked-dark
--zui-toggle-track-gray-bg-checked	oklch(70.7% 0.022 261.325 / 0.8)	Light	--zui-toggle-track-gray-bg-checked-dark
--zui-toggle-track-stone-bg	oklch(86.9% 0.005 56.366)	Light	--zui-toggle-track-stone-bg-dark
--zui-toggle-track-stone-border-checked	oklch(70.9% 0.01 56.259 / 0.4)	Light	--zui-toggle-track-stone-border-checked-dark
--zui-toggle-track-stone-bg-checked	oklch(44.4% 0.011 73.639 / 0.9)	Light	--zui-toggle-track-stone-bg-checked-dark
--zui-toggle-track-gradient-blue-bg	oklch(80.9% 0.105 251.813)	Shared	none
--zui-toggle-track-gradient-blue-from	oklch(42.4% 0.199 265.638)	Shared	none
--zui-toggle-track-gradient-blue-to	oklch(43.8% 0.218 303.724)	Shared	none
--zui-toggle-track-gradient-green-bg	oklch(87.1% 0.15 154.449)	Shared	none
--zui-toggle-track-gradient-green-from	oklch(44.8% 0.119 151.328)	Shared	none
--zui-toggle-track-gradient-green-to	oklch(45.3% 0.124 130.933)	Shared	none
--zui-toggle-track-gradient-red-bg	oklch(80.8% 0.114 19.571)	Shared	none
--zui-toggle-track-gradient-red-from	oklch(44.4% 0.177 26.899)	Shared	none
--zui-toggle-track-gradient-red-to	oklch(45.9% 0.187 3.815)	Shared	none
--zui-toggle-track-gradient-yellow-bg	oklch(90.5% 0.182 98.111)	Shared	none
--zui-toggle-track-gradient-yellow-from	oklch(47.6% 0.114 61.907)	Shared	none
--zui-toggle-track-gradient-yellow-to	oklch(47% 0.157 37.304)	Shared	none
--zui-toggle-track-gradient-purple-bg	oklch(82.7% 0.119 306.383)	Shared	none
--zui-toggle-track-gradient-purple-from	oklch(43.8% 0.218 303.724)	Shared	none
--zui-toggle-track-gradient-purple-to	oklch(45.9% 0.187 3.815)	Shared	none
--zui-toggle-track-gradient-teal-bg	oklch(85.5% 0.138 181.071)	Shared	none
--zui-toggle-track-gradient-teal-from	oklch(43.7% 0.078 188.216)	Shared	none
--zui-toggle-track-gradient-teal-to	oklch(45% 0.085 224.283)	Shared	none
--zui-toggle-track-gradient-indigo-bg	oklch(78.5% 0.115 274.713)	Shared	none
--zui-toggle-track-gradient-indigo-from	oklch(39.8% 0.195 277.366)	Shared	none
--zui-toggle-track-gradient-indigo-to	oklch(43.8% 0.218 303.724)	Shared	none
--zui-toggle-track-gradient-pink-bg	oklch(82.3% 0.12 346.018)	Shared	none
--zui-toggle-track-gradient-pink-from	oklch(45.9% 0.187 3.815)	Shared	none
--zui-toggle-track-gradient-pink-to	oklch(45.5% 0.188 13.697)	Shared	none
--zui-toggle-track-gradient-orange-bg	oklch(83.7% 0.128 66.29)	Shared	none
--zui-toggle-track-gradient-orange-from	oklch(47% 0.157 37.304)	Shared	none
--zui-toggle-track-gradient-orange-to	oklch(44.4% 0.177 26.899)	Shared	none
--zui-toggle-thumb-border	oklch(20.8% 0.042 265.755 / 0.3)	Shared	none
--zui-toggle-thumb-shadow	0 1px 2px rgba(15,23,42,0.12)	Shared	none
--zui-toggle-thumb-colors-default-bg	#ffffff	Shared	none
--zui-toggle-thumb-colors-success-bg	oklch(69.6% 0.17 162.48)	Shared	none
--zui-toggle-thumb-colors-destructive-bg	oklch(64.5% 0.246 16.439)	Shared	none
--zui-toggle-thumb-colors-neutral-bg	oklch(55.4% 0.046 257.417)	Shared	none
--zui-toggle-thumb-colors-indigo-bg	oklch(58.5% 0.233 277.117)	Shared	none
--zui-toggle-thumb-colors-purple-bg	oklch(62.7% 0.265 303.9)	Shared	none
--zui-toggle-thumb-colors-pink-bg	oklch(65.6% 0.241 354.308)	Shared	none
--zui-toggle-thumb-colors-orange-bg	oklch(70.5% 0.213 47.604)	Shared	none
--zui-toggle-thumb-colors-yellow-bg	oklch(79.5% 0.184 86.047)	Shared	none
--zui-toggle-thumb-colors-green-bg	oklch(72.3% 0.219 149.579)	Shared	none
--zui-toggle-thumb-colors-teal-bg	oklch(70.4% 0.14 182.503)	Shared	none
--zui-toggle-thumb-colors-cyan-bg	oklch(71.5% 0.143 215.221)	Shared	none
--zui-toggle-thumb-colors-lime-bg	oklch(76.8% 0.233 130.85)	Shared	none
--zui-toggle-thumb-colors-emerald-bg	oklch(69.6% 0.17 162.48)	Shared	none
--zui-toggle-thumb-colors-rose-bg	oklch(64.5% 0.246 16.439)	Shared	none
--zui-toggle-thumb-colors-slate-bg	oklch(55.4% 0.046 257.417)	Shared	none
--zui-toggle-thumb-colors-zinc-bg	oklch(55.2% 0.016 285.938)	Shared	none
--zui-toggle-thumb-colors-gray-bg	oklch(55.1% 0.027 264.364)	Shared	none
--zui-toggle-thumb-colors-stone-bg	oklch(55.3% 0.013 58.071)	Shared	none
--zui-toggle-thumb-colors-gradient-blue-bg	oklch(62.3% 0.214 259.815)	Shared	none
--zui-toggle-thumb-colors-gradient-green-bg	oklch(72.3% 0.219 149.579)	Shared	none
--zui-toggle-thumb-colors-gradient-red-bg	oklch(63.7% 0.237 25.331)	Shared	none
--zui-toggle-thumb-colors-gradient-yellow-bg	oklch(79.5% 0.184 86.047)	Shared	none
--zui-toggle-thumb-colors-gradient-purple-bg	oklch(62.7% 0.265 303.9)	Shared	none
--zui-toggle-thumb-colors-gradient-teal-bg	oklch(70.4% 0.14 182.503)	Shared	none
--zui-toggle-thumb-colors-gradient-indigo-bg	oklch(58.5% 0.233 277.117)	Shared	none
--zui-toggle-thumb-colors-gradient-pink-bg	oklch(65.6% 0.241 354.308)	Shared	none
--zui-toggle-thumb-colors-gradient-orange-bg	oklch(70.5% 0.213 47.604)	Shared	none
--zui-toggle-track-border-dark	#ffffff1a	Dark	--zui-toggle-track-border
--zui-toggle-track-ring-focus-dark	oklch(86.9% 0.022 252.894)	Dark	--zui-toggle-track-ring-focus
--zui-toggle-track-ring-offset-focus-dark	Override with your dark theme value	Dark	--zui-toggle-track-ring-offset-focus
--zui-toggle-track-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-border-checked
--zui-toggle-track-default-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-default-bg-checked
--zui-toggle-track-success-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-success-border-checked
--zui-toggle-track-success-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-success-bg-checked
--zui-toggle-track-destructive-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-destructive-border-checked
--zui-toggle-track-destructive-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-destructive-bg-checked
--zui-toggle-track-neutral-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-neutral-border-checked
--zui-toggle-track-neutral-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-neutral-bg-checked
--zui-toggle-track-indigo-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-indigo-border-checked
--zui-toggle-track-indigo-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-indigo-bg-checked
--zui-toggle-track-purple-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-purple-border-checked
--zui-toggle-track-purple-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-purple-bg-checked
--zui-toggle-track-pink-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-pink-border-checked
--zui-toggle-track-pink-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-pink-bg-checked
--zui-toggle-track-orange-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-orange-border-checked
--zui-toggle-track-orange-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-orange-bg-checked
--zui-toggle-track-yellow-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-yellow-border-checked
--zui-toggle-track-yellow-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-yellow-bg-checked
--zui-toggle-track-green-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-green-border-checked
--zui-toggle-track-green-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-green-bg-checked
--zui-toggle-track-teal-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-teal-border-checked
--zui-toggle-track-teal-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-teal-bg-checked
--zui-toggle-track-cyan-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-cyan-border-checked
--zui-toggle-track-cyan-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-cyan-bg-checked
--zui-toggle-track-lime-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-lime-border-checked
--zui-toggle-track-lime-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-lime-bg-checked
--zui-toggle-track-emerald-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-emerald-border-checked
--zui-toggle-track-emerald-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-emerald-bg-checked
--zui-toggle-track-rose-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-rose-border-checked
--zui-toggle-track-rose-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-rose-bg-checked
--zui-toggle-track-slate-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-slate-border-checked
--zui-toggle-track-slate-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-slate-bg-checked
--zui-toggle-track-zinc-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-zinc-border-checked
--zui-toggle-track-zinc-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-zinc-bg-checked
--zui-toggle-track-gray-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-gray-border-checked
--zui-toggle-track-gray-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-gray-bg-checked
--zui-toggle-track-stone-bg-dark	Override with your dark theme value	Dark	--zui-toggle-track-stone-bg
--zui-toggle-track-stone-border-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-stone-border-checked
--zui-toggle-track-stone-bg-checked-dark	Override with your dark theme value	Dark	--zui-toggle-track-stone-bg-checked

Tooltip

Override these tooltip variables on :root, a theme selector, or a component wrapper.

112 tokens56 dark

Variable	Fallback	Theme	Pair
--zui-tooltip-default-bg	#ffffff	Light	--zui-tooltip-default-bg-dark
--zui-tooltip-default-fg	oklch(20.8% 0.042 265.755)	Light	--zui-tooltip-default-fg-dark
--zui-tooltip-outline-bg	#000000	Light	--zui-tooltip-outline-bg-dark
--zui-tooltip-outline-fg	#ffffff	Light	--zui-tooltip-outline-fg-dark
--zui-tooltip-ghost-bg	oklch(27.8% 0.033 256.848)	Light	--zui-tooltip-ghost-bg-dark
--zui-tooltip-ghost-fg	#ffffffe6	Light	--zui-tooltip-ghost-fg-dark
--zui-tooltip-glass-border	#00000026	Light	--zui-tooltip-glass-border-dark
--zui-tooltip-glass-bg	#0000001a	Light	--zui-tooltip-glass-bg-dark
--zui-tooltip-glass-fg	oklch(20.8% 0.042 265.755)	Light	--zui-tooltip-glass-fg-dark
--zui-tooltip-emerald-bg	oklch(43.2% 0.095 166.913)	Light	--zui-tooltip-emerald-bg-dark
--zui-tooltip-emerald-fg	#ffffff	Light	--zui-tooltip-emerald-fg-dark
--zui-tooltip-indigo-bg	oklch(39.8% 0.195 277.366)	Light	--zui-tooltip-indigo-bg-dark
--zui-tooltip-indigo-fg	#ffffff	Light	--zui-tooltip-indigo-fg-dark
--zui-tooltip-purple-bg	oklch(43.8% 0.218 303.724)	Light	--zui-tooltip-purple-bg-dark
--zui-tooltip-purple-fg	#ffffff	Light	--zui-tooltip-purple-fg-dark
--zui-tooltip-pink-bg	oklch(45.9% 0.187 3.815)	Light	--zui-tooltip-pink-bg-dark
--zui-tooltip-pink-fg	#ffffff	Light	--zui-tooltip-pink-fg-dark
--zui-tooltip-rose-bg	oklch(45.5% 0.188 13.697)	Light	--zui-tooltip-rose-bg-dark
--zui-tooltip-rose-fg	#ffffff	Light	--zui-tooltip-rose-fg-dark
--zui-tooltip-sky-bg	oklch(50% 0.134 242.749)	Light	--zui-tooltip-sky-bg-dark
--zui-tooltip-sky-fg	#ffffff	Light	--zui-tooltip-sky-fg-dark
--zui-tooltip-teal-bg	oklch(43.7% 0.078 188.216)	Light	--zui-tooltip-teal-bg-dark
--zui-tooltip-teal-fg	#ffffff	Light	--zui-tooltip-teal-fg-dark
--zui-tooltip-yellow-bg	oklch(47.6% 0.114 61.907)	Light	--zui-tooltip-yellow-bg-dark
--zui-tooltip-yellow-fg	#ffffff	Light	--zui-tooltip-yellow-fg-dark
--zui-tooltip-orange-bg	oklch(47% 0.157 37.304)	Light	--zui-tooltip-orange-bg-dark
--zui-tooltip-orange-fg	#ffffff	Light	--zui-tooltip-orange-fg-dark
--zui-tooltip-green-bg	oklch(44.8% 0.119 151.328)	Light	--zui-tooltip-green-bg-dark
--zui-tooltip-green-fg	#ffffff	Light	--zui-tooltip-green-fg-dark
--zui-tooltip-gradient-blue-from	oklch(42.4% 0.199 265.638)	Light	--zui-tooltip-gradient-blue-from-dark
--zui-tooltip-gradient-blue-to	oklch(43.8% 0.218 303.724)	Light	--zui-tooltip-gradient-blue-to-dark
--zui-tooltip-gradient-blue-fg	#ffffff	Light	--zui-tooltip-gradient-blue-fg-dark
--zui-tooltip-gradient-green-from	oklch(44.8% 0.119 151.328)	Light	--zui-tooltip-gradient-green-from-dark
--zui-tooltip-gradient-green-to	oklch(45.3% 0.124 130.933)	Light	--zui-tooltip-gradient-green-to-dark
--zui-tooltip-gradient-green-fg	#ffffff	Light	--zui-tooltip-gradient-green-fg-dark
--zui-tooltip-gradient-red-from	oklch(44.4% 0.177 26.899)	Light	--zui-tooltip-gradient-red-from-dark
--zui-tooltip-gradient-red-to	oklch(45.9% 0.187 3.815)	Light	--zui-tooltip-gradient-red-to-dark
--zui-tooltip-gradient-red-fg	#ffffff	Light	--zui-tooltip-gradient-red-fg-dark
--zui-tooltip-gradient-yellow-from	oklch(47.6% 0.114 61.907)	Light	--zui-tooltip-gradient-yellow-from-dark
--zui-tooltip-gradient-yellow-to	oklch(47% 0.157 37.304)	Light	--zui-tooltip-gradient-yellow-to-dark
--zui-tooltip-gradient-yellow-fg	#ffffff	Light	--zui-tooltip-gradient-yellow-fg-dark
--zui-tooltip-gradient-purple-from	oklch(43.8% 0.218 303.724)	Light	--zui-tooltip-gradient-purple-from-dark
--zui-tooltip-gradient-purple-to	oklch(45.9% 0.187 3.815)	Light	--zui-tooltip-gradient-purple-to-dark
--zui-tooltip-gradient-purple-fg	#ffffff	Light	--zui-tooltip-gradient-purple-fg-dark
--zui-tooltip-gradient-teal-from	oklch(43.7% 0.078 188.216)	Light	--zui-tooltip-gradient-teal-from-dark
--zui-tooltip-gradient-teal-to	oklch(45% 0.085 224.283)	Light	--zui-tooltip-gradient-teal-to-dark
--zui-tooltip-gradient-teal-fg	#ffffff	Light	--zui-tooltip-gradient-teal-fg-dark
--zui-tooltip-gradient-indigo-from	oklch(39.8% 0.195 277.366)	Light	--zui-tooltip-gradient-indigo-from-dark
--zui-tooltip-gradient-indigo-to	oklch(43.8% 0.218 303.724)	Light	--zui-tooltip-gradient-indigo-to-dark
--zui-tooltip-gradient-indigo-fg	#ffffff	Light	--zui-tooltip-gradient-indigo-fg-dark
--zui-tooltip-gradient-pink-from	oklch(45.9% 0.187 3.815)	Light	--zui-tooltip-gradient-pink-from-dark
--zui-tooltip-gradient-pink-to	oklch(45.5% 0.188 13.697)	Light	--zui-tooltip-gradient-pink-to-dark
--zui-tooltip-gradient-pink-fg	#ffffff	Light	--zui-tooltip-gradient-pink-fg-dark
--zui-tooltip-gradient-orange-from	oklch(47% 0.157 37.304)	Light	--zui-tooltip-gradient-orange-from-dark
--zui-tooltip-gradient-orange-to	oklch(44.4% 0.177 26.899)	Light	--zui-tooltip-gradient-orange-to-dark
--zui-tooltip-gradient-orange-fg	#ffffff	Light	--zui-tooltip-gradient-orange-fg-dark
--zui-tooltip-default-bg-dark	#000000	Dark	--zui-tooltip-default-bg
--zui-tooltip-default-fg-dark	#ffffff	Dark	--zui-tooltip-default-fg
--zui-tooltip-outline-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-outline-bg
--zui-tooltip-outline-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-outline-fg
--zui-tooltip-ghost-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-ghost-bg
--zui-tooltip-ghost-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-ghost-fg
--zui-tooltip-glass-border-dark	Override with your dark theme value	Dark	--zui-tooltip-glass-border
--zui-tooltip-glass-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-glass-bg
--zui-tooltip-glass-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-glass-fg
--zui-tooltip-emerald-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-emerald-bg
--zui-tooltip-emerald-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-emerald-fg
--zui-tooltip-indigo-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-indigo-bg
--zui-tooltip-indigo-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-indigo-fg
--zui-tooltip-purple-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-purple-bg
--zui-tooltip-purple-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-purple-fg
--zui-tooltip-pink-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-pink-bg
--zui-tooltip-pink-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-pink-fg
--zui-tooltip-rose-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-rose-bg
--zui-tooltip-rose-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-rose-fg
--zui-tooltip-sky-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-sky-bg
--zui-tooltip-sky-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-sky-fg
--zui-tooltip-teal-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-teal-bg
--zui-tooltip-teal-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-teal-fg
--zui-tooltip-yellow-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-yellow-bg
--zui-tooltip-yellow-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-yellow-fg
--zui-tooltip-orange-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-orange-bg
--zui-tooltip-orange-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-orange-fg
--zui-tooltip-green-bg-dark	Override with your dark theme value	Dark	--zui-tooltip-green-bg
--zui-tooltip-green-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-green-fg
--zui-tooltip-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-blue-from
--zui-tooltip-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-blue-to
--zui-tooltip-gradient-blue-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-blue-fg
--zui-tooltip-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-green-from
--zui-tooltip-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-green-to
--zui-tooltip-gradient-green-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-green-fg
--zui-tooltip-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-red-from
--zui-tooltip-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-red-to
--zui-tooltip-gradient-red-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-red-fg
--zui-tooltip-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-yellow-from
--zui-tooltip-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-yellow-to
--zui-tooltip-gradient-yellow-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-yellow-fg
--zui-tooltip-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-purple-from
--zui-tooltip-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-purple-to
--zui-tooltip-gradient-purple-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-purple-fg
--zui-tooltip-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-teal-from
--zui-tooltip-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-teal-to
--zui-tooltip-gradient-teal-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-teal-fg
--zui-tooltip-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-indigo-from
--zui-tooltip-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-indigo-to
--zui-tooltip-gradient-indigo-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-indigo-fg
--zui-tooltip-gradient-pink-from-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-pink-from
--zui-tooltip-gradient-pink-to-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-pink-to
--zui-tooltip-gradient-pink-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-pink-fg
--zui-tooltip-gradient-orange-from-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-orange-from
--zui-tooltip-gradient-orange-to-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-orange-to
--zui-tooltip-gradient-orange-fg-dark	Override with your dark theme value	Dark	--zui-tooltip-gradient-orange-fg

TreeView

Override these TreeView variables on :root, a theme selector, or a component wrapper.

137 tokens68 dark

Typography

Override these typography variables on :root, a theme selector, or a component wrapper.

81 tokens29 dark

Variable	Fallback	Theme	Pair
--zui-typography-default-fg	oklch(20.8% 0.042 265.755)	Light	--zui-typography-default-fg-dark
--zui-typography-default-border	#00000026	Light	--zui-typography-default-border-dark
--zui-typography-muted-fg	oklch(55.4% 0.046 257.417)	Light	--zui-typography-muted-fg-dark
--zui-typography-muted-border	#00000026	Light	--zui-typography-muted-border-dark
--zui-typography-primary-fg	oklch(52% 0.105 223.128)	Light	--zui-typography-primary-fg-dark
--zui-typography-primary-border	oklch(86.5% 0.127 207.078 / 0.4)	Light	--zui-typography-primary-border-dark
--zui-typography-secondary-fg	oklch(44.6% 0.043 257.281)	Light	--zui-typography-secondary-fg-dark
--zui-typography-secondary-border	#00000026	Light	--zui-typography-secondary-border-dark
--zui-typography-accent-fg	oklch(49.1% 0.27 292.581)	Light	--zui-typography-accent-fg-dark
--zui-typography-accent-border	oklch(81.1% 0.111 293.571 / 0.4)	Light	--zui-typography-accent-border-dark
--zui-typography-destructive-fg	oklch(58.6% 0.253 17.585)	Light	--zui-typography-destructive-fg-dark
--zui-typography-destructive-border	oklch(81% 0.117 11.638 / 0.4)	Light	--zui-typography-destructive-border-dark
--zui-typography-info-fg	oklch(50% 0.134 242.749)	Light	--zui-typography-info-fg-dark
--zui-typography-info-border	oklch(82.8% 0.111 230.318 / 0.4)	Light	--zui-typography-info-border-dark
--zui-typography-success-fg	oklch(50.8% 0.118 165.612)	Light	--zui-typography-success-fg-dark
--zui-typography-success-border	oklch(84.5% 0.143 164.978 / 0.4)	Light	--zui-typography-success-border-dark
--zui-typography-warning-fg	oklch(55.5% 0.163 48.998)	Light	--zui-typography-warning-fg-dark
--zui-typography-warning-border	oklch(87.9% 0.169 91.605 / 0.4)	Light	--zui-typography-warning-border-dark
--zui-typography-error-fg	oklch(50.5% 0.213 27.518)	Light	--zui-typography-error-fg-dark
--zui-typography-error-border	oklch(80.8% 0.114 19.571 / 0.4)	Light	--zui-typography-error-border-dark
--zui-typography-gradient-pink-violet-from	oklch(59.2% 0.249 0.584)	Light	--zui-typography-gradient-pink-violet-from-dark
--zui-typography-gradient-pink-violet-to	oklch(54.1% 0.281 293.009)	Light	--zui-typography-gradient-pink-violet-to-dark
--zui-typography-gradient-pink-violet-fg	transparent	Light	--zui-typography-gradient-pink-violet-fg-dark
--zui-typography-gradient-pink-violet-border	oklch(81.1% 0.111 293.571 / 0.4)	Light	--zui-typography-gradient-pink-violet-border-dark
--zui-typography-gradient-cyan-violet-from	oklch(60.9% 0.126 221.723)	Light	--zui-typography-gradient-cyan-violet-from-dark
--zui-typography-gradient-cyan-violet-to	oklch(54.1% 0.281 293.009)	Light	--zui-typography-gradient-cyan-violet-to-dark
--zui-typography-gradient-cyan-violet-fg	transparent	Light	--zui-typography-gradient-cyan-violet-fg-dark
--zui-typography-gradient-cyan-violet-border	oklch(81.1% 0.111 293.571 / 0.4)	Light	--zui-typography-gradient-cyan-violet-border-dark
--zui-typography-gradient-cyan-blue-from	oklch(60.9% 0.126 221.723)	Light	--zui-typography-gradient-cyan-blue-from-dark
--zui-typography-gradient-cyan-blue-to	oklch(54.6% 0.245 262.881)	Shared	none
--zui-typography-gradient-cyan-blue-fg	transparent	Shared	none
--zui-typography-gradient-cyan-blue-border	oklch(80.9% 0.105 251.813 / 0.4)	Shared	none
--zui-typography-gradient-cyan-green-from	oklch(60.9% 0.126 221.723)	Shared	none
--zui-typography-gradient-cyan-green-to	oklch(62.7% 0.194 149.214)	Shared	none
--zui-typography-gradient-cyan-green-fg	transparent	Shared	none
--zui-typography-gradient-cyan-green-border	oklch(87.1% 0.15 154.449 / 0.4)	Shared	none
--zui-typography-gradient-cyan-orange-from	oklch(60.9% 0.126 221.723)	Shared	none
--zui-typography-gradient-cyan-orange-to	oklch(64.6% 0.222 41.116)	Shared	none
--zui-typography-gradient-cyan-orange-fg	transparent	Shared	none
--zui-typography-gradient-cyan-orange-border	oklch(83.7% 0.128 66.29 / 0.4)	Shared	none
--zui-typography-gradient-cyan-red-from	oklch(60.9% 0.126 221.723)	Shared	none
--zui-typography-gradient-cyan-red-to	oklch(57.7% 0.245 27.325)	Shared	none
--zui-typography-gradient-cyan-red-fg	transparent	Shared	none
--zui-typography-gradient-cyan-red-border	oklch(80.8% 0.114 19.571 / 0.4)	Shared	none
--zui-typography-gradient-cyan-purple-from	oklch(60.9% 0.126 221.723)	Shared	none
--zui-typography-gradient-cyan-purple-to	oklch(55.8% 0.288 302.321)	Shared	none
--zui-typography-gradient-cyan-purple-fg	transparent	Shared	none
--zui-typography-gradient-cyan-purple-border	oklch(82.7% 0.119 306.383 / 0.4)	Shared	none
--zui-typography-gradient-cyan-pink-from	oklch(60.9% 0.126 221.723)	Shared	none
--zui-typography-gradient-cyan-pink-to	oklch(59.2% 0.249 0.584)	Shared	none
--zui-typography-gradient-cyan-pink-fg	transparent	Shared	none
--zui-typography-gradient-cyan-pink-border	oklch(82.3% 0.12 346.018 / 0.4)	Shared	none
--zui-typography-default-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-typography-default-fg
--zui-typography-default-border-dark	#ffffff26	Dark	--zui-typography-default-border
--zui-typography-muted-fg-dark	Override with your dark theme value	Dark	--zui-typography-muted-fg
--zui-typography-muted-border-dark	Override with your dark theme value	Dark	--zui-typography-muted-border
--zui-typography-primary-fg-dark	Override with your dark theme value	Dark	--zui-typography-primary-fg
--zui-typography-primary-border-dark	Override with your dark theme value	Dark	--zui-typography-primary-border
--zui-typography-secondary-fg-dark	Override with your dark theme value	Dark	--zui-typography-secondary-fg
--zui-typography-secondary-border-dark	Override with your dark theme value	Dark	--zui-typography-secondary-border
--zui-typography-accent-fg-dark	Override with your dark theme value	Dark	--zui-typography-accent-fg
--zui-typography-accent-border-dark	Override with your dark theme value	Dark	--zui-typography-accent-border
--zui-typography-destructive-fg-dark	Override with your dark theme value	Dark	--zui-typography-destructive-fg
--zui-typography-destructive-border-dark	Override with your dark theme value	Dark	--zui-typography-destructive-border
--zui-typography-info-fg-dark	Override with your dark theme value	Dark	--zui-typography-info-fg
--zui-typography-info-border-dark	Override with your dark theme value	Dark	--zui-typography-info-border
--zui-typography-success-fg-dark	Override with your dark theme value	Dark	--zui-typography-success-fg
--zui-typography-success-border-dark	Override with your dark theme value	Dark	--zui-typography-success-border
--zui-typography-warning-fg-dark	Override with your dark theme value	Dark	--zui-typography-warning-fg
--zui-typography-warning-border-dark	Override with your dark theme value	Dark	--zui-typography-warning-border
--zui-typography-error-fg-dark	Override with your dark theme value	Dark	--zui-typography-error-fg
--zui-typography-error-border-dark	Override with your dark theme value	Dark	--zui-typography-error-border
--zui-typography-gradient-pink-violet-from-dark	Override with your dark theme value	Dark	--zui-typography-gradient-pink-violet-from
--zui-typography-gradient-pink-violet-to-dark	Override with your dark theme value	Dark	--zui-typography-gradient-pink-violet-to
--zui-typography-gradient-pink-violet-fg-dark	Override with your dark theme value	Dark	--zui-typography-gradient-pink-violet-fg
--zui-typography-gradient-pink-violet-border-dark	Override with your dark theme value	Dark	--zui-typography-gradient-pink-violet-border
--zui-typography-gradient-cyan-violet-from-dark	Override with your dark theme value	Dark	--zui-typography-gradient-cyan-violet-from
--zui-typography-gradient-cyan-violet-to-dark	Override with your dark theme value	Dark	--zui-typography-gradient-cyan-violet-to
--zui-typography-gradient-cyan-violet-fg-dark	Override with your dark theme value	Dark	--zui-typography-gradient-cyan-violet-fg
--zui-typography-gradient-cyan-violet-border-dark	Override with your dark theme value	Dark	--zui-typography-gradient-cyan-violet-border
--zui-typography-gradient-cyan-blue-from-dark	Override with your dark theme value	Dark	--zui-typography-gradient-cyan-blue-from

Token contract

Zentauri UI exposes theme controls as CSS variables prefixed with --zui-. Component class strings include hardcoded fallbacks, so a missing override still renders with the library default.

The global token source is src/design-system/tokens.ts. This docs page reads those exported constants and derives the visible reference table from the CSS variable declarations inside them.

Theming strategy

Start with global tokens for focus rings, ring offsets, and shared radius. Then override component-level variables on each component page when you need appearance-specific colors, borders, shadows, or hover states.

Keep light and dark values paired so Tailwind scans both class variants and your theme remains predictable across mode changes.

Common use cases

Set brand focus-ring colors across every interactive primitive.
Align light and dark mode ring offsets with an app shell background.
Standardize large-radius surfaces without editing component source.
Document a product theme for downstream teams that vendor components with the CLI.

FAQ

Are these the only CSS variables Zentauri UI supports?

No. This page covers global tokens from src/design-system/tokens.ts. Component pages include their own CSS variable sections for component-specific appearances, slots, and states.

Do I need to override dark variables?

Only when your dark theme should differ from the shipped fallback. Dark tokens use the same name with -dark appended.

Where should overrides live?

Place broad theme overrides on :root and .dark, or scope them to a wrapper class when a product surface needs a local theme.

Variable	Fallback	Theme	Pair
--zui-accordion-default-divider	#0000001a	Light	--zui-accordion-default-divider-dark
--zui-accordion-default-border	#0000001a	Light	--zui-accordion-default-border-dark
--zui-accordion-outline-divider	#0000001a	Light	--zui-accordion-outline-divider-dark
--zui-accordion-outline-border	#00000026	Light	--zui-accordion-outline-border-dark
--zui-accordion-ghost-divider	#0000000d	Light	--zui-accordion-ghost-divider-dark
--zui-accordion-sky-divider	oklch(44.3% 0.11 240.79)	Light	--zui-accordion-sky-divider-dark
--zui-accordion-sky-border	oklch(44.3% 0.11 240.79)	Light	--zui-accordion-sky-border-dark
--zui-accordion-rose-divider	oklch(45.5% 0.188 13.697)	Light	--zui-accordion-rose-divider-dark
--zui-accordion-rose-border	oklch(45.5% 0.188 13.697)	Light	--zui-accordion-rose-border-dark
--zui-accordion-purple-divider	oklch(43.8% 0.218 303.724)	Light	--zui-accordion-purple-divider-dark
--zui-accordion-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-accordion-purple-border-dark
--zui-accordion-pink-divider	oklch(45.9% 0.187 3.815)	Light	--zui-accordion-pink-divider-dark
--zui-accordion-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-accordion-pink-border-dark
--zui-accordion-orange-divider	oklch(47% 0.157 37.304)	Light	--zui-accordion-orange-divider-dark
--zui-accordion-orange-border	oklch(47% 0.157 37.304)	Light	--zui-accordion-orange-border-dark
--zui-accordion-yellow-divider	oklch(47.6% 0.114 61.907)	Light	--zui-accordion-yellow-divider-dark
--zui-accordion-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-accordion-yellow-border-dark
--zui-accordion-teal-divider	oklch(43.7% 0.078 188.216)	Light	--zui-accordion-teal-divider-dark
--zui-accordion-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-accordion-teal-border-dark
--zui-accordion-indigo-divider	oklch(39.8% 0.195 277.366)	Light	--zui-accordion-indigo-divider-dark
--zui-accordion-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-accordion-indigo-border-dark
--zui-accordion-emerald-divider	oklch(43.2% 0.095 166.913)	Light	--zui-accordion-emerald-divider-dark
--zui-accordion-emerald-border	oklch(43.2% 0.095 166.913)	Light	--zui-accordion-emerald-border-dark
--zui-accordion-gradient-blue-divider	oklch(42.4% 0.199 265.638)	Light	--zui-accordion-gradient-blue-divider-dark
--zui-accordion-gradient-blue-border	oklch(42.4% 0.199 265.638)	Light	--zui-accordion-gradient-blue-border-dark
--zui-accordion-gradient-green-divider	oklch(44.8% 0.119 151.328)	Light	--zui-accordion-gradient-green-divider-dark
--zui-accordion-gradient-green-border	oklch(44.8% 0.119 151.328)	Light	--zui-accordion-gradient-green-border-dark
--zui-accordion-gradient-red-divider	oklch(44.4% 0.177 26.899)	Light	--zui-accordion-gradient-red-divider-dark
--zui-accordion-gradient-red-border	oklch(44.4% 0.177 26.899)	Light	--zui-accordion-gradient-red-border-dark
--zui-accordion-gradient-yellow-divider	oklch(47.6% 0.114 61.907)	Light	--zui-accordion-gradient-yellow-divider-dark
--zui-accordion-gradient-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-accordion-gradient-yellow-border-dark
--zui-accordion-gradient-purple-divider	oklch(43.8% 0.218 303.724)	Light	--zui-accordion-gradient-purple-divider-dark
--zui-accordion-gradient-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-accordion-gradient-purple-border-dark
--zui-accordion-gradient-teal-divider	oklch(43.7% 0.078 188.216)	Light	--zui-accordion-gradient-teal-divider-dark
--zui-accordion-gradient-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-accordion-gradient-teal-border-dark
--zui-accordion-gradient-indigo-divider	oklch(39.8% 0.195 277.366)	Light	--zui-accordion-gradient-indigo-divider-dark
--zui-accordion-gradient-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-accordion-gradient-indigo-border-dark
--zui-accordion-gradient-pink-divider	oklch(45.9% 0.187 3.815)	Light	--zui-accordion-gradient-pink-divider-dark
--zui-accordion-gradient-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-accordion-gradient-pink-border-dark
--zui-accordion-gradient-orange-divider	oklch(47% 0.157 37.304)	Light	--zui-accordion-gradient-orange-divider-dark
--zui-accordion-gradient-orange-border	oklch(47% 0.157 37.304)	Light	--zui-accordion-gradient-orange-border-dark
--zui-accordion-item-fg	oklch(20.8% 0.042 265.755)	Light	--zui-accordion-item-fg-dark
--zui-accordion-item-card-border	#0000001a	Light	--zui-accordion-item-card-border-dark
--zui-accordion-item-card-bg	#0000000d	Light	--zui-accordion-item-card-bg-dark
--zui-accordion-item-separated-border	#0000001a	Light	--zui-accordion-item-separated-border-dark
--zui-accordion-item-separated-bg	oklch(98.4% 0.003 247.858 / 0.4)	Light	--zui-accordion-item-separated-bg-dark
--zui-accordion-item-sky-border	oklch(44.3% 0.11 240.79)	Light	--zui-accordion-item-sky-border-dark
--zui-accordion-item-sky-bg	oklch(95.1% 0.026 236.824 / 0.5)	Light	--zui-accordion-item-sky-bg-dark
--zui-accordion-item-rose-border	oklch(45.5% 0.188 13.697)	Light	--zui-accordion-item-rose-border-dark
--zui-accordion-item-rose-bg	oklch(94.1% 0.03 12.58 / 0.5)	Light	--zui-accordion-item-rose-bg-dark
--zui-accordion-item-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-accordion-item-purple-border-dark
--zui-accordion-item-purple-bg	oklch(94.6% 0.033 307.174 / 0.5)	Light	--zui-accordion-item-purple-bg-dark
--zui-accordion-item-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-accordion-item-pink-border-dark
--zui-accordion-item-pink-bg	oklch(94.8% 0.028 342.258 / 0.5)	Light	--zui-accordion-item-pink-bg-dark
--zui-accordion-item-orange-border	oklch(47% 0.157 37.304)	Light	--zui-accordion-item-orange-border-dark
--zui-accordion-item-orange-bg	oklch(95.4% 0.038 75.164 / 0.5)	Light	--zui-accordion-item-orange-bg-dark
--zui-accordion-item-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-accordion-item-yellow-border-dark
--zui-accordion-item-yellow-bg	oklch(97.3% 0.071 103.193 / 0.5)	Light	--zui-accordion-item-yellow-bg-dark
--zui-accordion-item-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-accordion-item-teal-border-dark
--zui-accordion-item-teal-bg	oklch(95.3% 0.051 180.801 / 0.5)	Light	--zui-accordion-item-teal-bg-dark
--zui-accordion-item-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-accordion-item-indigo-border-dark
--zui-accordion-item-indigo-bg	oklch(93% 0.034 272.788 / 0.5)	Light	--zui-accordion-item-indigo-bg-dark
--zui-accordion-item-emerald-border	oklch(43.2% 0.095 166.913)	Light	--zui-accordion-item-emerald-border-dark
--zui-accordion-item-emerald-bg	oklch(95% 0.052 163.051 / 0.5)	Light	--zui-accordion-item-emerald-bg-dark
--zui-accordion-item-gradient-blue-from	oklch(80.9% 0.105 251.813)	Light	--zui-accordion-item-gradient-blue-from-dark
--zui-accordion-item-gradient-blue-to	oklch(82.7% 0.119 306.383)	Light	--zui-accordion-item-gradient-blue-to-dark
--zui-accordion-item-gradient-green-from	oklch(87.1% 0.15 154.449)	Light	--zui-accordion-item-gradient-green-from-dark
--zui-accordion-item-gradient-green-to	oklch(89.7% 0.196 126.665)	Light	--zui-accordion-item-gradient-green-to-dark
--zui-accordion-item-gradient-red-from	oklch(80.8% 0.114 19.571)	Light	--zui-accordion-item-gradient-red-from-dark
--zui-accordion-item-gradient-red-to	oklch(82.3% 0.12 346.018)	Light	--zui-accordion-item-gradient-red-to-dark
--zui-accordion-item-gradient-yellow-from	oklch(90.5% 0.182 98.111)	Light	--zui-accordion-item-gradient-yellow-from-dark
--zui-accordion-item-gradient-yellow-to	oklch(83.7% 0.128 66.29)	Light	--zui-accordion-item-gradient-yellow-to-dark
--zui-accordion-item-gradient-purple-from	oklch(82.7% 0.119 306.383)	Light	--zui-accordion-item-gradient-purple-from-dark
--zui-accordion-item-gradient-purple-to	oklch(82.3% 0.12 346.018)	Light	--zui-accordion-item-gradient-purple-to-dark
--zui-accordion-item-gradient-teal-from	oklch(85.5% 0.138 181.071)	Light	--zui-accordion-item-gradient-teal-from-dark
--zui-accordion-item-gradient-teal-to	oklch(86.5% 0.127 207.078)	Light	--zui-accordion-item-gradient-teal-to-dark
--zui-accordion-item-gradient-indigo-from	oklch(78.5% 0.115 274.713)	Light	--zui-accordion-item-gradient-indigo-from-dark
--zui-accordion-item-gradient-indigo-to	oklch(82.7% 0.119 306.383)	Light	--zui-accordion-item-gradient-indigo-to-dark
--zui-accordion-item-gradient-pink-from	oklch(82.3% 0.12 346.018)	Light	--zui-accordion-item-gradient-pink-from-dark
--zui-accordion-item-gradient-pink-to	oklch(81% 0.117 11.638)	Light	--zui-accordion-item-gradient-pink-to-dark
--zui-accordion-item-gradient-orange-from	oklch(83.7% 0.128 66.29)	Light	--zui-accordion-item-gradient-orange-from-dark
--zui-accordion-item-gradient-orange-to	oklch(80.8% 0.114 19.571)	Light	--zui-accordion-item-gradient-orange-to-dark
--zui-accordion-trigger-fg	oklch(27.9% 0.041 260.031)	Light	--zui-accordion-trigger-fg-dark
--zui-accordion-trigger-fg-hover	oklch(20.8% 0.042 265.755)	Shared	none
--zui-accordion-trigger-ring-focus	#0000004d	Shared	none
--zui-accordion-default-divider-dark	#ffffff1a	Dark	--zui-accordion-default-divider
--zui-accordion-default-border-dark	#ffffff1a	Dark	--zui-accordion-default-border
--zui-accordion-outline-divider-dark	Override with your dark theme value	Dark	--zui-accordion-outline-divider
--zui-accordion-outline-border-dark	Override with your dark theme value	Dark	--zui-accordion-outline-border
--zui-accordion-ghost-divider-dark	Override with your dark theme value	Dark	--zui-accordion-ghost-divider
--zui-accordion-sky-divider-dark	Override with your dark theme value	Dark	--zui-accordion-sky-divider
--zui-accordion-sky-border-dark	Override with your dark theme value	Dark	--zui-accordion-sky-border
--zui-accordion-rose-divider-dark	Override with your dark theme value	Dark	--zui-accordion-rose-divider
--zui-accordion-rose-border-dark	Override with your dark theme value	Dark	--zui-accordion-rose-border
--zui-accordion-purple-divider-dark	Override with your dark theme value	Dark	--zui-accordion-purple-divider
--zui-accordion-purple-border-dark	Override with your dark theme value	Dark	--zui-accordion-purple-border
--zui-accordion-pink-divider-dark	Override with your dark theme value	Dark	--zui-accordion-pink-divider
--zui-accordion-pink-border-dark	Override with your dark theme value	Dark	--zui-accordion-pink-border
--zui-accordion-orange-divider-dark	Override with your dark theme value	Dark	--zui-accordion-orange-divider
--zui-accordion-orange-border-dark	Override with your dark theme value	Dark	--zui-accordion-orange-border
--zui-accordion-yellow-divider-dark	Override with your dark theme value	Dark	--zui-accordion-yellow-divider
--zui-accordion-yellow-border-dark	Override with your dark theme value	Dark	--zui-accordion-yellow-border
--zui-accordion-teal-divider-dark	Override with your dark theme value	Dark	--zui-accordion-teal-divider
--zui-accordion-teal-border-dark	Override with your dark theme value	Dark	--zui-accordion-teal-border
--zui-accordion-indigo-divider-dark	Override with your dark theme value	Dark	--zui-accordion-indigo-divider
--zui-accordion-indigo-border-dark	Override with your dark theme value	Dark	--zui-accordion-indigo-border
--zui-accordion-emerald-divider-dark	Override with your dark theme value	Dark	--zui-accordion-emerald-divider
--zui-accordion-emerald-border-dark	Override with your dark theme value	Dark	--zui-accordion-emerald-border
--zui-accordion-gradient-blue-divider-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-blue-divider
--zui-accordion-gradient-blue-border-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-blue-border
--zui-accordion-gradient-green-divider-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-green-divider
--zui-accordion-gradient-green-border-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-green-border
--zui-accordion-gradient-red-divider-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-red-divider
--zui-accordion-gradient-red-border-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-red-border
--zui-accordion-gradient-yellow-divider-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-yellow-divider
--zui-accordion-gradient-yellow-border-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-yellow-border
--zui-accordion-gradient-purple-divider-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-purple-divider
--zui-accordion-gradient-purple-border-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-purple-border
--zui-accordion-gradient-teal-divider-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-teal-divider
--zui-accordion-gradient-teal-border-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-teal-border
--zui-accordion-gradient-indigo-divider-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-indigo-divider
--zui-accordion-gradient-indigo-border-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-indigo-border
--zui-accordion-gradient-pink-divider-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-pink-divider
--zui-accordion-gradient-pink-border-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-pink-border
--zui-accordion-gradient-orange-divider-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-orange-divider
--zui-accordion-gradient-orange-border-dark	Override with your dark theme value	Dark	--zui-accordion-gradient-orange-border
--zui-accordion-item-fg-dark	Override with your dark theme value	Dark	--zui-accordion-item-fg
--zui-accordion-item-card-border-dark	Override with your dark theme value	Dark	--zui-accordion-item-card-border
--zui-accordion-item-card-bg-dark	Override with your dark theme value	Dark	--zui-accordion-item-card-bg
--zui-accordion-item-separated-border-dark	Override with your dark theme value	Dark	--zui-accordion-item-separated-border
--zui-accordion-item-separated-bg-dark	Override with your dark theme value	Dark	--zui-accordion-item-separated-bg
--zui-accordion-item-sky-border-dark	Override with your dark theme value	Dark	--zui-accordion-item-sky-border
--zui-accordion-item-sky-bg-dark	Override with your dark theme value	Dark	--zui-accordion-item-sky-bg
--zui-accordion-item-rose-border-dark	Override with your dark theme value	Dark	--zui-accordion-item-rose-border
--zui-accordion-item-rose-bg-dark	Override with your dark theme value	Dark	--zui-accordion-item-rose-bg
--zui-accordion-item-purple-border-dark	Override with your dark theme value	Dark	--zui-accordion-item-purple-border
--zui-accordion-item-purple-bg-dark	Override with your dark theme value	Dark	--zui-accordion-item-purple-bg
--zui-accordion-item-pink-border-dark	Override with your dark theme value	Dark	--zui-accordion-item-pink-border
--zui-accordion-item-pink-bg-dark	Override with your dark theme value	Dark	--zui-accordion-item-pink-bg
--zui-accordion-item-orange-border-dark	Override with your dark theme value	Dark	--zui-accordion-item-orange-border
--zui-accordion-item-orange-bg-dark	Override with your dark theme value	Dark	--zui-accordion-item-orange-bg
--zui-accordion-item-yellow-border-dark	Override with your dark theme value	Dark	--zui-accordion-item-yellow-border
--zui-accordion-item-yellow-bg-dark	Override with your dark theme value	Dark	--zui-accordion-item-yellow-bg
--zui-accordion-item-teal-border-dark	Override with your dark theme value	Dark	--zui-accordion-item-teal-border
--zui-accordion-item-teal-bg-dark	Override with your dark theme value	Dark	--zui-accordion-item-teal-bg
--zui-accordion-item-indigo-border-dark	Override with your dark theme value	Dark	--zui-accordion-item-indigo-border
--zui-accordion-item-indigo-bg-dark	Override with your dark theme value	Dark	--zui-accordion-item-indigo-bg
--zui-accordion-item-emerald-border-dark	Override with your dark theme value	Dark	--zui-accordion-item-emerald-border
--zui-accordion-item-emerald-bg-dark	Override with your dark theme value	Dark	--zui-accordion-item-emerald-bg
--zui-accordion-item-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-blue-from
--zui-accordion-item-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-blue-to
--zui-accordion-item-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-green-from
--zui-accordion-item-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-green-to
--zui-accordion-item-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-red-from
--zui-accordion-item-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-red-to
--zui-accordion-item-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-yellow-from
--zui-accordion-item-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-yellow-to
--zui-accordion-item-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-purple-from
--zui-accordion-item-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-purple-to
--zui-accordion-item-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-teal-from
--zui-accordion-item-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-teal-to
--zui-accordion-item-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-indigo-from
--zui-accordion-item-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-indigo-to
--zui-accordion-item-gradient-pink-from-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-pink-from
--zui-accordion-item-gradient-pink-to-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-pink-to
--zui-accordion-item-gradient-orange-from-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-orange-from
--zui-accordion-item-gradient-orange-to-dark	Override with your dark theme value	Dark	--zui-accordion-item-gradient-orange-to
--zui-accordion-trigger-fg-dark	Override with your dark theme value	Dark	--zui-accordion-trigger-fg

Variable	Fallback	Theme	Pair
--zui-animated-number-default-fg	oklch(20.8% 0.042 265.755)	Light	--zui-animated-number-default-fg-dark
--zui-animated-number-success-fg	oklch(62.7% 0.194 149.214)	Light	--zui-animated-number-success-fg-dark
--zui-animated-number-warning-fg	oklch(66.6% 0.179 58.318)	Light	--zui-animated-number-warning-fg-dark
--zui-animated-number-error-fg	oklch(57.7% 0.245 27.325)	Light	--zui-animated-number-error-fg-dark
--zui-animated-number-info-fg	oklch(58.8% 0.158 241.966)	Light	--zui-animated-number-info-fg-dark
--zui-animated-number-ghost-fg	oklch(55.4% 0.046 257.417)	Light	--zui-animated-number-ghost-fg-dark
--zui-animated-number-purple-fg	oklch(55.8% 0.288 302.321)	Light	--zui-animated-number-purple-fg-dark
--zui-animated-number-pink-fg	oklch(59.2% 0.249 0.584)	Light	--zui-animated-number-pink-fg-dark
--zui-animated-number-orange-fg	oklch(64.6% 0.222 41.116)	Light	--zui-animated-number-orange-fg-dark
--zui-animated-number-yellow-fg	oklch(68.1% 0.162 75.834)	Light	--zui-animated-number-yellow-fg-dark
--zui-animated-number-teal-fg	oklch(60% 0.118 184.704)	Light	--zui-animated-number-teal-fg-dark
--zui-animated-number-indigo-fg	oklch(51.1% 0.262 276.966)	Light	--zui-animated-number-indigo-fg-dark
--zui-animated-number-gray-fg	oklch(44.6% 0.03 256.802)	Light	--zui-animated-number-gray-fg-dark
--zui-animated-number-violet-fg	oklch(54.1% 0.281 293.009)	Light	--zui-animated-number-violet-fg-dark
--zui-animated-number-gradient-blue-from	oklch(42.4% 0.199 265.638)	Light	--zui-animated-number-gradient-blue-from-dark
--zui-animated-number-gradient-blue-to	oklch(43.8% 0.218 303.724)	Light	--zui-animated-number-gradient-blue-to-dark
--zui-animated-number-gradient-green-from	oklch(44.8% 0.119 151.328)	Light	--zui-animated-number-gradient-green-from-dark
--zui-animated-number-gradient-green-to	oklch(45.3% 0.124 130.933)	Light	--zui-animated-number-gradient-green-to-dark
--zui-animated-number-gradient-red-from	oklch(44.4% 0.177 26.899)	Light	--zui-animated-number-gradient-red-from-dark
--zui-animated-number-gradient-red-to	oklch(45.9% 0.187 3.815)	Light	--zui-animated-number-gradient-red-to-dark
--zui-animated-number-gradient-yellow-from	oklch(47.6% 0.114 61.907)	Light	--zui-animated-number-gradient-yellow-from-dark
--zui-animated-number-gradient-yellow-to	oklch(47% 0.157 37.304)	Light	--zui-animated-number-gradient-yellow-to-dark
--zui-animated-number-gradient-purple-from	oklch(43.8% 0.218 303.724)	Light	--zui-animated-number-gradient-purple-from-dark
--zui-animated-number-gradient-purple-to	oklch(45.9% 0.187 3.815)	Light	--zui-animated-number-gradient-purple-to-dark
--zui-animated-number-gradient-teal-from	oklch(43.7% 0.078 188.216)	Light	--zui-animated-number-gradient-teal-from-dark
--zui-animated-number-gradient-teal-to	oklch(45% 0.085 224.283)	Light	--zui-animated-number-gradient-teal-to-dark
--zui-animated-number-gradient-indigo-from	oklch(39.8% 0.195 277.366)	Light	--zui-animated-number-gradient-indigo-from-dark
--zui-animated-number-gradient-indigo-to	oklch(43.8% 0.218 303.724)	Light	--zui-animated-number-gradient-indigo-to-dark
--zui-animated-number-gradient-pink-from	oklch(45.9% 0.187 3.815)	Light	--zui-animated-number-gradient-pink-from-dark
--zui-animated-number-gradient-pink-to	oklch(45.5% 0.188 13.697)	Light	--zui-animated-number-gradient-pink-to-dark
--zui-animated-number-gradient-orange-from	oklch(47% 0.157 37.304)	Light	--zui-animated-number-gradient-orange-from-dark
--zui-animated-number-gradient-orange-to	oklch(44.4% 0.177 26.899)	Light	--zui-animated-number-gradient-orange-to-dark
--zui-animated-number-default-fg-dark	oklch(98.4% 0.003 247.858)	Dark	--zui-animated-number-default-fg
--zui-animated-number-gradient-blue-from-dark	oklch(54.6% 0.245 262.881)	Dark	--zui-animated-number-gradient-blue-from
--zui-animated-number-success-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-success-fg
--zui-animated-number-warning-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-warning-fg
--zui-animated-number-error-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-error-fg
--zui-animated-number-info-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-info-fg
--zui-animated-number-ghost-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-ghost-fg
--zui-animated-number-purple-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-purple-fg
--zui-animated-number-pink-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-pink-fg
--zui-animated-number-orange-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-orange-fg
--zui-animated-number-yellow-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-yellow-fg
--zui-animated-number-teal-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-teal-fg
--zui-animated-number-indigo-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-indigo-fg
--zui-animated-number-gray-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-gray-fg
--zui-animated-number-violet-fg-dark	Override with your dark theme value	Dark	--zui-animated-number-violet-fg
--zui-animated-number-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-blue-to
--zui-animated-number-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-green-from
--zui-animated-number-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-green-to
--zui-animated-number-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-red-from
--zui-animated-number-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-red-to
--zui-animated-number-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-yellow-from
--zui-animated-number-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-yellow-to
--zui-animated-number-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-purple-from
--zui-animated-number-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-purple-to
--zui-animated-number-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-teal-from
--zui-animated-number-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-teal-to
--zui-animated-number-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-indigo-from
--zui-animated-number-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-indigo-to
--zui-animated-number-gradient-pink-from-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-pink-from
--zui-animated-number-gradient-pink-to-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-pink-to
--zui-animated-number-gradient-orange-from-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-orange-from
--zui-animated-number-gradient-orange-to-dark	Override with your dark theme value	Dark	--zui-animated-number-gradient-orange-to

Variable	Fallback	Theme	Pair
--zui-command-overlay-bg	oklch(12.9% 0.042 264.695 / 0.6)	Light	--zui-command-overlay-bg-dark
--zui-command-trigger-border	#0000001a	Light	--zui-command-trigger-border-dark
--zui-command-trigger-bg	oklch(98.4% 0.003 247.858)	Light	--zui-command-trigger-bg-dark
--zui-command-trigger-fg	oklch(44.6% 0.03 256.802)	Light	--zui-command-trigger-fg-dark
--zui-command-content-border	#0000001a	Light	--zui-command-content-border-dark
--zui-command-content-bg	oklch(98.4% 0.003 247.858)	Light	--zui-command-content-bg-dark
--zui-command-content-fg	oklch(20.8% 0.042 265.755)	Light	--zui-command-content-fg-dark
--zui-command-content-shadow	0 12px 40px rgba(15,23,42,0.18)	Light	--zui-command-content-shadow-dark
--zui-command-input-border	#0000000f	Light	--zui-command-input-border-dark
--zui-command-input-fg	oklch(20.8% 0.042 265.755)	Light	--zui-command-input-fg-dark
--zui-command-input-placeholder	oklch(55.1% 0.027 264.364)	Light	--zui-command-input-placeholder-dark
--zui-command-group-heading-fg	oklch(55.1% 0.027 264.364)	Light	--zui-command-group-heading-fg-dark
--zui-command-item-fg	oklch(27.8% 0.033 256.848)	Light	--zui-command-item-fg-dark
--zui-command-item-active-bg	oklch(95.1% 0.026 236.824)	Light	--zui-command-item-active-bg-dark
--zui-command-item-active-fg	oklch(20.8% 0.042 265.755)	Light	--zui-command-item-active-fg-dark
--zui-command-separator-bg	#0000000f	Light	--zui-command-separator-bg-dark
--zui-command-empty-fg	oklch(55.1% 0.027 264.364)	Light	--zui-command-empty-fg-dark
--zui-command-footer-border	#0000000f	Light	--zui-command-footer-border-dark
--zui-command-footer-fg	oklch(55.1% 0.027 264.364)	Light	--zui-command-footer-fg-dark
--zui-command-content-default-bg	oklch(98.4% 0.003 247.858)	Light	--zui-command-content-default-bg-dark
--zui-command-content-glass-border	#00000026	Light	--zui-command-content-glass-border-dark
--zui-command-content-glass-bg	oklch(98.4% 0.003 247.858 / 0.7)	Light	--zui-command-content-glass-bg-dark
--zui-command-content-sky-border	oklch(44.3% 0.11 240.79)	Light	--zui-command-content-sky-border-dark
--zui-command-content-sky-bg	oklch(97.7% 0.013 236.62)	Light	--zui-command-content-sky-bg-dark
--zui-command-content-rose-border	oklch(45.5% 0.188 13.697)	Light	--zui-command-content-rose-border-dark
--zui-command-content-rose-bg	oklch(96.9% 0.015 12.422)	Light	--zui-command-content-rose-bg-dark
--zui-command-content-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-command-content-purple-border-dark
--zui-command-content-purple-bg	oklch(97.7% 0.014 308.299)	Light	--zui-command-content-purple-bg-dark
--zui-command-content-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-command-content-pink-border-dark
--zui-command-content-pink-bg	oklch(97.1% 0.014 343.198)	Light	--zui-command-content-pink-bg-dark
--zui-command-content-orange-border	oklch(47% 0.157 37.304)	Light	--zui-command-content-orange-border-dark
--zui-command-content-orange-bg	oklch(98% 0.016 73.684)	Light	--zui-command-content-orange-bg-dark
--zui-command-content-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-command-content-yellow-border-dark
--zui-command-content-yellow-bg	oklch(98.7% 0.026 102.212)	Light	--zui-command-content-yellow-bg-dark
--zui-command-content-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-command-content-teal-border-dark
--zui-command-content-teal-bg	oklch(98.4% 0.014 180.72)	Light	--zui-command-content-teal-bg-dark
--zui-command-content-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-command-content-indigo-border-dark
--zui-command-content-indigo-bg	oklch(96.2% 0.018 272.314)	Light	--zui-command-content-indigo-bg-dark
--zui-command-content-emerald-border	oklch(43.2% 0.095 166.913)	Light	--zui-command-content-emerald-border-dark
--zui-command-content-emerald-bg	oklch(97.9% 0.021 166.113)	Light	--zui-command-content-emerald-bg-dark
--zui-command-content-gray-border	oklch(27.8% 0.033 256.848)	Light	--zui-command-content-gray-border-dark
--zui-command-content-gray-bg	oklch(98.5% 0.002 247.839)	Light	--zui-command-content-gray-bg-dark
--zui-command-content-amber-border	oklch(47.3% 0.137 46.201)	Light	--zui-command-content-amber-border-dark
--zui-command-content-amber-bg	oklch(98.7% 0.022 95.277)	Light	--zui-command-content-amber-bg-dark
--zui-command-content-violet-border	oklch(43.2% 0.232 292.759)	Light	--zui-command-content-violet-border-dark
--zui-command-content-violet-bg	oklch(96.9% 0.016 293.756)	Light	--zui-command-content-violet-bg-dark
--zui-command-content-gradient-blue-border	oklch(42.4% 0.199 265.638)	Light	--zui-command-content-gradient-blue-border-dark
--zui-command-content-gradient-blue-from	oklch(97% 0.014 254.604)	Light	--zui-command-content-gradient-blue-from-dark
--zui-command-content-gradient-blue-to	oklch(97.7% 0.014 308.299)	Light	--zui-command-content-gradient-blue-to-dark
--zui-command-content-gradient-green-border	oklch(44.8% 0.119 151.328)	Light	--zui-command-content-gradient-green-border-dark
--zui-command-content-gradient-green-from	oklch(98.2% 0.018 155.826)	Light	--zui-command-content-gradient-green-from-dark
--zui-command-content-gradient-green-to	oklch(98.6% 0.031 120.757)	Light	--zui-command-content-gradient-green-to-dark
--zui-command-content-gradient-red-border	oklch(44.4% 0.177 26.899)	Light	--zui-command-content-gradient-red-border-dark
--zui-command-content-gradient-red-from	oklch(97.1% 0.013 17.38)	Light	--zui-command-content-gradient-red-from-dark
--zui-command-content-gradient-red-to	oklch(97.1% 0.014 343.198)	Light	--zui-command-content-gradient-red-to-dark
--zui-command-content-gradient-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-command-content-gradient-yellow-border-dark
--zui-command-content-gradient-yellow-from	oklch(98.7% 0.026 102.212)	Light	--zui-command-content-gradient-yellow-from-dark
--zui-command-content-gradient-yellow-to	oklch(98% 0.016 73.684)	Light	--zui-command-content-gradient-yellow-to-dark
--zui-command-content-gradient-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-command-content-gradient-purple-border-dark
--zui-command-content-gradient-purple-from	oklch(97.7% 0.014 308.299)	Light	--zui-command-content-gradient-purple-from-dark
--zui-command-content-gradient-purple-to	oklch(97.1% 0.014 343.198)	Light	--zui-command-content-gradient-purple-to-dark
--zui-command-content-gradient-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-command-content-gradient-teal-border-dark
--zui-command-content-gradient-teal-from	oklch(98.4% 0.014 180.72)	Light	--zui-command-content-gradient-teal-from-dark
--zui-command-content-gradient-teal-to	oklch(98.4% 0.019 200.873)	Light	--zui-command-content-gradient-teal-to-dark
--zui-command-content-gradient-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-command-content-gradient-indigo-border-dark
--zui-command-content-gradient-indigo-from	oklch(96.2% 0.018 272.314)	Light	--zui-command-content-gradient-indigo-from-dark
--zui-command-content-gradient-indigo-to	oklch(97.7% 0.014 308.299)	Light	--zui-command-content-gradient-indigo-to-dark
--zui-command-content-gradient-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-command-content-gradient-pink-border-dark
--zui-command-content-gradient-pink-from	oklch(97.1% 0.014 343.198)	Light	--zui-command-content-gradient-pink-from-dark
--zui-command-content-gradient-pink-to	oklch(96.9% 0.015 12.422)	Shared	none
--zui-command-trigger-bg-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-command-trigger-bg
--zui-command-content-bg-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-command-content-bg
--zui-command-item-active-bg-dark	oklch(28.2% 0.091 267.935 / 0.55)	Dark	--zui-command-item-active-bg
--zui-command-content-glass-bg-dark	oklch(12.9% 0.042 264.695 / 0.7)	Dark	--zui-command-content-glass-bg
--zui-command-overlay-bg-dark	Override with your dark theme value	Dark	--zui-command-overlay-bg
--zui-command-trigger-border-dark	Override with your dark theme value	Dark	--zui-command-trigger-border
--zui-command-trigger-fg-dark	Override with your dark theme value	Dark	--zui-command-trigger-fg
--zui-command-content-border-dark	Override with your dark theme value	Dark	--zui-command-content-border
--zui-command-content-fg-dark	Override with your dark theme value	Dark	--zui-command-content-fg
--zui-command-content-shadow-dark	Override with your dark theme value	Dark	--zui-command-content-shadow
--zui-command-input-border-dark	Override with your dark theme value	Dark	--zui-command-input-border
--zui-command-input-fg-dark	Override with your dark theme value	Dark	--zui-command-input-fg
--zui-command-input-placeholder-dark	Override with your dark theme value	Dark	--zui-command-input-placeholder
--zui-command-group-heading-fg-dark	Override with your dark theme value	Dark	--zui-command-group-heading-fg
--zui-command-item-fg-dark	Override with your dark theme value	Dark	--zui-command-item-fg
--zui-command-item-active-fg-dark	Override with your dark theme value	Dark	--zui-command-item-active-fg
--zui-command-separator-bg-dark	Override with your dark theme value	Dark	--zui-command-separator-bg
--zui-command-empty-fg-dark	Override with your dark theme value	Dark	--zui-command-empty-fg
--zui-command-footer-border-dark	Override with your dark theme value	Dark	--zui-command-footer-border
--zui-command-footer-fg-dark	Override with your dark theme value	Dark	--zui-command-footer-fg
--zui-command-content-default-bg-dark	Override with your dark theme value	Dark	--zui-command-content-default-bg
--zui-command-content-glass-border-dark	Override with your dark theme value	Dark	--zui-command-content-glass-border
--zui-command-content-sky-border-dark	Override with your dark theme value	Dark	--zui-command-content-sky-border
--zui-command-content-sky-bg-dark	Override with your dark theme value	Dark	--zui-command-content-sky-bg
--zui-command-content-rose-border-dark	Override with your dark theme value	Dark	--zui-command-content-rose-border
--zui-command-content-rose-bg-dark	Override with your dark theme value	Dark	--zui-command-content-rose-bg
--zui-command-content-purple-border-dark	Override with your dark theme value	Dark	--zui-command-content-purple-border
--zui-command-content-purple-bg-dark	Override with your dark theme value	Dark	--zui-command-content-purple-bg
--zui-command-content-pink-border-dark	Override with your dark theme value	Dark	--zui-command-content-pink-border
--zui-command-content-pink-bg-dark	Override with your dark theme value	Dark	--zui-command-content-pink-bg
--zui-command-content-orange-border-dark	Override with your dark theme value	Dark	--zui-command-content-orange-border
--zui-command-content-orange-bg-dark	Override with your dark theme value	Dark	--zui-command-content-orange-bg
--zui-command-content-yellow-border-dark	Override with your dark theme value	Dark	--zui-command-content-yellow-border
--zui-command-content-yellow-bg-dark	Override with your dark theme value	Dark	--zui-command-content-yellow-bg
--zui-command-content-teal-border-dark	Override with your dark theme value	Dark	--zui-command-content-teal-border
--zui-command-content-teal-bg-dark	Override with your dark theme value	Dark	--zui-command-content-teal-bg
--zui-command-content-indigo-border-dark	Override with your dark theme value	Dark	--zui-command-content-indigo-border
--zui-command-content-indigo-bg-dark	Override with your dark theme value	Dark	--zui-command-content-indigo-bg
--zui-command-content-emerald-border-dark	Override with your dark theme value	Dark	--zui-command-content-emerald-border
--zui-command-content-emerald-bg-dark	Override with your dark theme value	Dark	--zui-command-content-emerald-bg
--zui-command-content-gray-border-dark	Override with your dark theme value	Dark	--zui-command-content-gray-border
--zui-command-content-gray-bg-dark	Override with your dark theme value	Dark	--zui-command-content-gray-bg
--zui-command-content-amber-border-dark	Override with your dark theme value	Dark	--zui-command-content-amber-border
--zui-command-content-amber-bg-dark	Override with your dark theme value	Dark	--zui-command-content-amber-bg
--zui-command-content-violet-border-dark	Override with your dark theme value	Dark	--zui-command-content-violet-border
--zui-command-content-violet-bg-dark	Override with your dark theme value	Dark	--zui-command-content-violet-bg
--zui-command-content-gradient-blue-border-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-blue-border
--zui-command-content-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-blue-from
--zui-command-content-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-blue-to
--zui-command-content-gradient-green-border-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-green-border
--zui-command-content-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-green-from
--zui-command-content-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-green-to
--zui-command-content-gradient-red-border-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-red-border
--zui-command-content-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-red-from
--zui-command-content-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-red-to
--zui-command-content-gradient-yellow-border-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-yellow-border
--zui-command-content-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-yellow-from
--zui-command-content-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-yellow-to
--zui-command-content-gradient-purple-border-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-purple-border
--zui-command-content-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-purple-from
--zui-command-content-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-purple-to
--zui-command-content-gradient-teal-border-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-teal-border
--zui-command-content-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-teal-from
--zui-command-content-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-teal-to
--zui-command-content-gradient-indigo-border-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-indigo-border
--zui-command-content-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-indigo-from
--zui-command-content-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-indigo-to
--zui-command-content-gradient-pink-border-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-pink-border
--zui-command-content-gradient-pink-from-dark	Override with your dark theme value	Dark	--zui-command-content-gradient-pink-from

Variable	Fallback	Theme	Pair
--zui-copy-button-radius	0.75rem	Light	--zui-copy-button-radius-dark
--zui-copy-button-ring-offset	#f8fafc	Light	--zui-copy-button-ring-offset-dark
--zui-copy-button-focus-ring	#475569	Light	--zui-copy-button-focus-ring-dark
--zui-copy-button-default-bg	#0f172a	Light	--zui-copy-button-default-bg-dark
--zui-copy-button-default-fg	#f8fafc	Light	--zui-copy-button-default-fg-dark
--zui-copy-button-default-shadow	0 1px 2px #0f172a14	Light	--zui-copy-button-default-shadow-dark
--zui-copy-button-default-bg-hover	#000000	Light	--zui-copy-button-default-bg-hover-dark
--zui-copy-button-secondary-bg	#e2e8f0	Light	--zui-copy-button-secondary-bg-dark
--zui-copy-button-secondary-fg	#0f172a	Light	--zui-copy-button-secondary-fg-dark
--zui-copy-button-secondary-bg-hover	#cbd5e1	Light	--zui-copy-button-secondary-bg-hover-dark
--zui-copy-button-destructive-bg	#f43f5e	Light	--zui-copy-button-destructive-bg-dark
--zui-copy-button-destructive-fg	#ffffff	Light	--zui-copy-button-destructive-fg-dark
--zui-copy-button-destructive-bg-hover	#f43f5e	Light	--zui-copy-button-destructive-bg-hover-dark
--zui-copy-button-outline-border	#0000001a	Light	--zui-copy-button-outline-border-dark
--zui-copy-button-outline-bg	#0000000d	Light	--zui-copy-button-outline-bg-dark
--zui-copy-button-outline-fg	#0f172a	Light	--zui-copy-button-outline-fg-dark
--zui-copy-button-outline-bg-hover	#0000001a	Light	--zui-copy-button-outline-bg-hover-dark
--zui-copy-button-ghost-fg	#334155	Light	--zui-copy-button-ghost-fg-dark
--zui-copy-button-ghost-bg-hover	#0000000d	Light	--zui-copy-button-ghost-bg-hover-dark
--zui-copy-button-glass-border	#00000026	Light	--zui-copy-button-glass-border-dark
--zui-copy-button-glass-bg	#0000001a	Light	--zui-copy-button-glass-bg-dark
--zui-copy-button-glass-fg	#0f172a	Light	--zui-copy-button-glass-fg-dark
--zui-copy-button-glass-bg-hover	#00000026	Light	--zui-copy-button-glass-bg-hover-dark
--zui-copy-button-emerald-bg	#10b981	Light	--zui-copy-button-emerald-bg-dark
--zui-copy-button-emerald-fg	#ffffff	Light	--zui-copy-button-emerald-fg-dark
--zui-copy-button-emerald-bg-hover	#10b981	Light	--zui-copy-button-emerald-bg-hover-dark
--zui-copy-button-indigo-bg	#3730a3	Light	--zui-copy-button-indigo-bg-dark
--zui-copy-button-indigo-fg	#ffffff	Light	--zui-copy-button-indigo-fg-dark
--zui-copy-button-indigo-bg-hover	#3730a3	Light	--zui-copy-button-indigo-bg-hover-dark
--zui-copy-button-purple-bg	#6b21a8	Light	--zui-copy-button-purple-bg-dark
--zui-copy-button-purple-fg	#ffffff	Light	--zui-copy-button-purple-fg-dark
--zui-copy-button-purple-bg-hover	#6b21a8	Light	--zui-copy-button-purple-bg-hover-dark
--zui-copy-button-pink-bg	#9d174d	Light	--zui-copy-button-pink-bg-dark
--zui-copy-button-pink-fg	#ffffff	Light	--zui-copy-button-pink-fg-dark
--zui-copy-button-pink-bg-hover	#9d174d	Light	--zui-copy-button-pink-bg-hover-dark
--zui-copy-button-rose-bg	#9f1239	Light	--zui-copy-button-rose-bg-dark
--zui-copy-button-rose-fg	#ffffff	Light	--zui-copy-button-rose-fg-dark
--zui-copy-button-rose-bg-hover	#9f1239	Light	--zui-copy-button-rose-bg-hover-dark
--zui-copy-button-sky-bg	#0ea5e9	Light	--zui-copy-button-sky-bg-dark
--zui-copy-button-sky-fg	#ffffff	Light	--zui-copy-button-sky-fg-dark
--zui-copy-button-sky-bg-hover	#0ea5e9	Light	--zui-copy-button-sky-bg-hover-dark
--zui-copy-button-teal-bg	#14b8a6	Light	--zui-copy-button-teal-bg-dark
--zui-copy-button-teal-fg	#ffffff	Light	--zui-copy-button-teal-fg-dark
--zui-copy-button-teal-bg-hover	#14b8a6	Light	--zui-copy-button-teal-bg-hover-dark
--zui-copy-button-yellow-bg	#eab308	Light	--zui-copy-button-yellow-bg-dark
--zui-copy-button-yellow-fg	#ffffff	Light	--zui-copy-button-yellow-fg-dark
--zui-copy-button-yellow-bg-hover	#eab308	Light	--zui-copy-button-yellow-bg-hover-dark
--zui-copy-button-orange-bg	#f97316	Light	--zui-copy-button-orange-bg-dark
--zui-copy-button-orange-fg	#ffffff	Light	--zui-copy-button-orange-fg-dark
--zui-copy-button-orange-bg-hover	#f97316	Light	--zui-copy-button-orange-bg-hover-dark
--zui-copy-button-gray-bg	#6b7280	Light	--zui-copy-button-gray-bg-dark
--zui-copy-button-gray-fg	#ffffff	Light	--zui-copy-button-gray-fg-dark
--zui-copy-button-gray-bg-hover	#6b7280	Light	--zui-copy-button-gray-bg-hover-dark
--zui-copy-button-amber-bg	#f59e0b	Light	--zui-copy-button-amber-bg-dark
--zui-copy-button-amber-fg	#ffffff	Light	--zui-copy-button-amber-fg-dark
--zui-copy-button-amber-bg-hover	#f59e0b	Light	--zui-copy-button-amber-bg-hover-dark
--zui-copy-button-violet-bg	#5b21b6	Light	--zui-copy-button-violet-bg-dark
--zui-copy-button-violet-fg	#ffffff	Light	--zui-copy-button-violet-fg-dark
--zui-copy-button-violet-bg-hover	#5b21b6	Light	--zui-copy-button-violet-bg-hover-dark
--zui-copy-button-gradient-blue-from	#1e40af	Light	--zui-copy-button-gradient-blue-from-dark
--zui-copy-button-gradient-blue-to	#6b21a8	Light	--zui-copy-button-gradient-blue-to-dark
--zui-copy-button-gradient-blue-fg	#ffffff	Light	--zui-copy-button-gradient-blue-fg-dark
--zui-copy-button-gradient-blue-from-hover	#1e40af	Light	--zui-copy-button-gradient-blue-from-hover-dark
--zui-copy-button-gradient-blue-to-hover	#6b21a8	Light	--zui-copy-button-gradient-blue-to-hover-dark
--zui-copy-button-gradient-green-from	#166534	Light	--zui-copy-button-gradient-green-from-dark
--zui-copy-button-gradient-green-to	#3f6212	Light	--zui-copy-button-gradient-green-to-dark
--zui-copy-button-gradient-green-fg	#ffffff	Light	--zui-copy-button-gradient-green-fg-dark
--zui-copy-button-gradient-green-from-hover	#166534	Light	--zui-copy-button-gradient-green-from-hover-dark
--zui-copy-button-gradient-green-to-hover	#3f6212	Light	--zui-copy-button-gradient-green-to-hover-dark
--zui-copy-button-gradient-red-from	#991b1b	Light	--zui-copy-button-gradient-red-from-dark
--zui-copy-button-gradient-red-to	#9d174d	Light	--zui-copy-button-gradient-red-to-dark
--zui-copy-button-gradient-red-fg	#ffffff	Light	--zui-copy-button-gradient-red-fg-dark
--zui-copy-button-gradient-red-from-hover	#991b1b	Light	--zui-copy-button-gradient-red-from-hover-dark
--zui-copy-button-gradient-red-to-hover	#9d174d	Light	--zui-copy-button-gradient-red-to-hover-dark
--zui-copy-button-gradient-yellow-from	#854d0e	Light	--zui-copy-button-gradient-yellow-from-dark
--zui-copy-button-gradient-yellow-to	#9a3412	Light	--zui-copy-button-gradient-yellow-to-dark
--zui-copy-button-gradient-yellow-fg	#ffffff	Light	--zui-copy-button-gradient-yellow-fg-dark
--zui-copy-button-gradient-yellow-from-hover	#854d0e	Light	--zui-copy-button-gradient-yellow-from-hover-dark
--zui-copy-button-gradient-yellow-to-hover	#9a3412	Light	--zui-copy-button-gradient-yellow-to-hover-dark
--zui-copy-button-gradient-purple-from	#6b21a8	Light	--zui-copy-button-gradient-purple-from-dark
--zui-copy-button-gradient-purple-to	#9d174d	Light	--zui-copy-button-gradient-purple-to-dark
--zui-copy-button-gradient-purple-fg	#ffffff	Light	--zui-copy-button-gradient-purple-fg-dark
--zui-copy-button-gradient-purple-from-hover	#6b21a8	Light	--zui-copy-button-gradient-purple-from-hover-dark
--zui-copy-button-gradient-purple-to-hover	#9d174d	Light	--zui-copy-button-gradient-purple-to-hover-dark
--zui-copy-button-gradient-teal-from	#115e59	Light	--zui-copy-button-gradient-teal-from-dark
--zui-copy-button-gradient-teal-to	#155e75	Light	--zui-copy-button-gradient-teal-to-dark
--zui-copy-button-gradient-teal-fg	#ffffff	Light	--zui-copy-button-gradient-teal-fg-dark
--zui-copy-button-gradient-teal-from-hover	#115e59	Light	--zui-copy-button-gradient-teal-from-hover-dark
--zui-copy-button-gradient-teal-to-hover	#155e75	Light	--zui-copy-button-gradient-teal-to-hover-dark
--zui-copy-button-gradient-indigo-from	#3730a3	Light	--zui-copy-button-gradient-indigo-from-dark
--zui-copy-button-gradient-indigo-to	#6b21a8	Light	--zui-copy-button-gradient-indigo-to-dark
--zui-copy-button-gradient-indigo-fg	#ffffff	Light	--zui-copy-button-gradient-indigo-fg-dark
--zui-copy-button-gradient-indigo-from-hover	#3730a3	Light	--zui-copy-button-gradient-indigo-from-hover-dark
--zui-copy-button-gradient-indigo-to-hover	#6b21a8	Light	--zui-copy-button-gradient-indigo-to-hover-dark
--zui-copy-button-gradient-pink-from	#9d174d	Light	--zui-copy-button-gradient-pink-from-dark
--zui-copy-button-gradient-pink-to	#9f1239	Light	--zui-copy-button-gradient-pink-to-dark
--zui-copy-button-gradient-pink-fg	#ffffff	Light	--zui-copy-button-gradient-pink-fg-dark
--zui-copy-button-gradient-pink-from-hover	#9d174d	Light	--zui-copy-button-gradient-pink-from-hover-dark
--zui-copy-button-gradient-pink-to-hover	#9f1239	Light	--zui-copy-button-gradient-pink-to-hover-dark
--zui-copy-button-gradient-orange-from	#9a3412	Light	--zui-copy-button-gradient-orange-from-dark
--zui-copy-button-gradient-orange-to	#991b1b	Light	--zui-copy-button-gradient-orange-to-dark
--zui-copy-button-gradient-orange-fg	#ffffff	Light	--zui-copy-button-gradient-orange-fg-dark
--zui-copy-button-gradient-orange-from-hover	#9a3412	Light	--zui-copy-button-gradient-orange-from-hover-dark
--zui-copy-button-gradient-orange-to-hover	#991b1b	Shared	none
--zui-copy-button-ring-offset-dark	#020617	Dark	--zui-copy-button-ring-offset
--zui-copy-button-focus-ring-dark	#cbd5e1	Dark	--zui-copy-button-focus-ring
--zui-copy-button-radius-dark	Override with your dark theme value	Dark	--zui-copy-button-radius
--zui-copy-button-default-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-default-bg
--zui-copy-button-default-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-default-fg
--zui-copy-button-default-shadow-dark	Override with your dark theme value	Dark	--zui-copy-button-default-shadow
--zui-copy-button-default-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-default-bg-hover
--zui-copy-button-secondary-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-secondary-bg
--zui-copy-button-secondary-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-secondary-fg
--zui-copy-button-secondary-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-secondary-bg-hover
--zui-copy-button-destructive-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-destructive-bg
--zui-copy-button-destructive-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-destructive-fg
--zui-copy-button-destructive-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-destructive-bg-hover
--zui-copy-button-outline-border-dark	Override with your dark theme value	Dark	--zui-copy-button-outline-border
--zui-copy-button-outline-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-outline-bg
--zui-copy-button-outline-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-outline-fg
--zui-copy-button-outline-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-outline-bg-hover
--zui-copy-button-ghost-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-ghost-fg
--zui-copy-button-ghost-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-ghost-bg-hover
--zui-copy-button-glass-border-dark	Override with your dark theme value	Dark	--zui-copy-button-glass-border
--zui-copy-button-glass-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-glass-bg
--zui-copy-button-glass-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-glass-fg
--zui-copy-button-glass-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-glass-bg-hover
--zui-copy-button-emerald-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-emerald-bg
--zui-copy-button-emerald-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-emerald-fg
--zui-copy-button-emerald-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-emerald-bg-hover
--zui-copy-button-indigo-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-indigo-bg
--zui-copy-button-indigo-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-indigo-fg
--zui-copy-button-indigo-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-indigo-bg-hover
--zui-copy-button-purple-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-purple-bg
--zui-copy-button-purple-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-purple-fg
--zui-copy-button-purple-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-purple-bg-hover
--zui-copy-button-pink-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-pink-bg
--zui-copy-button-pink-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-pink-fg
--zui-copy-button-pink-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-pink-bg-hover
--zui-copy-button-rose-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-rose-bg
--zui-copy-button-rose-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-rose-fg
--zui-copy-button-rose-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-rose-bg-hover
--zui-copy-button-sky-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-sky-bg
--zui-copy-button-sky-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-sky-fg
--zui-copy-button-sky-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-sky-bg-hover
--zui-copy-button-teal-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-teal-bg
--zui-copy-button-teal-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-teal-fg
--zui-copy-button-teal-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-teal-bg-hover
--zui-copy-button-yellow-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-yellow-bg
--zui-copy-button-yellow-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-yellow-fg
--zui-copy-button-yellow-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-yellow-bg-hover
--zui-copy-button-orange-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-orange-bg
--zui-copy-button-orange-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-orange-fg
--zui-copy-button-orange-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-orange-bg-hover
--zui-copy-button-gray-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-gray-bg
--zui-copy-button-gray-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-gray-fg
--zui-copy-button-gray-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gray-bg-hover
--zui-copy-button-amber-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-amber-bg
--zui-copy-button-amber-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-amber-fg
--zui-copy-button-amber-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-amber-bg-hover
--zui-copy-button-violet-bg-dark	Override with your dark theme value	Dark	--zui-copy-button-violet-bg
--zui-copy-button-violet-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-violet-fg
--zui-copy-button-violet-bg-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-violet-bg-hover
--zui-copy-button-gradient-blue-from-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-blue-from
--zui-copy-button-gradient-blue-to-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-blue-to
--zui-copy-button-gradient-blue-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-blue-fg
--zui-copy-button-gradient-blue-from-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-blue-from-hover
--zui-copy-button-gradient-blue-to-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-blue-to-hover
--zui-copy-button-gradient-green-from-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-green-from
--zui-copy-button-gradient-green-to-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-green-to
--zui-copy-button-gradient-green-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-green-fg
--zui-copy-button-gradient-green-from-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-green-from-hover
--zui-copy-button-gradient-green-to-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-green-to-hover
--zui-copy-button-gradient-red-from-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-red-from
--zui-copy-button-gradient-red-to-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-red-to
--zui-copy-button-gradient-red-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-red-fg
--zui-copy-button-gradient-red-from-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-red-from-hover
--zui-copy-button-gradient-red-to-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-red-to-hover
--zui-copy-button-gradient-yellow-from-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-yellow-from
--zui-copy-button-gradient-yellow-to-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-yellow-to
--zui-copy-button-gradient-yellow-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-yellow-fg
--zui-copy-button-gradient-yellow-from-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-yellow-from-hover
--zui-copy-button-gradient-yellow-to-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-yellow-to-hover
--zui-copy-button-gradient-purple-from-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-purple-from
--zui-copy-button-gradient-purple-to-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-purple-to
--zui-copy-button-gradient-purple-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-purple-fg
--zui-copy-button-gradient-purple-from-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-purple-from-hover
--zui-copy-button-gradient-purple-to-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-purple-to-hover
--zui-copy-button-gradient-teal-from-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-teal-from
--zui-copy-button-gradient-teal-to-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-teal-to
--zui-copy-button-gradient-teal-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-teal-fg
--zui-copy-button-gradient-teal-from-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-teal-from-hover
--zui-copy-button-gradient-teal-to-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-teal-to-hover
--zui-copy-button-gradient-indigo-from-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-indigo-from
--zui-copy-button-gradient-indigo-to-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-indigo-to
--zui-copy-button-gradient-indigo-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-indigo-fg
--zui-copy-button-gradient-indigo-from-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-indigo-from-hover
--zui-copy-button-gradient-indigo-to-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-indigo-to-hover
--zui-copy-button-gradient-pink-from-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-pink-from
--zui-copy-button-gradient-pink-to-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-pink-to
--zui-copy-button-gradient-pink-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-pink-fg
--zui-copy-button-gradient-pink-from-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-pink-from-hover
--zui-copy-button-gradient-pink-to-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-pink-to-hover
--zui-copy-button-gradient-orange-from-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-orange-from
--zui-copy-button-gradient-orange-to-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-orange-to
--zui-copy-button-gradient-orange-fg-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-orange-fg
--zui-copy-button-gradient-orange-from-hover-dark	Override with your dark theme value	Dark	--zui-copy-button-gradient-orange-from-hover

Variable	Fallback	Theme	Pair
--zui-pagination-list-ring-offset	oklch(98.4% 0.003 247.858)	Light	--zui-pagination-list-ring-offset-dark
--zui-pagination-list-default-border	#0000001a	Light	--zui-pagination-list-default-border-dark
--zui-pagination-list-default-bg	#00000008	Light	--zui-pagination-list-default-bg-dark
--zui-pagination-list-secondary-border	#0000001a	Light	--zui-pagination-list-secondary-border-dark
--zui-pagination-list-secondary-bg	oklch(96.8% 0.007 247.896 / 0.4)	Light	--zui-pagination-list-secondary-bg-dark
--zui-pagination-list-destructive-border	oklch(64.5% 0.246 16.439 / 0.25)	Light	--zui-pagination-list-destructive-border-dark
--zui-pagination-list-destructive-bg	oklch(96.9% 0.015 12.422)	Light	--zui-pagination-list-destructive-bg-dark
--zui-pagination-list-outline-border	#00000026	Light	--zui-pagination-list-outline-border-dark
--zui-pagination-list-outline-bg	transparent	Light	--zui-pagination-list-outline-bg-dark
--zui-pagination-list-ghost-border	transparent	Light	--zui-pagination-list-ghost-border-dark
--zui-pagination-list-ghost-bg	transparent	Light	--zui-pagination-list-ghost-bg-dark
--zui-pagination-list-link-border	transparent	Light	--zui-pagination-list-link-border-dark
--zui-pagination-list-link-bg	transparent	Light	--zui-pagination-list-link-bg-dark
--zui-pagination-list-glass-border	#00000026	Light	--zui-pagination-list-glass-border-dark
--zui-pagination-list-glass-bg	#0000000d	Light	--zui-pagination-list-glass-bg-dark
--zui-pagination-list-emerald-border	oklch(69.6% 0.17 162.48 / 0.25)	Light	--zui-pagination-list-emerald-border-dark
--zui-pagination-list-emerald-bg	oklch(97.9% 0.021 166.113)	Light	--zui-pagination-list-emerald-bg-dark
--zui-pagination-list-indigo-border	oklch(58.5% 0.233 277.117 / 0.25)	Light	--zui-pagination-list-indigo-border-dark
--zui-pagination-list-indigo-bg	oklch(96.2% 0.018 272.314)	Light	--zui-pagination-list-indigo-bg-dark
--zui-pagination-list-purple-border	oklch(62.7% 0.265 303.9 / 0.25)	Light	--zui-pagination-list-purple-border-dark
--zui-pagination-list-purple-bg	oklch(97.7% 0.014 308.299)	Light	--zui-pagination-list-purple-bg-dark
--zui-pagination-list-pink-border	oklch(65.6% 0.241 354.308 / 0.25)	Light	--zui-pagination-list-pink-border-dark
--zui-pagination-list-pink-bg	oklch(97.1% 0.014 343.198)	Light	--zui-pagination-list-pink-bg-dark
--zui-pagination-list-rose-border	oklch(64.5% 0.246 16.439 / 0.25)	Light	--zui-pagination-list-rose-border-dark
--zui-pagination-list-rose-bg	oklch(96.9% 0.015 12.422)	Light	--zui-pagination-list-rose-bg-dark
--zui-pagination-list-sky-border	oklch(68.5% 0.169 237.323 / 0.25)	Light	--zui-pagination-list-sky-border-dark
--zui-pagination-list-sky-bg	oklch(97.7% 0.013 236.62)	Light	--zui-pagination-list-sky-bg-dark
--zui-pagination-list-teal-border	oklch(70.4% 0.14 182.503 / 0.25)	Light	--zui-pagination-list-teal-border-dark
--zui-pagination-list-teal-bg	oklch(98.4% 0.014 180.72)	Light	--zui-pagination-list-teal-bg-dark
--zui-pagination-list-yellow-border	oklch(79.5% 0.184 86.047 / 0.25)	Light	--zui-pagination-list-yellow-border-dark
--zui-pagination-list-yellow-bg	oklch(98.7% 0.026 102.212)	Light	--zui-pagination-list-yellow-bg-dark
--zui-pagination-list-orange-border	oklch(70.5% 0.213 47.604 / 0.25)	Light	--zui-pagination-list-orange-border-dark
--zui-pagination-list-orange-bg	oklch(98% 0.016 73.684)	Light	--zui-pagination-list-orange-bg-dark
--zui-pagination-list-gray-border	oklch(55.1% 0.027 264.364 / 0.25)	Light	--zui-pagination-list-gray-border-dark
--zui-pagination-list-gray-bg	oklch(98.5% 0.002 247.839)	Light	--zui-pagination-list-gray-bg-dark
--zui-pagination-list-amber-border	oklch(76.9% 0.188 70.08 / 0.25)	Light	--zui-pagination-list-amber-border-dark
--zui-pagination-list-amber-bg	oklch(98.7% 0.022 95.277)	Light	--zui-pagination-list-amber-bg-dark
--zui-pagination-list-violet-border	oklch(60.6% 0.25 292.717 / 0.25)	Light	--zui-pagination-list-violet-border-dark
--zui-pagination-list-violet-bg	oklch(96.9% 0.016 293.756)	Light	--zui-pagination-list-violet-bg-dark
--zui-pagination-list-gradient-blue-border	oklch(62.3% 0.214 259.815 / 0.3)	Light	--zui-pagination-list-gradient-blue-border-dark
--zui-pagination-list-gradient-blue-from	oklch(97% 0.014 254.604)	Shared	none
--zui-pagination-list-gradient-blue-to	oklch(97.7% 0.014 308.299)	Shared	none
--zui-pagination-list-gradient-green-border	oklch(76.8% 0.233 130.85 / 0.3)	Shared	none
--zui-pagination-list-gradient-green-from	oklch(98.2% 0.018 155.826)	Shared	none
--zui-pagination-list-gradient-green-to	oklch(98.6% 0.031 120.757)	Shared	none
--zui-pagination-list-gradient-red-border	oklch(65.6% 0.241 354.308 / 0.3)	Shared	none
--zui-pagination-list-gradient-red-from	oklch(97.1% 0.013 17.38)	Shared	none
--zui-pagination-list-gradient-red-to	oklch(97.1% 0.014 343.198)	Shared	none
--zui-pagination-list-gradient-yellow-border	oklch(70.5% 0.213 47.604 / 0.3)	Shared	none
--zui-pagination-list-gradient-yellow-from	oklch(98.7% 0.026 102.212)	Shared	none
--zui-pagination-list-gradient-yellow-to	oklch(98% 0.016 73.684)	Shared	none
--zui-pagination-list-gradient-purple-border	oklch(65.6% 0.241 354.308 / 0.3)	Shared	none
--zui-pagination-list-gradient-purple-from	oklch(97.7% 0.014 308.299)	Shared	none
--zui-pagination-list-gradient-purple-to	oklch(97.1% 0.014 343.198)	Shared	none
--zui-pagination-list-gradient-teal-border	oklch(71.5% 0.143 215.221 / 0.3)	Shared	none
--zui-pagination-list-gradient-teal-from	oklch(98.4% 0.014 180.72)	Shared	none
--zui-pagination-list-gradient-teal-to	oklch(98.4% 0.019 200.873)	Shared	none
--zui-pagination-list-gradient-indigo-border	oklch(62.7% 0.265 303.9 / 0.3)	Shared	none
--zui-pagination-list-gradient-indigo-from	oklch(96.2% 0.018 272.314)	Shared	none
--zui-pagination-list-gradient-indigo-to	oklch(97.7% 0.014 308.299)	Shared	none
--zui-pagination-list-gradient-pink-border	oklch(64.5% 0.246 16.439 / 0.3)	Shared	none
--zui-pagination-list-gradient-pink-from	oklch(97.1% 0.014 343.198)	Shared	none
--zui-pagination-list-gradient-pink-to	oklch(96.9% 0.015 12.422)	Shared	none
--zui-pagination-list-gradient-orange-border	oklch(70.5% 0.213 47.604 / 0.3)	Shared	none
--zui-pagination-list-gradient-orange-from	oklch(98% 0.016 73.684)	Shared	none
--zui-pagination-list-gradient-orange-to	oklch(97.1% 0.013 17.38)	Shared	none
--zui-pagination-ellipsis-fg	oklch(55.4% 0.046 257.417)	Shared	none
--zui-pagination-list-ring-offset-dark	oklch(12.9% 0.042 264.695)	Dark	--zui-pagination-list-ring-offset
--zui-pagination-list-default-border-dark	#ffffff1a	Dark	--zui-pagination-list-default-border
--zui-pagination-list-default-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-default-bg
--zui-pagination-list-secondary-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-secondary-border
--zui-pagination-list-secondary-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-secondary-bg
--zui-pagination-list-destructive-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-destructive-border
--zui-pagination-list-destructive-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-destructive-bg
--zui-pagination-list-outline-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-outline-border
--zui-pagination-list-outline-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-outline-bg
--zui-pagination-list-ghost-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-ghost-border
--zui-pagination-list-ghost-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-ghost-bg
--zui-pagination-list-link-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-link-border
--zui-pagination-list-link-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-link-bg
--zui-pagination-list-glass-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-glass-border
--zui-pagination-list-glass-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-glass-bg
--zui-pagination-list-emerald-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-emerald-border
--zui-pagination-list-emerald-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-emerald-bg
--zui-pagination-list-indigo-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-indigo-border
--zui-pagination-list-indigo-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-indigo-bg
--zui-pagination-list-purple-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-purple-border
--zui-pagination-list-purple-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-purple-bg
--zui-pagination-list-pink-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-pink-border
--zui-pagination-list-pink-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-pink-bg
--zui-pagination-list-rose-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-rose-border
--zui-pagination-list-rose-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-rose-bg
--zui-pagination-list-sky-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-sky-border
--zui-pagination-list-sky-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-sky-bg
--zui-pagination-list-teal-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-teal-border
--zui-pagination-list-teal-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-teal-bg
--zui-pagination-list-yellow-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-yellow-border
--zui-pagination-list-yellow-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-yellow-bg
--zui-pagination-list-orange-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-orange-border
--zui-pagination-list-orange-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-orange-bg
--zui-pagination-list-gray-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-gray-border
--zui-pagination-list-gray-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-gray-bg
--zui-pagination-list-amber-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-amber-border
--zui-pagination-list-amber-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-amber-bg
--zui-pagination-list-violet-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-violet-border
--zui-pagination-list-violet-bg-dark	Override with your dark theme value	Dark	--zui-pagination-list-violet-bg
--zui-pagination-list-gradient-blue-border-dark	Override with your dark theme value	Dark	--zui-pagination-list-gradient-blue-border

Variable	Fallback	Theme	Pair
--zui-tree-view-card-bg	#0000000d	Light	--zui-tree-view-card-bg-dark
--zui-tree-view-card-border	#0000001a	Light	--zui-tree-view-card-border-dark
--zui-tree-view-chevron	oklch(55.5% 0.041 257.417)	Light	--zui-tree-view-chevron-dark
--zui-tree-view-default-border	#0000001a	Light	--zui-tree-view-default-border-dark
--zui-tree-view-emerald-border	oklch(43.2% 0.095 166.913)	Light	--zui-tree-view-emerald-border-dark
--zui-tree-view-emerald-selected	oklch(95% 0.052 163.051)	Light	--zui-tree-view-emerald-selected-dark
--zui-tree-view-emerald-selected-fg	oklch(43.2% 0.095 166.913)	Light	--zui-tree-view-emerald-selected-fg-dark
--zui-tree-view-fg	oklch(20.8% 0.042 265.755)	Light	--zui-tree-view-fg-dark
--zui-tree-view-gradient-blue-border	oklch(42.4% 0.199 265.638)	Light	--zui-tree-view-gradient-blue-border-dark
--zui-tree-view-gradient-blue-from	oklch(80.9% 0.105 251.813)	Light	--zui-tree-view-gradient-blue-from-dark
--zui-tree-view-gradient-blue-to	oklch(82.7% 0.119 306.383)	Light	--zui-tree-view-gradient-blue-to-dark
--zui-tree-view-gradient-fg	#ffffff	Shared	none
--zui-tree-view-gradient-green-border	oklch(44.8% 0.119 151.328)	Light	--zui-tree-view-gradient-green-border-dark
--zui-tree-view-gradient-green-from	oklch(87.1% 0.15 154.449)	Light	--zui-tree-view-gradient-green-from-dark
--zui-tree-view-gradient-green-to	oklch(89.7% 0.196 126.665)	Light	--zui-tree-view-gradient-green-to-dark
--zui-tree-view-gradient-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-tree-view-gradient-indigo-border-dark
--zui-tree-view-gradient-indigo-from	oklch(78.5% 0.115 274.713)	Light	--zui-tree-view-gradient-indigo-from-dark
--zui-tree-view-gradient-indigo-to	oklch(82.7% 0.119 306.383)	Light	--zui-tree-view-gradient-indigo-to-dark
--zui-tree-view-gradient-orange-border	oklch(47% 0.157 37.304)	Light	--zui-tree-view-gradient-orange-border-dark
--zui-tree-view-gradient-orange-from	oklch(83.7% 0.128 66.29)	Light	--zui-tree-view-gradient-orange-from-dark
--zui-tree-view-gradient-orange-to	oklch(80.8% 0.114 19.571)	Light	--zui-tree-view-gradient-orange-to-dark
--zui-tree-view-gradient-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-tree-view-gradient-pink-border-dark
--zui-tree-view-gradient-pink-from	oklch(82.3% 0.12 346.018)	Light	--zui-tree-view-gradient-pink-from-dark
--zui-tree-view-gradient-pink-to	oklch(81% 0.117 11.638)	Light	--zui-tree-view-gradient-pink-to-dark
--zui-tree-view-gradient-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-tree-view-gradient-purple-border-dark
--zui-tree-view-gradient-purple-from	oklch(82.7% 0.119 306.383)	Light	--zui-tree-view-gradient-purple-from-dark
--zui-tree-view-gradient-purple-to	oklch(82.3% 0.12 346.018)	Light	--zui-tree-view-gradient-purple-to-dark
--zui-tree-view-gradient-red-border	oklch(44.4% 0.177 26.899)	Light	--zui-tree-view-gradient-red-border-dark
--zui-tree-view-gradient-red-from	oklch(80.8% 0.114 19.571)	Light	--zui-tree-view-gradient-red-from-dark
--zui-tree-view-gradient-red-to	oklch(82.3% 0.12 346.018)	Light	--zui-tree-view-gradient-red-to-dark
--zui-tree-view-gradient-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-tree-view-gradient-teal-border-dark
--zui-tree-view-gradient-teal-from	oklch(85.5% 0.138 181.071)	Light	--zui-tree-view-gradient-teal-from-dark
--zui-tree-view-gradient-teal-to	oklch(86.5% 0.127 207.078)	Light	--zui-tree-view-gradient-teal-to-dark
--zui-tree-view-gradient-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-tree-view-gradient-yellow-border-dark
--zui-tree-view-gradient-yellow-from	oklch(90.5% 0.182 98.111)	Light	--zui-tree-view-gradient-yellow-from-dark
--zui-tree-view-gradient-yellow-to	oklch(83.7% 0.128 66.29)	Light	--zui-tree-view-gradient-yellow-to-dark
--zui-tree-view-guide	#0000001a	Light	--zui-tree-view-guide-dark
--zui-tree-view-icon	oklch(55.5% 0.041 257.417)	Light	--zui-tree-view-icon-dark
--zui-tree-view-indigo-border	oklch(39.8% 0.195 277.366)	Light	--zui-tree-view-indigo-border-dark
--zui-tree-view-indigo-selected	oklch(93% 0.034 272.788)	Light	--zui-tree-view-indigo-selected-dark
--zui-tree-view-indigo-selected-fg	oklch(39.8% 0.195 277.366)	Light	--zui-tree-view-indigo-selected-fg-dark
--zui-tree-view-item-hover	#0000000d	Light	--zui-tree-view-item-hover-dark
--zui-tree-view-orange-border	oklch(47% 0.157 37.304)	Light	--zui-tree-view-orange-border-dark
--zui-tree-view-orange-selected	oklch(95.4% 0.038 75.164)	Light	--zui-tree-view-orange-selected-dark
--zui-tree-view-orange-selected-fg	oklch(47% 0.157 37.304)	Light	--zui-tree-view-orange-selected-fg-dark
--zui-tree-view-outline-border	#00000026	Light	--zui-tree-view-outline-border-dark
--zui-tree-view-pink-border	oklch(45.9% 0.187 3.815)	Light	--zui-tree-view-pink-border-dark
--zui-tree-view-pink-selected	oklch(94.8% 0.028 342.258)	Light	--zui-tree-view-pink-selected-dark
--zui-tree-view-pink-selected-fg	oklch(45.9% 0.187 3.815)	Light	--zui-tree-view-pink-selected-fg-dark
--zui-tree-view-purple-border	oklch(43.8% 0.218 303.724)	Light	--zui-tree-view-purple-border-dark
--zui-tree-view-purple-selected	oklch(94.6% 0.033 307.174)	Light	--zui-tree-view-purple-selected-dark
--zui-tree-view-purple-selected-fg	oklch(43.8% 0.218 303.724)	Light	--zui-tree-view-purple-selected-fg-dark
--zui-tree-view-ring-focus	#0000004d	Light	--zui-tree-view-ring-focus-dark
--zui-tree-view-rose-border	oklch(45.5% 0.188 13.697)	Light	--zui-tree-view-rose-border-dark
--zui-tree-view-rose-selected	oklch(94.1% 0.03 12.58)	Light	--zui-tree-view-rose-selected-dark
--zui-tree-view-rose-selected-fg	oklch(45.5% 0.188 13.697)	Light	--zui-tree-view-rose-selected-fg-dark
--zui-tree-view-selected	#00000014	Light	--zui-tree-view-selected-dark
--zui-tree-view-selected-fg	oklch(20.8% 0.042 265.755)	Light	--zui-tree-view-selected-fg-dark
--zui-tree-view-separated-bg	oklch(98.4% 0.003 247.858 / 0.4)	Light	--zui-tree-view-separated-bg-dark
--zui-tree-view-separated-border	#0000001a	Light	--zui-tree-view-separated-border-dark
--zui-tree-view-sky-border	oklch(44.3% 0.11 240.79)	Light	--zui-tree-view-sky-border-dark
--zui-tree-view-sky-selected	oklch(95.1% 0.026 236.824)	Light	--zui-tree-view-sky-selected-dark
--zui-tree-view-sky-selected-fg	oklch(44.3% 0.11 240.79)	Light	--zui-tree-view-sky-selected-fg-dark
--zui-tree-view-teal-border	oklch(43.7% 0.078 188.216)	Light	--zui-tree-view-teal-border-dark
--zui-tree-view-teal-selected	oklch(95.3% 0.051 180.801)	Light	--zui-tree-view-teal-selected-dark
--zui-tree-view-teal-selected-fg	oklch(43.7% 0.078 188.216)	Light	--zui-tree-view-teal-selected-fg-dark
--zui-tree-view-yellow-border	oklch(47.6% 0.114 61.907)	Light	--zui-tree-view-yellow-border-dark
--zui-tree-view-yellow-selected	oklch(97.3% 0.071 103.193)	Light	--zui-tree-view-yellow-selected-dark
--zui-tree-view-yellow-selected-fg	oklch(47.6% 0.114 61.907)	Light	--zui-tree-view-yellow-selected-fg-dark
--zui-tree-view-card-bg-dark	#00000099	Dark	--zui-tree-view-card-bg
--zui-tree-view-card-border-dark	#ffffff1a	Dark	--zui-tree-view-card-border
--zui-tree-view-chevron-dark	oklch(70.4% 0.04 256.788)	Dark	--zui-tree-view-chevron
--zui-tree-view-default-border-dark	#ffffff1a	Dark	--zui-tree-view-default-border
--zui-tree-view-emerald-border-dark	oklch(59.6% 0.145 163.225)	Dark	--zui-tree-view-emerald-border
--zui-tree-view-emerald-selected-dark	oklch(59.6% 0.145 163.225 / 0.16)	Dark	--zui-tree-view-emerald-selected
--zui-tree-view-emerald-selected-fg-dark	oklch(84.5% 0.143 164.978)	Dark	--zui-tree-view-emerald-selected-fg
--zui-tree-view-fg-dark	oklch(92.9% 0.013 255.508)	Dark	--zui-tree-view-fg
--zui-tree-view-gradient-blue-border-dark	oklch(54.6% 0.245 262.881)	Dark	--zui-tree-view-gradient-blue-border
--zui-tree-view-gradient-blue-from-dark	oklch(54.6% 0.245 262.881)	Dark	--zui-tree-view-gradient-blue-from
--zui-tree-view-gradient-blue-to-dark	oklch(55.8% 0.288 302.321)	Dark	--zui-tree-view-gradient-blue-to
--zui-tree-view-gradient-green-border-dark	oklch(62.7% 0.194 149.214)	Dark	--zui-tree-view-gradient-green-border
--zui-tree-view-gradient-green-from-dark	oklch(62.7% 0.194 149.214)	Dark	--zui-tree-view-gradient-green-from
--zui-tree-view-gradient-green-to-dark	oklch(64.8% 0.2 131.684)	Dark	--zui-tree-view-gradient-green-to
--zui-tree-view-gradient-indigo-border-dark	oklch(51.1% 0.262 276.966)	Dark	--zui-tree-view-gradient-indigo-border
--zui-tree-view-gradient-indigo-from-dark	oklch(51.1% 0.262 276.966)	Dark	--zui-tree-view-gradient-indigo-from
--zui-tree-view-gradient-indigo-to-dark	oklch(55.8% 0.288 302.321)	Dark	--zui-tree-view-gradient-indigo-to
--zui-tree-view-gradient-orange-border-dark	oklch(64.6% 0.222 41.116)	Dark	--zui-tree-view-gradient-orange-border
--zui-tree-view-gradient-orange-from-dark	oklch(64.6% 0.222 41.116)	Dark	--zui-tree-view-gradient-orange-from
--zui-tree-view-gradient-orange-to-dark	oklch(57.7% 0.245 27.325)	Dark	--zui-tree-view-gradient-orange-to
--zui-tree-view-gradient-pink-border-dark	oklch(59.2% 0.249 0.584)	Dark	--zui-tree-view-gradient-pink-border
--zui-tree-view-gradient-pink-from-dark	oklch(59.2% 0.249 0.584)	Dark	--zui-tree-view-gradient-pink-from
--zui-tree-view-gradient-pink-to-dark	oklch(58.6% 0.253 17.585)	Dark	--zui-tree-view-gradient-pink-to
--zui-tree-view-gradient-purple-border-dark	oklch(55.8% 0.288 302.321)	Dark	--zui-tree-view-gradient-purple-border
--zui-tree-view-gradient-purple-from-dark	oklch(55.8% 0.288 302.321)	Dark	--zui-tree-view-gradient-purple-from
--zui-tree-view-gradient-purple-to-dark	oklch(59.2% 0.249 0.584)	Dark	--zui-tree-view-gradient-purple-to
--zui-tree-view-gradient-red-border-dark	oklch(57.7% 0.245 27.325)	Dark	--zui-tree-view-gradient-red-border
--zui-tree-view-gradient-red-from-dark	oklch(57.7% 0.245 27.325)	Dark	--zui-tree-view-gradient-red-from
--zui-tree-view-gradient-red-to-dark	oklch(59.2% 0.249 0.584)	Dark	--zui-tree-view-gradient-red-to
--zui-tree-view-gradient-teal-border-dark	oklch(60% 0.118 184.704)	Dark	--zui-tree-view-gradient-teal-border
--zui-tree-view-gradient-teal-from-dark	oklch(60% 0.118 184.704)	Dark	--zui-tree-view-gradient-teal-from
--zui-tree-view-gradient-teal-to-dark	oklch(60.9% 0.126 221.723)	Dark	--zui-tree-view-gradient-teal-to
--zui-tree-view-gradient-yellow-border-dark	oklch(68.1% 0.162 75.834)	Dark	--zui-tree-view-gradient-yellow-border
--zui-tree-view-gradient-yellow-from-dark	oklch(68.1% 0.162 75.834)	Dark	--zui-tree-view-gradient-yellow-from
--zui-tree-view-gradient-yellow-to-dark	oklch(64.6% 0.222 41.116)	Dark	--zui-tree-view-gradient-yellow-to
--zui-tree-view-guide-dark	#ffffff1a	Dark	--zui-tree-view-guide
--zui-tree-view-icon-dark	oklch(70.4% 0.04 256.788)	Dark	--zui-tree-view-icon
--zui-tree-view-indigo-border-dark	oklch(51.1% 0.262 276.966)	Dark	--zui-tree-view-indigo-border
--zui-tree-view-indigo-selected-dark	oklch(51.1% 0.262 276.966 / 0.16)	Dark	--zui-tree-view-indigo-selected
--zui-tree-view-indigo-selected-fg-dark	oklch(78.5% 0.115 274.713)	Dark	--zui-tree-view-indigo-selected-fg
--zui-tree-view-item-hover-dark	#ffffff0d	Dark	--zui-tree-view-item-hover
--zui-tree-view-orange-border-dark	oklch(64.6% 0.222 41.116)	Dark	--zui-tree-view-orange-border
--zui-tree-view-orange-selected-dark	oklch(64.6% 0.222 41.116 / 0.16)	Dark	--zui-tree-view-orange-selected
--zui-tree-view-orange-selected-fg-dark	oklch(83.7% 0.128 66.29)	Dark	--zui-tree-view-orange-selected-fg
--zui-tree-view-outline-border-dark	#ffffff26	Dark	--zui-tree-view-outline-border
--zui-tree-view-pink-border-dark	oklch(59.2% 0.249 0.584)	Dark	--zui-tree-view-pink-border
--zui-tree-view-pink-selected-dark	oklch(59.2% 0.249 0.584 / 0.16)	Dark	--zui-tree-view-pink-selected
--zui-tree-view-pink-selected-fg-dark	oklch(82.3% 0.12 346.018)	Dark	--zui-tree-view-pink-selected-fg
--zui-tree-view-purple-border-dark	oklch(55.8% 0.288 302.321)	Dark	--zui-tree-view-purple-border
--zui-tree-view-purple-selected-dark	oklch(55.8% 0.288 302.321 / 0.16)	Dark	--zui-tree-view-purple-selected
--zui-tree-view-purple-selected-fg-dark	oklch(82.7% 0.119 306.383)	Dark	--zui-tree-view-purple-selected-fg
--zui-tree-view-ring-focus-dark	#ffffff4d	Dark	--zui-tree-view-ring-focus
--zui-tree-view-rose-border-dark	oklch(58.6% 0.253 17.585)	Dark	--zui-tree-view-rose-border
--zui-tree-view-rose-selected-dark	oklch(58.6% 0.253 17.585 / 0.16)	Dark	--zui-tree-view-rose-selected
--zui-tree-view-rose-selected-fg-dark	oklch(81% 0.117 11.638)	Dark	--zui-tree-view-rose-selected-fg
--zui-tree-view-selected-dark	#ffffff1f	Dark	--zui-tree-view-selected
--zui-tree-view-selected-fg-dark	#ffffff	Dark	--zui-tree-view-selected-fg
--zui-tree-view-separated-bg-dark	oklch(12.9% 0.042 264.695 / 0.4)	Dark	--zui-tree-view-separated-bg
--zui-tree-view-separated-border-dark	#ffffff1a	Dark	--zui-tree-view-separated-border
--zui-tree-view-sky-border-dark	oklch(58.8% 0.158 241.966)	Dark	--zui-tree-view-sky-border
--zui-tree-view-sky-selected-dark	oklch(58.8% 0.158 241.966 / 0.16)	Dark	--zui-tree-view-sky-selected
--zui-tree-view-sky-selected-fg-dark	oklch(82.8% 0.111 230.318)	Dark	--zui-tree-view-sky-selected-fg
--zui-tree-view-teal-border-dark	oklch(60% 0.118 184.704)	Dark	--zui-tree-view-teal-border
--zui-tree-view-teal-selected-dark	oklch(60% 0.118 184.704 / 0.16)	Dark	--zui-tree-view-teal-selected
--zui-tree-view-teal-selected-fg-dark	oklch(85.5% 0.138 181.071)	Dark	--zui-tree-view-teal-selected-fg
--zui-tree-view-yellow-border-dark	oklch(68.1% 0.162 75.834)	Dark	--zui-tree-view-yellow-border
--zui-tree-view-yellow-selected-dark	oklch(68.1% 0.162 75.834 / 0.16)	Dark	--zui-tree-view-yellow-selected
--zui-tree-view-yellow-selected-fg-dark	oklch(90.5% 0.182 98.111)	Dark	--zui-tree-view-yellow-selected-fg