ThemeSwitcher

Преконфігурований Selector, що читає й записує активну акцентну тему через useTheme. Вибір опції змінює data-theme на <html> і зберігає значення в cookie orio-theme — жодної моделі підключати не треба.

Живе демо

Оберіть тему — акцентний колір цієї сторінки оновиться наживо.

Використання

<template>
  <orio-theme-switcher />
</template>

За замовчуванням показує всі теми з експортованої константи THEMES (navy, teal, forest, wine, royal, violet). Передайте themes, щоб обмежити або розширити список — рядки використовуються дослівно як значення data-theme, тож підходить будь-яка тема, зареєстрована у вашому CSS:

<template>
  <orio-theme-switcher :themes="['navy', 'teal', 'brand']" />
</template>

Як визначати власні акценти data-theme, див. у розділі Теми.

Пропси

Проп	Тип	За замовчуванням	Опис
themes	string[]	[...THEMES]	Назви тем для вибору; використовуються як значення data-theme

Поведінка

• Змінює useTheme().theme під час вибору. Побічний ефект і є API — v-model немає.
• Зберігає значення в cookie orio-theme для безпечного з погляду SSR першого рендеру.
• Потребує контексту useTheme (доступний будь-де всередині застосунку з Orio UI).

Пов'язане

• ModeSwitcher — аналог для світлого/темного режиму.
• useTheme — базовий аксесор.
• Selector — компонент «під капотом».