Colors & Tokens

X-UI uses semantic color tokens that adapt automatically to light and dark modes.

Semantic Colors

TokenLightDarkDescription

--x-background

Page background

--x-foreground

Primary text

--x-primary

Primary brand color

--x-secondary

Secondary surfaces

--x-muted

Muted backgrounds

--x-mutedForeground

Secondary text

--x-accent

Accent/highlight

--x-destructive

Error/danger

--x-border

Border color

Glass Tokens

TokenLightDarkDescription

--x-glass-bg

Glass background

--x-glass-border

Glass border

Usage in CSS

.my-component {
    background: rgb(var(--x-background));
    color: rgb(var(--x-foreground));
    border: 1px solid rgb(var(--x-border));
}

.glass-effect {
    background: var(--x-glass-bg);
    border: 1px solid var(--x-glass-border);
    backdrop-filter: blur(16px);
}

Navigation