Svelte UI

Theme Colors

Complete color palette with automatic light/dark theme support

The ThemeSelector control

<ThemeSelector> toggles light / dark / auto — it sets the class on <html> and persists to localStorage. It forwards the shared size + variant axes to its underlying Select:

Semantic Colors

Primary

Main brand color, primary actions

var(--ui-color-primary)
Hover (90% + 10% black):

Secondary

Supporting actions, secondary buttons

var(--ui-color-secondary)
Hover (90% + 10% black):

Success

Success states, positive feedback

var(--ui-color-success)
Hover (90% + 10% black):

Warning

Warning states, caution messages

var(--ui-color-warning)
Hover (90% + 10% black):

Error

Error states, destructive actions

var(--ui-color-error)
Hover (90% + 10% black):

Info

Informational messages, tips

var(--ui-color-info)
Hover (90% + 10% black):

System Colors

Background

Main page background

var(--ui-color-background)

Page Text

Primary text color

var(--ui-color-text)

Color Combinations

Button variants

Full variant coverage (borderless, ghost, per-component) lives on the variants page.

Alert Messages

Success Message

This is a success message with green accent.

Warning Message

This is a warning message with amber accent.

Error Message

This is an error message with red accent.

Info Message

This is an informational message with blue accent.

CSS Variables Reference

Use these CSS variables in your components:

Semantic Colors:

  • var(--ui-color-primary)
  • var(--ui-color-secondary)
  • var(--ui-color-success)
  • var(--ui-color-warning)
  • var(--ui-color-error)
  • var(--ui-color-info)

System Colors:

  • var(--ui-color-background)
  • var(--ui-color-text)

Interactive tints (mix from --ui-accent):

  • var(--ui-color-hover)  /* 4% */
  • var(--ui-color-surface) /* 8% */
  • var(--ui-color-active) /* 12% */
  • --ui-accent (defaults to text)

Tinted-surface scale + border:

  • --ui-tint-soft /* 12% */
  • --ui-tint-border /* 50% */
  • --ui-tint-border-hover /* 80% */
  • --ui-tint-strong /* 80% */
  • var(--ui-border-radius), var(--ui-border-color)

Two calculated systems:

Solid fills darken on hover: color-mix(in srgb, var(--ui-color-primary) 90%, black)

Interactive surfaces tint from the accent: color-mix(in srgb, var(--ui-accent) 4%/8%/12%, transparent)