Проект
Другое
демо
Светлая и тёмная тема
Одна страница в двух оформлениях: переключатель меняет тему целиком, без второй вёрстки.
Живая страница: переключатель темы работает в браузере.
Кратко
- Тип
- Другое
- Моя роль
- Структура, дизайн и вёрстка
- Технологии
- HTML Tailwind CSS CSS-переменные JavaScript
- Изображений
- 2
Нажмите на изображение, чтобы открыть его на весь экран. Переключение — стрелками.
О проекте
Пример интерфейса с переключением светлой и тёмной темы. Оформление задано переменными, поэтому смена темы меняет всю страницу: фоны, текст, границы, кнопки и элементы форм. Отдельная вёрстка для тёмного варианта не нужна.
Что сделано
- Переключатель светлой и тёмной темы
- Оформление на переменных, а не на двух наборах стилей
- Панель с показателями и полосами прогресса
- Карточки, кнопки и поля формы в обеих темах
- Контраст текста сохраняется при любом оформлении
