Логотип Volt UI

Теми

Налаштуйте вигляд і відчуття вашого застосунку за допомогою вбудованих тем, кольорів і підтримки темного режиму.

Доступні теми

Volt UI постачається з кількома готовими кольоровими темами. Кожна тема дає власну палітру для основного, другорядного, акцентного та семантичних кольорів.

V

Volt

Синя тема за замовчуванням

E

Ember

Тепла помаранчева тема

S

Sage

Природна зелена тема

D

Dusk

Фіолетова присмеркова тема

G

Glacier

Холодна блакитна тема

Налаштування теми

Додайте провайдер теми до конфігурації свого застосунку:

import { provideVoltTheme } from '@voltui/components'; export const appConfig: ApplicationConfig = { providers: [ provideVoltTheme({ color: 'volt', style: 'soft', dark: false }) ] };

Кольорові варіанти

Кольори темиОберіть основну кольорову палітру
  • 'volt' — синій (за замовчуванням)
  • 'ember' — помаранчевий/червоний
  • 'sage' — зелений
  • 'dusk' — фіолетовий
  • 'glacier' — блакитний
Варіанти стилюОберіть стиль своїх компонентів
  • 'sharp' — малий радіус, пласкі тіні (за замовчуванням)
  • 'soft' — великий радіус, розсіяні тіні
  • 'brutal' — без радіуса, жорсткі зміщені тіні, товсті рамки
  • 'ghost' — без рамок, без тіней
  • 'retro' — вигляд у стилі Y2K

API під час виконання

Дві функції з @voltui/components керують темою під час виконання. Обидві лише виставляють data-color , data-style і клас .dark на <html> — прихованого стану немає, тож результат можна будь-коли переглянути чи перевизначити звичайними DOM API.

provideVoltTheme(options) Провайдер середовища. Викличте його один раз у appConfig.providers , щоб задати тему під час запуску — і на сервері, і на клієнті.

Безпечно для SSR. Читає токен впровадження DOCUMENT від Angular, а не глобальний document , тож атрибути теми присутні вже у відрендереному на сервері HTML — без спалаху теми за замовчуванням під час гідратації клієнтського бандла.

applyVoltTheme(options, doc?) Звичайна функція. Викликайте її з обробника кліку, з effect або звідусіль, де треба змінити тему після запуску (наприклад, із перемикача тем).

За замовчуванням лише для браузера (нічого не робить, якщо document не визначено). Передайте явний аргумент doc , щоб націлитися на інший документ, наприклад у тесті.

// app.config.ts — set the theme at bootstrap
import { provideVoltTheme } from '@voltui/components';

export const appConfig: ApplicationConfig = {
  providers: [provideVoltTheme({ color: 'ember', style: 'soft' })],
};

Стратегія темного режиму

Темний режим працює через клас: додавання .dark до <html> перемикає кожен компонент на його темні значення токенів (див. @custom-variant dark у core.css ). Volt не читає prefers-color-scheme автоматично: dark за замовчуванням світлий, доки ви не передасте dark: true або не викличете applyVoltTheme самі, тож вибір завжди явний і не зміниться мовчки, якщо відвідувач змінить тему своєї системи.

// Static: dark by default
provideVoltTheme({ color: 'volt', dark: true })

// Dynamic: toggle from a button, a signal, etc.
import { applyVoltTheme } from '@voltui/components';
applyVoltTheme({ dark: true });

// Opt in to following the OS preference yourself
const media = matchMedia('(prefers-color-scheme: dark)');
applyVoltTheme({ dark: media.matches });
media.addEventListener('change', e => applyVoltTheme({ dark: e.matches }));

Сайт документації сам зберігає вибір відвідувача у localStorage і застосовує його невеликим вбудованим скриптом у <head> файлу index.html , ще до завантаження будь-якої таблиці стилів — див. src/app/components/theme-switcher.ts як зразкову реалізацію, якщо хочете таку саму поведінку без спалаху на клієнті.

CSS-змінні

Кожен пресет задає той самий набір семантичних токенів значеннями oklch() . Компоненти беруть їх через утиліти Tailwind ( bg-primary , text-muted-foreground ), зіставлені через @theme inline у core.css , і ніколи через сирий var(--primary) . Це повний перелік того, що може визначити пресет; шаблони для копіювання — у двох посібниках нижче. 

/* Color tokens — one block per data-color, one per .dark[data-color] */
--background / --foreground
--surface / --surface-foreground        /* cards, popovers, dropdowns */
--muted / --muted-foreground
--border / --input / --ring             /* --input is the form-control border */
--primary / --primary-foreground
--secondary / --secondary-foreground
--destructive / --destructive-foreground /* shared by all colors, only in core.css */
--success / --success-foreground
--warning / --warning-foreground
--error / --error-foreground
--info / --info-foreground

/* Style tokens — one block per data-style */
--radius
--border-width / --border-style
--ring-width / --ring-offset-width
--volt-shadow-sm / --volt-shadow / --volt-shadow-md / --volt-shadow-lg
--spacing-component / --spacing-gap
--volt-font-weight-base / --volt-font-weight-heading / --volt-font-weight-label

Створити власний кольоровий пресет

Кольоровий пресет — це просто пара селекторів за ключем data-color . Скопіюйте цей шаблон, замініть 'mytheme' та значення, а тоді імпортуйте файл після @voltui/components/themes.css у своїй глобальній таблиці стилів. 

:root[data-color='mytheme'] {
  --primary: oklch(0.58 0.2 265);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.96 0.01 265);
  --secondary-foreground: oklch(0.15 0.01 265);
  --background: oklch(1 0 0);
  --foreground: oklch(0.15 0.01 265);
  --surface: oklch(1 0 0);
  --surface-foreground: oklch(0.15 0.01 265);
  --muted: oklch(0.96 0.005 265);
  --muted-foreground: oklch(0.5 0.02 265);
  --border: oklch(0.9 0.01 265);
  --input: oklch(0.65 0.02 265);
  --ring: oklch(0.58 0.2 265);
  --success: oklch(0.5 0.14 150);
  --success-foreground: oklch(0.98 0 0);
  --warning: oklch(0.7 0.16 70);
  --warning-foreground: oklch(0.2 0.05 70);
  --error: oklch(0.55 0.22 25);
  --error-foreground: oklch(0.98 0 0);
  --info: oklch(0.55 0.14 240);
  --info-foreground: oklch(0.98 0 0);
}

.dark[data-color='mytheme'] {
  /* same tokens, tuned for a dark --background/--surface */
}

Тримайте кожну пару «текст — фон» із контрастом 4,5:1 або кращим (3:1 для --ring та --input щодо --background ) — точну перевірку, яку цей проєкт запускає на власних пресетах, дивіться у scripts/contrast-audit.mjs . Інструмент Створити тему згенерує відправну точку з одного акцентного кольору, якщо не хочете добирати одинадцять токенів вручну.

Створити власний пресет стилю

Пресет стилю не торкається кольору — лише форми. Він працює за ключем data-style і застосовується до всіх кольорів одразу. 

:root[data-style='mystyle'] {
  --radius: 0.5rem;
  --border-width: 1px;
  --border-style: solid;
  --ring-width: 2px;
  --ring-offset-width: 2px;

  --volt-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --volt-shadow: 0 1px 3px 0 oklch(0 0 0 / 0.1);
  --volt-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1);
  --volt-shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1);

  --spacing-component: 1;
  --spacing-gap: 0.5rem;

  --volt-font-weight-base: 400;
  --volt-font-weight-heading: 600;
  --volt-font-weight-label: 500;
}

Реєстрація така сама, як у кольорового пресета: покладіть його у глобальну таблицю стилів після @voltui/components/themes.css , а тоді задайте data-style="mystyle" через provideVoltTheme або applyVoltTheme .