Переключение темы
Типичный сценарий: у сайта уже есть светлая тема и вы хотите создать её тёмный аналог. Или, даже если вы начинаете с нуля, у вас уже есть обе темы: светлая и тёмная. Одна тема должна быть определена как тема по умолчанию, которую пользователи получают при первом посещении — в большинстве случаев это светлая тема (хотя мы можем позволить браузеру пользователя сделать этот выбор за нас, как вы увидите дальше). Также должен быть способ переключиться на другую тему (что можно сделать автоматически, как вы тоже увидите) — например, пользователь щёлкает по кнопке и цветовая тема меняется. Для этого существует несколько подходов.
Использование класса для
Хитрость заключается в замене класса, который будет указателем для изменения стиля на всей странице.
Это пример скрипта для кнопки, переключающей данный класс.
// Выбираем кнопку const btn = document.querySelector('.btn-toggle'); // Отслеживаем щелчок по кнопке btn.addEventListener('click', function() < // Затем переключаем (добавляем/удаляем) класс .dark-theme для body document.body.classList.toggle('dark-theme'); >)Вот как мы можем использовать эту идею.
Основная идея такого подхода состоит в том, что мы стилизуем элементы как обычно, назовём это нашим режимом «по умолчанию». Затем создаём полный набор цветовых стилей с помощью класса, заданного в элементе , который мы можем использовать в качестве «тёмного» режима. Допустим, по умолчанию применяется светлая цветовая схема. Все эти «светлые» стили написаны точно так же, как вы обычно пишете CSS. Учитывая наш HTML, применим глобальный стиль к и к .
body < color: #222; background: #fff; >a
Довольно неплохо. Теперь у нас есть тёмный текст (#222) и тёмные ссылки (#0033cc) на светлом фоне (#fff). Начало нашей темы «по умолчанию» положено.
Теперь переопределим значения этих свойств, но в этот раз для другого класса.
body < color: #222; background: #fff; >a < color: #0033cc; >/* Стили Тёмной темы */ body.dark-theme < color: #eee; background: #121212; >body.dark-theme a
Стили тёмной темы будут потомками того же родительского класса — в нашем примере это .dark-theme , который мы добавили к тегу .
Как «переключать» классы у для доступа к тёмным стилям? Мы можем использовать JavaScript! Выберем класс кнопки ( .btn-toggle ), добавим отслеживание щелчка, а затем вставим класс тёмной темы ( .dark-theme ) в список классов элемента . Это эффективно отменит все установленные нами «светлые» цвета, благодаря каскаду и специфичности.
Вот полный рабочий код в действии. Пощёлкайте по кнопке для переключения на тёмный режим и выхода из него.
Использование разных таблиц стилей
Вместо хранения всех стилей в одном месте, мы можем переключаться между таблицами стилей для каждой темы. Предполагается, что у вас уже есть полностью готовые таблицы стилей.
К примеру, светлая тема по умолчанию, вроде light-theme.css.
/* light-theme.css */ body < color: #222; background: #fff; >a
Затем создаём стили для тёмной темы и сохраняем их в отдельном файле, который назовём dark-theme.css.
/* dark-theme.css */ body < color: #eee; background: #121212; >body a
Это даёт нам две отдельные таблицы стилей, по одной для каждой темы, на которые можно сослаться в разделе . Давайте сперва сделаем ссылку на светлые стили, поскольку мы называем их стилями по умолчанию.
Мы используем идентификатор #theme-link , который можно выбрать через JavaScript, чтобы снова переключаться между светлым и тёмным режимами. Только на этот раз мы переключаем файлы вместо классов.
// Выбираем кнопку const btn = document.querySelector(".btn-toggle"); // Выбираем таблицу стилей const theme = document.querySelector("#theme-link"); // Отслеживаем щелчок по кнопке btn.addEventListener("click", function() < // Если текущий адрес содержит "light-theme.css" if (theme.getAttribute("href") == "light-theme.css") < // …то переключаемся на "dark-theme.css" theme.href = "dark-theme.css"; // В противном случае… >else < // …переключаемся на "light-theme.css" theme.href = "light-theme.css"; >>);Использование пользовательских свойств
Мы также можем воспользоваться мощью пользовательских свойств CSS для создания тёмной темы! В итоге нам не придётся писать отдельные наборы правил стилей для каждой темы, при этом значительно ускоряется написание стилей и упрощается внесение изменений в тему, если это понадобится.
Мы по-прежнему можем менять класс у и использовать этот класс для повторной установки пользовательских свойств.
// Выбираем кнопку const btn = document.querySelector('.btn-toggle'); // Отслеживаем щелчок по кнопке btn.addEventListener('click', function() < // Затем переключаем (добавляем/удаляем) класс .dark-theme для body document.body.classList.toggle('dark-theme'); >)Сперва определим значения светлых цветов по умолчанию в виде пользовательских свойств для элемента .
body
Теперь мы можем переопределить эти значения для класса .dark-theme , как мы это уже делали в первом методе.
body.dark-theme
body < color: var(--text-color); background: var(--bkg-color); >a
С тем же успехом мы могли бы определить наши пользовательские свойства внутри :root . Это вполне легальная и даже обычная практика. В таком случае все определения стилей темы по умолчанию будут помещены внутрь :root <> , а все свойства темной темы войдут внутрь :root.dark-mode <> .
Использование скриптов на стороне сервера
Если вы уже работали с серверным языком, скажем, PHP, то можете использовать его вместо JavaScript. Это отличный подход, если предпочитаете работать непосредственно с разметкой.
$themeToggle = ($themeClass == 'dark-theme') ? 'light' : 'dark'; ?> "> ">Переключатель тёмной темы Мы можем попросить пользователя отправить запрос GET или POST. Затем позволим нашему коду (в данном случае PHP) применить соответствующий класс к при перезагрузке страницы. В данной демонстрации я использую запрос GET (параметры URL).
И да, мы можем поменять местами таблицы стилей как во втором методе.
$themeToggle = ($themeStyleSheet == 'dark-theme.css') ? 'light' : 'dark'; ?> " rel="stylesheet"> ">Переключатель тёмной темы У этого метода есть очевидный недостаток: необходимо обновить страницу, чтобы переключение сработало. Но подобное серверное решение полезно для сохранения выбранной пользователем темы при перезагрузке страницы, как мы увидим позже.
Какой метод выбрать?
«Правильный» метод зависит от требований вашего проекта. Например, если вы работаете над большим проектом, то можете использовать свойства CSS, которые помогут справиться с большой базой кода. С другой стороны, если ваш проект должен поддерживать устаревшие браузеры, тогда потребуется другой подход.
Кроме того, никто не говорит, что мы можем использовать только один метод. Иногда их сочетание оказывается наиболее эффективным вариантом. Могут быть и другие возможные методы, помимо упомянутых.
Автор: Мохамед Адхухам
Последнее изменение: 07.05.2021
- Переключение темы
- Тёмный режим на уровне ОС
- Сохранение предпочтений пользователя
- Обработка стилей браузера
- Комбинируем всё вместе
- Советы по дизайну
- Тёмный режим в жизни
- Итоги
Как сделать темную тему на сайте?
Чтобы создать темную тему на своем веб-сайте, вам нужно будет выполнить несколько шагов, используя HTML, CSS и, возможно, JavaScript, в зависимости от ваших конкретных потребностей. Вот общий план:
1. Подготовьте структуру HTML: Убедитесь, что ваш HTML-код хорошо структурирован и использует семантические элементы. Это важно для доступности и удобства обслуживания.
2. Создайте стили для темной темы в CSS: Вам нужно создать CSS-стили, которые определяют внешний вид элементов вашего сайта в темной теме. Это включает в себя изменение цветов фона, текста, ссылок, кнопок и других элементов. Пример CSS для темной темы:
«`css
/* Основной фон */
body background-color: #333;
color: #fff;
>
/* Кнопки */
.button background-color: #444;
color: #fff;
>
/* Заголовки */
h1, h2, h3 color: #ffcc00;
>
3. Добавьте переключатель темы: Создайте кнопку или переключатель, который позволит пользователям переключаться между светлой и темной темой. Это можно сделать с использованием HTML и JavaScript:
JavaScript:
«`javascript
const themeSwitch = document.getElementById(«themeSwitch»);
themeSwitch.addEventListener(«change», function() if (this.checked) // Включить темную тему
document.body.classList.add(«dark-theme»);
> else // Включить светлую тему
document.body.classList.remove(«dark-theme»);
>
>);
«`
4. Добавьте дополнительные стили для темной темы: Создайте отдельные CSS-стили для темной темы и активируйте их при переключении темы в JavaScript, как показано выше.
5. Сохраните предпочтения пользователя (опционально): Если вы хотите, чтобы сайт запоминал выбор пользователя и использовал тему, которую он предпочел при предыдущих посещениях, вы можете использовать cookies или localStorage для сохранения настроек темы.
6. Тестирование и улучшение: Убедитесь, что ваш сайт хорошо работает и выглядит как в светлой, так и в темной теме. Проведите тестирование, чтобы убедиться, что он доступен и удобен для использования.
Создание темной темы — это отличный способ улучшить пользовательский опыт и сделать ваш сайт более гибким и удовлетворяющим разнообразным предпочтениям пользователей.
Как сделать темную тему для сайта
Приветствую, друзья, сегодня я покажу как сделать темную тему для сайта. Работать наша темная тема будет с помощью CSS, JS. Так же мы будем сохранять последнюю выбранную тему в LocalStorage, для того, что бы темная тема работала даже после перезагрузки страницы и закрытия браузера. Давайте начнем!
Dark mode tutorial
* < box-sizing: border-box; >body < margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; background: #fff; >.wrapper < max-width: 1400px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap; >.page-title < margin-top: 50px; margin-bottom: 100px; text-align: center; font-size: 46px; color: #222222; >.card < width: 28%; padding: 20px; border-radius: 10px; background: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-bottom: 50px; >.card .title < font-size: 32px; color: #222222; margin-top: 0; margin-bottom: 20px; >.card .text
Добавляем переключатель темной/светлой темы на сайт
Далее реализуем переключатель темной и светлой темы для сайта. Я буду делать это в виде иконок солнца и луны, как и сейчас реализовано это на данном сайте. Так же я присвою иконкам класс, с помощью которого, мы будем определять, что пользователь хочет сменить тему. И так же добавлю аттрибут data-theme с названием темы, которую мы будем применять при клике. Код вы можете посмотреть ниже.
.theme
Подготовим код сайта
Далее нам необходимо создать еще 2 CSS файла. Я назову их theme-light.css и theme-dark.css. После этого, нам нужно вырезать с основного файла со стилями все стили, которые отвечают за те цвета, которые мы хотим менять при смене темы. Вставляем вырезанный код в файлы тем, которые мы только что создали. Теперь меняем цвета по своему усмотрению в зависимости от темы. В моем случае, файлы стилей будут выглядеть вот так:
theme-light.css
body < background: #fff; >.page-title < color: #222222; >.card < background: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.1); >.card .title < color: #222222; >.card .text < color: #222222; >.theme
theme-dark.css
body < background: #222222; >.page-title < color: #ffffff; >.card < background: #222222; box-shadow: 0 0 10px rgba(255,255,255,255.1); >.card .title < color: #ffffff; >.card .text < color: #ffffff; >.theme
Смена на темную тему и обратно при клике
Далее нам необходимо реализовать смену темы сайта при клике. Код достаточно простой, так что я просто размещу его ниже и добавлю комментарии.
let changeThemeButtons = document.querySelectorAll('.changeTheme'); // Помещаем кнопки смены темы в переменную changeThemeButtons.forEach(button => < button.addEventListener('click', function () < // К каждой добавляем обработчик событий на клик let theme = this.dataset.theme; // Помещаем в переменную название темы из атрибута data-theme applyTheme(theme); // Вызываем функцию, которая меняет тему и передаем в нее её название >); >); function applyTheme(themeName) < document.querySelector('[title="theme"]').setAttribute('href', `css/theme-$.css`); // Помещаем путь к файлу темы в пустой link в head changeThemeButtons.forEach(button => < button.style.display = 'block'; // Показываем все кнопки смены темы >); document.querySelector(`[data-theme="$"]`).style.display = 'none'; // Но скрываем кнопку для активной темы >Сейчас у вас уже должна меняться тема при клике. Осталась только одна проблема — при перезапуске страницы выбранная тема не сохраняется. Давайте это исправим!
Сохраняем выбранную тему сайта в браузере
Использовать для этого мы будем LocalStorage. Ниже я размещу весь готовый JavaScript код и добавлю комментарии только к новому функционалу.
let changeThemeButtons = document.querySelectorAll('.changeTheme'); changeThemeButtons.forEach(button => < button.addEventListener('click', function () < let theme = this.dataset.theme; applyTheme(theme); >); >); function applyTheme(themeName) < document.querySelector('[title="theme"]').setAttribute('href', `css/theme-$.css`); changeThemeButtons.forEach(button => < button.style.display = 'block'; >); document.querySelector(`[data-theme="$"]`).style.display = 'none'; localStorage.setItem('theme', themeName); > let activeTheme = localStorage.getItem('theme'); // Проверяем есть ли в LocalStorage записано значение для 'theme' и присваиваем его переменной. if(activeTheme === null || activeTheme === 'light') < // Если значение не записано, или оно равно 'light' - применяем светлую тему applyTheme('light'); >else if (activeTheme === 'dark') < // Если значение равно 'dark' - применяем темную applyTheme('dark'); >На этом все! Но хочу отметить еще один момент. Если у вас при активной темной теме при перезагрузке на доли секунды виден белый задник — ничего страшного. Скорее всего, при загрузке сайта на хостинг проблема исчезнет. И если вы хотите минимизировать шанс возникновения этой проблемы на хостинге, то рекомендую вынести этот JavaScript в отдельный файл и разместить его вместе с элементом . Сверху .
Спасибо, что прочитали! Если у вас остались вопросы, задавайте их в комментариях на YouTube или в нашем Telegram чате .
Так же советую ознакомиться с другими моими статьями:
Семенюк Назарий
Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)
Смена светлой и темной тем сайта на CSS
Светлая и темная темы, как способ реакции интерфейсы на смену дня и ночи придумали для мобильных устройств. Позже подобная практика распространилась и на компьютеры, а сегодня появляется на все большем и большем количестве сайтов.
Давайте посмотрим, как вы можете сделать это на вашем сайте.
Автоматическое переключение
Начнем с ситуации, когда сайт автоматически будет менять тему в зависимости от настроек компьютера (телефона/планшета).
Стили для светлой темы
:root < --var-bgcolor: #fff; --var-fontcolor: #000; >body
Для автоматической смены светлой темы на темную, воспользуемся css-медиафункций prefers-color-scheme , в которой заменим цвета в переменной:
:root < --var-bgcolor: #fff; --var-fontcolor: #000; >@media (prefers-color-scheme: dark) < :root < --var-bgcolor: #333; --var-fontcolor: #eee; >> body
Теперь, каждый раз, когда на устройстве будет меняться цветовая схема, на сайте она также будет изменяться.
Переключение вручную
Для ручного переключения темы необходимо добавить на сайт чекбокс, при активации которого будет включаться темная дема, а при деактивации — светлая. При нажатии на этот чекбокс будет срабатывать javascript-функция changeTheme . В случае если чекбокс активирован, то функция будет добавлять к body новый аттрибут dark . В противном случае этот аттрибут будет удаляться.
Теперь немного изменим css, и сделаем смену значений переменных при наличии аттрибута dark :
:root < --var-bgcolor: #fff; --var-fontcolor: #000; >[dark] < --var-bgcolor: #333; --var-fontcolor: #eee; >body
Как это работает смотрите в видео: