Кнопка тёмной темы для сайта
Выберите цвета обеих тем. В коде есть CSS-переменные, скрипт, предотвращающий мигание, и доступная кнопка с aria-pressed.
Как пользоватьсяСветлая и тёмная тема одной кнопкой
1. No <head>, antes do CSS
2. CSS
3. Кнопка и скрипт — в теле страницы
Доступно на: 
Кнопка тёмной темы для сайта: для чего нужен
Тёмный режим стал стандартом на телефонах, и многие ждут, что сайты будут ему следовать. Этот генератор создаёт светлую и тёмную тему на CSS-переменных и prefers-color-scheme, так что сайт сам следует системе, плюс кнопку, чтобы человек выбрал другую тему только на вашем сайте.
Код состоит из трёх частей: одна строка для head, которая применяет сохранённый выбор до появления страницы (без вспышки неправильной темы), CSS с color-scheme, чтобы поля и полосы прокрутки подстраивались, и кнопка с aria-pressed и иконками солнца и луны.
Как пользоваться
- Выберите цвета светлой и тёмной темы.
- Проверьте кнопку в предпросмотре.
- Вставьте строку в head, а CSS и кнопку — в нужные места.
Когда использовать
- Блог и контентные сайты.
- Системы и панели.
- Портфолио разработчика.
Частые вопросы
Как избежать вспышки светлой темы при загрузке?
Скрипт, считывающий сохранённый выбор, должен выполняться в head, до появления страницы. Код разделён на две части: одна строка для head и кнопка для тела страницы.
Что делает color-scheme?
Сообщает браузеру, светлая страница или тёмная, чтобы он тоже подстроил полосы прокрутки, поля форм и фон по умолчанию. Без него в тёмном режиме белые поля будут выбиваться.
Нужна ли кнопка, если сайт уже следует системе?
Не обязательно: только с prefers-color-scheme сайт уже следует теме телефона или компьютера. Кнопка полезна тем, кто хочет тему, отличную от системной, только на вашем сайте.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.