ColorModeSwitch

Базовое использование

Нажмите, чтобы перебрать light → dark → auto → light.

Подпись и имя режима

Текущий режим: auto — следует системной настройке (сейчас light)

Размеры

Отключённый

Программное управление

preference: auto · resolvedMode: light · isDark: false

Входные параметры

Имя	Тип	По умолчанию	Описание
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Размер переключателя и его иконки.
`label`	`string`	`undefined`	Подпись рядом с переключателем. Добавляется в `aria-label`.
`showMode`	`boolean`	`false`	Показывать текстом имя режима (`light`/`dark`/`auto`) вместо подписи.
`disabled`	`boolean`	`false`	Отключает переключение.

События

Имя	Аргументы	Когда срабатывает
`update:mode`	`mode: ColorModePreference`	Перед применением — сообщает режим, который будет установлен.
`change`	`mode: ColorModePreference`	После применения — сообщает фактически установленный режим.

Описание

Компонент переключает цветовой режим приложения между светлой и тёмной темой и системной настройкой. Тема применяется классом c3--dark на <html>: он переключает семантические переменные в _theme.scss — --c3-color, --c3-color-emphasis, --c3-color-muted, --c3-color-border и текстовые цвета. Дополнительно выставляется CSS-свойство color-scheme, чтобы нативные элементы (скроллбары, контролы форм) тоже переключались.

Выбранный режим сохраняется в localStorage под ключом c3-color-mode и восстанавливается при следующей загрузке. Если хранилище недоступно (приватный режим, заблокированные куки), переключение продолжает работать — просто без сохранения.

В режиме auto компонент подписан на prefers-color-scheme и реагирует на смену системной настройки без перезагрузки. Режим auto визуально подсвечивается цветом primary, чтобы было видно, что тема сейчас следует системе.

Дополнительная информация

Цикл переключения: light → dark → auto → light.
Иконки: солнце — светлая тема, луна — тёмная, монитор — системная настройка. Все три есть в реестре иконок (sun, moon, monitor) и доступны через <C3Icon>.
Слотов нет — компонент рендерит одну кнопку.
Доступность: нативный <button type="button"> с aria-label и title, описывающими текущий режим; в режиме auto в подпись попадает фактический режим. Работает с клавиатуры (Enter/Space).
Состояние общее для всего приложения: несколько экземпляров показывают один и тот же режим.
Программное управление — composable useC3ColorMode(): preference, resolvedMode, isDark, setMode(mode), toggle(). Composables модуля автоимпортируются.
SSR: класс темы и системная настройка применяются сразу при инициализации, а реактивный preference обновляется только после монтирования. Поэтому первая отрисовка совпадает с серверной (в режиме auto), и Vue не сообщает о hydration mismatch, но вспышки светлой темы у пользователей с тёмной нет.
Если режим нужно задать по умолчанию не из localStorage, вызовите useC3ColorMode().setMode() или добавьте класс c3--dark на <html> в серверном app.html.