Как сделать темную тему css
Как сделать темную тему с помощью CSS
Oct 3, 2018 · 4 min read
На днях я баловался с темной версией в новой версии MacOS Mojave. Мои глаза не на 100% рады, но это особенно полезно, когда залипаешь в экран ночью при тусклом освещении.
Сегодня, темная тема в тренде. Большинство reader-приложений уже снабжены им (Medium App, Twitter …). Темная тема — это не просто инверсия всех цветов, это целое направление в современном дизайне.
Ещё не везде стемнело (пока)
Когда работаешь в ночной теме, вспышки света, при открытии документа с белым фоном, немного шокируют. В этом посте мы разберёмся, как применять темную тему в Интернете и пропишем для этого CSS.
Разберёмся с пользовательскими настройками ночного режима.
Было бы пр и ятно, если бы, документы и сайты соответствовали текущей теме, не так ли?
Автоматическое преобразование цвета?
«Умное-инвертирование» цвета может стать отличным решением, а может и нет. Что ещё?
Медиа запросы в помощь.
Я не один. В настоящее время (Август 2018) ведутся дискуссии по поводу ночной темы в «CSS Working Group Editor Drafts». Идея в том, чтобы использовать для этого медиа-запросы. Кое-что уже реализовано в Safari (обсуждение), и ещё здесь.
Так что, в теории, можно сделать так:
Давайте подождём, пока все браузеры будут готовы к этому. Я думаю, что есть возможность прийти к определенной стандартизации. Производителям ОС также нужно будет прийти к определенным соглашениям.
Инверсия, это ещё не темная тема.
А вы знали, что, уже есть фича в медиа-запросах для «inverted-colors», в Media Queries Level 4. Это, и темная тема― не одно и тоже. Что-то вроде темной темы существовало и ранее. Например, в Windows уже есть режим High Contrast. Есть и другие примеры.
И всё же, было бы действительно круто, если авторы сайтов смогут сами решать, что делать, когда пользователь включил темную тему в браузере. Так что, у дизайнера будет полный контроль, над внешним видом сайта с «выключенным светом». Думаете, тут много роботы? Нет, это просто. Читайте дальше.
Инкогнито — это не темная тема
Когда открываешь окно в режиме Инкогнито, для приватного просмотра, многие браузеры предоставляют тёмную версию, чтобы подчеркнуть разницу. Но, это все равно не темная тема.
Используем CSS переменные для создания темной темы
Благодаря «CSS custom properties» (также известные как «CSS Vars») теперь, мы можем проще, чем когда-либо, создавать темы, используя CSS. Самый простой способ инвертировать тему:
Немного рекламы: мой новый (крутой) CSS фреймворк ― Teutonic CSS, уже умеет делать подобную инверсию:
Веб-сайты меняют браузер chrome.
Эта статья о том, как настройки пользователя могут изменить внешний вид сайта. Однако, это работает и в обратную сторону: веб-сайт может изменить внешний вид браузера. Существуют проприетарные мета-теги, доступные до сих пор только для мобильных браузеров:
Заключение
В стандартах хорошо то, что у вас всегда есть выбор.
В то время как «ночной режим», безусловно, тренд — существует целое множество его вариаций. Не молчите, говорите об этом, чтобы в итоге был создан единый веб-стандарт. Продвигайте свой CSS, чтобы поддержать эту идею и избежать хаоса в будущем.
Переключение темы
Типичный сценарий: у сайта уже есть светлая тема и вы хотите создать её тёмный аналог. Или, даже если вы начинаете с нуля, у вас уже есть обе темы: светлая и тёмная. Одна тема должна быть определена как тема по умолчанию, которую пользователи получают при первом посещении — в большинстве случаев это светлая тема (хотя мы можем позволить браузеру пользователя сделать этот выбор за нас, как вы увидите дальше). Также должен быть способ переключиться на другую тему (что можно сделать автоматически, как вы тоже увидите) — например, пользователь щёлкает по кнопке и цветовая тема меняется. Для этого существует несколько подходов.
Использование класса для
Хитрость заключается в замене класса, который будет указателем для изменения стиля на всей странице.
Это пример скрипта для кнопки, переключающей данный класс.
Вот как мы можем использовать эту идею.
Довольно неплохо. Теперь у нас есть тёмный текст (#222) и тёмные ссылки (#0033cc) на светлом фоне (#fff). Начало нашей темы «по умолчанию» положено.
Теперь переопределим значения этих свойств, но в этот раз для другого класса.
Вот полный рабочий код в действии. Пощёлкайте по кнопке для переключения на тёмный режим и выхода из него.
Использование разных таблиц стилей
Вместо хранения всех стилей в одном месте, мы можем переключаться между таблицами стилей для каждой темы. Предполагается, что у вас уже есть полностью готовые таблицы стилей.
К примеру, светлая тема по умолчанию, вроде light-theme.css.
Затем создаём стили для тёмной темы и сохраняем их в отдельном файле, который назовём dark-theme.css.
Использование пользовательских свойств
Мы также можем воспользоваться мощью пользовательских свойств CSS для создания тёмной темы! В итоге нам не придётся писать отдельные наборы правил стилей для каждой темы, при этом значительно ускоряется написание стилей и упрощается внесение изменений в тему, если это понадобится.
Мы по-прежнему можем менять класс у и использовать этот класс для повторной установки пользовательских свойств.
Использование скриптов на стороне сервера
Если вы уже работали с серверным языком, скажем, PHP, то можете использовать его вместо JavaScript. Это отличный подход, если предпочитаете работать непосредственно с разметкой.
Мы можем попросить пользователя отправить запрос GET или POST. Затем позволим нашему коду (в данном случае PHP) применить соответствующий класс к при перезагрузке страницы. В данной демонстрации я использую запрос GET (параметры URL).
И да, мы можем поменять местами таблицы стилей как во втором методе.
У этого метода есть очевидный недостаток: необходимо обновить страницу, чтобы переключение сработало. Но подобное серверное решение полезно для сохранения выбранной пользователем темы при перезагрузке страницы, как мы увидим позже.
Какой метод выбрать?
«Правильный» метод зависит от требований вашего проекта. Например, если вы работаете над большим проектом, то можете использовать свойства CSS, которые помогут справиться с большой базой кода. С другой стороны, если ваш проект должен поддерживать устаревшие браузеры, тогда потребуется другой подход.
Кроме того, никто не говорит, что мы можем использовать только один метод. Иногда их сочетание оказывается наиболее эффективным вариантом. Могут быть и другие возможные методы, помимо упомянутых.
Быстрый и легкий темный режим с пользовательскими свойствами CSS
Дата публикации: 2020-03-05
От автора: добавление поддержки «темного режима» на веб-сайта или в приложение становится все более популярным среди разработчиков. Предоставление пользователям возможности выбора темной темы может быть полезным для доступности, так как некоторые люди испытывают головные боли или визуальные затруднения из-за слишком ярких экранов, или же испытывают затруднения при длительном чтении на светлом фоне.
Медиа-запросы
Благодаря спецификации Media Queries уровня 5 реализация стилей темного режима для пользователей, предпочитающих его, относительно проста. Используя медиа-запрос prefers-colour-scheme, мы можем указать, как веб-сайт должен выглядеть для пользователей, которые выбрали в системных настройках предпочтение темной цветовой схемы:
В качестве альтернативы мы могли бы пойти другим путем и реализовать стили темного режима по умолчанию, а затем переопределить их для пользователей, которые специально выбрали схему светлого цвета или у которых нет предпочтений.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Очевидно, что вам все еще придется столкнуться с проблемой написания стилей CSS! Недавно я решил реализовать тёмный режим на этом сайте, и благодаря пользовательским свойствам CSS я смог сделать это довольно быстро и безболезненно.
Передача переменных SCSS в пользовательские свойства
Первым шагом к реализации темного режима было изменение кода для использования пользовательских свойств для любых цветов вместо переменных Sass. Как ни странно, это была самая сложная часть, поскольку она требует переименования переменных — причины скоро станут вам понятны! Рефакторинг основного или фирменного цвета довольно прост:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
У меня есть три основных цвета фона, поэтому я остановился на следующем:
Это максимизирует возможность повторного использования переменных, в то же время сохраняя интуитивность того, что они представляют.
Переопределение переменных для темного режима
После этого все, что мне нужно было сделать, это переопределить переменные для схемы темного цвета. Некоторые переменные, такие как фон заголовка и цвет —primary, вообще не нуждаются в изменении, а остальная цветовая палитра довольно ограничена. Поэтому у меня было только несколько пользовательских свойств, которые нужно было обновить для темной темы:
Это фактически весь код, необходимый для реализации темной темы! Чтобы проверить тему, я могу зайти в настройки системы и изменить настройки цвета на «темные». На Mac они задаются в Системные настройки> Общие> Внешний вид.
Следующие шаги
Прямо сейчас пользователи сайта получат темную тему, если установили в системных настройках внешний вид «темный», но они не смогут изменить это — по крайней мере, не возвращаясь к системным настройкам, что крайне непрактично. Это не идеально, поскольку некоторые пользователи могут предпочесть темный режим в целом, но для определенного веб-сайта они предпочитают светлую цветовую схему. Очевидно, что предоставление пользователям выбора является предпочтительным решением.
Энди Белл написал отличную статью о том, как добавить переключатель, который позволяет пользователю выбирать предпочитаемую цветовую схему, используя localStorage для сохранения предпочтений. Это то, что я хотел бы реализовать в скором времени.
Автор: Michelle Barker
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как сделать темную тему для сайта
Приветствую, друзья, сегодня я покажу как сделать темную тему для сайта. Работать наша темная тема будет с помощью CSS, JS. Так же мы будем сохранять последнюю выбранную тему в LocalStorage, для того, что бы темная тема работала даже после перезагрузки страницы и закрытия браузера. Давайте начнем!
Подготовка сайта
Для примера я создал очень простую страничку, где есть заголовок и несколько карточек. Скриншот того, как она выглядит и код вы можете найти ниже.
Добавляем переключатель темной/светлой темы на сайт
Далее реализуем переключатель темной и светлой темы для сайта. Я буду делать это в виде иконок солнца и луны, как и сейчас реализовано это на данном сайте. Так же я присвою иконкам класс, с помощью которого, мы будем определять, что пользователь хочет сменить тему. И так же добавлю аттрибут data-theme с названием темы, которую мы будем применять при клике. Код вы можете посмотреть ниже.
Подготовим код сайта
Далее нам необходимо создать еще 2 CSS файла. Я назову их theme-light.css и theme-dark.css. После этого, нам нужно вырезать с основного файла со стилями все стили, которые отвечают за те цвета, которые мы хотим менять при смене темы. Вставляем вырезанный код в файлы тем, которые мы только что создали. Теперь меняем цвета по своему усмотрению в зависимости от темы. В моем случае, файлы стилей будут выглядеть вот так:
theme-light.css
theme-dark.css
Смена на темную тему и обратно при клике
Далее нам необходимо реализовать смену темы сайта при клике. Код достаточно простой, так что я просто размещу его ниже и добавлю комментарии.
Сейчас у вас уже должна меняться тема при клике. Осталась только одна проблема — при перезапуске страницы выбранная тема не сохраняется. Давайте это исправим!
Сохраняем выбранную тему сайта в браузере
Использовать для этого мы будем LocalStorage. Ниже я размещу весь готовый JavaScript код и добавлю комментарии только к новому функционалу.
На этом все! Но хочу отметить еще один момент. Если у вас при активной темной теме при перезагрузке на доли секунды виден белый задник — ничего страшного. Скорее всего, при загрузке сайта на хостинг проблема исчезнет. И если вы хотите минимизировать шанс возникновения этой проблемы на хостинге, то рекомендую вынести этот JavaScript в отдельный файл и разместить его вместе с элементом