Layout

Colors

Design tokens — the color palette powering all components.

Как создавать и управлять темами
1. Где задавать тему

Определите CSS-переменные в глобальных стилях (например, src/styles/globals.css). Одна тема по умолчанию — в :root, дополнительные — в селекторах [data-theme='имя'].

2. Какие переменные задавать

Ниже перечислены все токены. Задайте нужные (достаточно тех, что хотите переопределить). Компоненты UIKit подхватывают их через алиасы --ps-* с fallback на эти имена.

3. Переключение темы

Установите атрибут data-theme на <html> или <body>. Например: document.documentElement.setAttribute('data-theme', 'light'). Значение должно совпадать с именем селектора ([data-theme='light']).

4. Сохранение выбора пользователя

При смене темы сохраняйте значение в localStorage (например, theme) и при загрузке страницы читайте его и вызывайте setAttribute('data-theme', savedTheme). Если ключа нет — используйте тему по умолчанию или системную (prefers-color-scheme).

Пример фрагмента темы
[data-theme='light'] {
  --background: #f8f8f8;
  --surface-primary: #ffffff;
  --surface-secondary: #f0f0f0;
  --text-primary: #0a0a0a;
  --text-secondary: #444444;
  --border: #d0d0d0;
  /* ... остальные токены при необходимости */
}
Токены цветов
Background
--background
Background (toast)
--background-toast
Foreground
--foreground
Surface Primary
--surface-primary
Surface Secondary
--surface-secondary
Surface Tertiary
--surface-tertiary
Surface Elevated
--surface-elevated
Border
--border
Border Hover
--border-hover
Line
--line
Text Primary
--text-primary
Text Secondary
--text-secondary
Text Muted
--text-muted
Text Disabled
--text-disabled
Hover
--hover
Active
--active
Focus Ring
--focus-ring
Accent
--accent
Accent Muted
--accent-muted
Accent Foreground (text on accent)
--accent-foreground
Danger
--danger
Success
--success
Warning
--warning
Skeleton Base
--skeleton-base
Skeleton Highlight
--skeleton-highlight
Usage
/* Import the styles at your app root */
import '@pulsesync/uikit/styles'

/* Use CSS variables anywhere */
.card {
  background: var(--ps-surface-secondary);
  border: 1px solid var(--ps-border);
  color: var(--ps-text-primary);
}

/* Theme via data-attribute on <html> */
<html data-theme="dark">  /* or "light" */