Компоненты

ThemeToggle

Переключатель светлой и тёмной темы.

Переключатель светлой и тёмной темы. Тот же, что стоит в шапке этого сайта.

Пример

Тема сайта:

Иконки лежат друг на друге и меняются поворотом — переключение читается как одно движение, а не как подмена картинки.

Пропсы

Проп	Тип	По умолчанию	Описание
`storageKey`	`string`	`"theme"`	Ключ в `localStorage`. Должен совпадать с ключом, переданным в `themeScript()`.
`labels`	`{ toDark?, toLight?, action? }`	—	Подсказка при наведении в каждом из состояний и доступное имя кнопки.
`className`	`string`	—	Дополнительные классы.

storageKeystring

по умолчанию: "theme"

Ключ в localStorage. Должен совпадать с ключом, переданным в themeScript().

labels{ toDark?, toLight?, action? }

Подсказка при наведении в каждом из состояний и доступное имя кнопки.

classNamestring

Дополнительные классы.

Свой переключатель — с тремя состояниями, с выпадающим списком — делается на хуке useTheme: он отдаёт и выбор пользователя, и то, что видно на экране.