Как сделать темную тему на сайте

Как лучше сделать темную/светлую тему для сайта?

Привет друзья, у меня такой вопрос.. перед очередным проектом передо мной стал вопрос сделать темную тему для сайта. Искал множество решений в интернете, но так нечего и не нашел. Прошу вашей помощи.. необходимо сделать кнопку которая меняла бы файл стилей по клику к примеру

на

А главное что бы скрипт сохранял изменения в localStorage. Что бы при перезагрузки страницы у пользователя сохранялась тема которую он выбрал. Подскажите пожалуйста.. увы знаний по js еще не набрался.. Спасибо!

• Вопрос задан более двух лет назад
• 2190 просмотров

3 комментария

Простой 3 комментария

iBird Rose @iiiBird Куратор тега CSS
по правильному это нужно делать через css переменные https://habr.com/ru/post/466587/

valgerofficial @valgerofficial Автор вопроса
iBird Rose, Не все браузеры поддерживают данные фичи, я поэтому и хочу через jquery это сделать

Ilya Olovyannikov @cannibal_corpse
valgerofficial, 95% браузеров поддерживают. Вариант с CSS custom properties лучший на данный момент.
Решения вопроса 2
Так можно изменить ссылку на стиль

     Сменить цвет   

Но лучше использовать селекторы чтобы менять стиль. И использовать один css файл

 body < background: #fff; color: #000; >#color < color: #fff; background: #000; >.dark < background: #000; color: #fff; >.dark #color Сменить цвет  

Ответ написан более двух лет назад
Комментировать
Нравится 2 Комментировать

IT куратор

Всё гораздо проще. Современные браузеры понимают вот такую прелесть

Дальше можно пойти вот так.
Как определить тему на устройстве?
Мы в проектах делаем вот так. Определяем тему, и записываем куки.

var toggleSwitch = $('[data-theme="toggle"]'); // Получение значения куки var currentTheme = Cookies.get('theme'); // Если значение undefined (т.е. пользователь первый раз на сайте или не выбрал явно тему) if (typeof (currentTheme) === 'undefined') < // Проверяем тему ос, если она темная, то дописываем значение dark if (window.matchMedia('(prefers-color-scheme: dark)').matches) < Cookies.set('theme', 'dark'); // Присваиваем значение переменной - dark currentTheme = 'dark'; >> if (currentTheme === 'dark')

Ответ написан более двух лет назад
Нравится 1 2 комментария
jquery? надо б помечать

Переписал на чистый JS:

const dataTheme = document.querySelector('[data-theme="toggle"]'); let colorTheme = document.querySelector('meta[name="theme-color"]'); let backcolorTheme = document.querySelector('meta[name="background_color"]'); let html = document.querySelector('html'); function toggleLigt(color, theme ) < html.setAttribute('data-theme', theme); colorTheme.setAttribute('content',color); backcolorTheme.setAttribute('content',color); >// Если значение undefined (т.е. пользователь первый раз на сайте или не выбрал явно тему) if (typeof (currentTheme) === 'undefined') < // Проверяем тему ос, если она темная, то дописываем значение dark if (window.matchMedia('(prefers-color-scheme: dark)').matches) < toggleLigt('#0D0D0D', 'dark'); >> if (currentTheme === 'dark') < dataTheme.setAttribute('checked', 'checked'); toggleLigt('#0D0D0D', currentTheme); >dataTheme.addEventListener('change', function(event) < if (event.target.getAttribute('checked')) < event.target.removeAttribute('checked'); toggleLigt('#FFF', 'light'); >else < event.target.setAttribute('checked', 'checked'); toggleLigt('#0D0D0D', 'dark'); >>);

Ответы на вопрос 3

Лучше сделать цвета переменными, а потом просто меня цвета переменных, если используете препроцессор, посмотрите примеры в интернете

Ответ написан более двух лет назад

Антон Литвиненко @AntonLitvinenko
это как вы интересно на проде используя препроцессор меняете переменные?
Юзаете миксины, js-ом меняете классы
MentozZz ORG @Gor_Ohanyan
Лучше не париться и поставить вот такой вот модуль

  ;(function()) () //-->  

Который все сам делает
Вот их официальный сайт Dark.Онлайн.Net

Ответ написан более двух лет назад

;(function()) () //--> 

Я создал 2 файла css: base1 и base2(где белая и чёрная тема, соответственно), в них хранились переменные, при чём с одинаковым названием, но разным значением в зависимости от файла.
В main.js добавил функцию по импортированию первого или второго файла css в зависимости от значения переменной theme(dark-theme или light-theme) в локальном хранилище таким образом:

if (localstorage.theme === "dark-theme") < import(путь к файлу) >else

Дальше в файле, в моём случае это был компонент vue, добавлял слушатель событий по нажатию на иконку, в этом слушателе я устанавливал при помощи localstorage.setItem() тему в зависимости от иконки(солнца/луна), релоудил страницу и вызывал функцию из main.js, которую предворительно импортировал в мой компонент. Надесь было полезным 🙂

Как добавить смену темы (светлая/темная) на сайте

Узнайте, как добавить смену темы (светлая/темная) на ваш сайт с помощью CSS переменных, медиа-запросов и JavaScript в нашей подробной статье!

Алексей Кодов
Автор статьи
1 июня 2023 в 15:29

Смена темы на сайте становится все более популярным трендом, особенно с учетом того, что большинство операционных систем и браузеров уже поддерживает темную тему. В этой статье мы рассмотрим, как добавить смену темы (светлая/темная) на ваш сайт.

1. Создание CSS переменных

Для начала, нам нужно определить основные цвета нашего сайта с использованием CSS переменных. Это позволит нам легко переключаться между светлой и темной темами, меняя только значения переменных.

:root < --background-color: #ffffff; --text-color: #000000; --accent-color: #007bff; >body < background-color: var(--background-color); color: var(--text-color); >a

2. Создание темной темы

Теперь создадим темную тему, изменив значения переменных. Для этого используем медиа-запрос prefers-color-scheme , который позволяет определить предпочтения пользователя относительно темы.

@media (prefers-color-scheme: dark) < :root < --background-color: #222222; --text-color: #ffffff; --accent-color: #00a7ff; >>

Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

3. Добавление переключателя темы

Добавим переключатель темы на наш сайт, чтобы пользователи могли самостоятельно выбирать между светлой и темной темами. Создадим кнопку и добавим обработчик события для переключения темы.

Сменить тему 

document.getElementById('theme-toggle').addEventListener('click', function () < document.body.classList.toggle('dark-theme'); >);

Теперь добавим CSS для переключения темы с использованием класса dark-theme , который мы добавляем к body .

body.dark-theme

�� Теперь у вас есть сайт с поддержкой смены темы! Пользователи могут выбирать между светлой и темной темами, а также сайт будет автоматически переключаться на темную тему, если это предпочтение установлено в настройках операционной системы.

Не забудьте продолжать изучать веб-разработку и углублять свои знания! Вам может быть полезна наша школа по веб-разработке. Удачи!

Темная тема на сайте: инструкция по применению

Вслед за Apple и Google многие компании начали добавлять в свои приложения и на сайты темную тему. Она помогает брендам выделиться, а еще бережет зрение пользователей. В преимуществах и недостатках тренда разбирались эксперты digital-агентства Uplab

Фото: Shutterstock

Темная тема, или Dark Mode, служит дополнительным режимом к светлому или любому другому, стоящему по умолчанию. Если ее включить, то большая часть пользовательского интерфейса будет окрашена в темные оттенки. Этот режим стал популярным, после того как его начали применять сначала Apple, а потом и Google. Dark Mode важно отличать от дизайна в темных тонах. Последний отображает темный фон независимо от настроек интерфейса, тогда как тему можно переключить.

Плюсы и недостатки темных тем

Темные темы в дизайне сайтов и приложений сегодня широко распространены по нескольким причинам.

1. Такой режим выглядит привлекательно и может подчеркнуть преимущества вашего продукта еще больше, если сочетать его с яркими иллюстрациями и графичными формами. Этот подход актуален для сферы технологий, а также бизнесов, связанных с продажей люксовых товаров, например автомобилей или селективной парфюмерии. Темная тема добавит премиальности и вызовет у потребителей чувство принадлежности к элитарной культуре.

2. Другой очевидный плюс — забота о пользователе. Оформление интерфейса с использованием темного режима снижает зрительное напряжение и сухость глаз, особенно при длительной работе с экраном.

Переключение темы

Типичный сценарий: у сайта уже есть светлая тема и вы хотите создать её тёмный аналог. Или, даже если вы начинаете с нуля, у вас уже есть обе темы: светлая и тёмная. Одна тема должна быть определена как тема по умолчанию, которую пользователи получают при первом посещении — в большинстве случаев это светлая тема (хотя мы можем позволить браузеру пользователя сделать этот выбор за нас, как вы увидите дальше). Также должен быть способ переключиться на другую тему (что можно сделать автоматически, как вы тоже увидите) — например, пользователь щёлкает по кнопке и цветовая тема меняется. Для этого существует несколько подходов.

Использование класса для

Хитрость заключается в замене класса, который будет указателем для изменения стиля на всей странице.

Это пример скрипта для кнопки, переключающей данный класс.

// Выбираем кнопку 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

• Переключение темы
• Тёмный режим на уровне ОС
• Сохранение предпочтений пользователя
• Обработка стилей браузера
• Комбинируем всё вместе
• Советы по дизайну
• Тёмный режим в жизни
• Итоги