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

 
Dark Mode 
 

Читайте также:

• Показать/скрыть текст. Примеры на JS, CSS
• Параллакс-эффект JS: подборка плагинов
• Модальное окно с подтверждением возраста на jQuery
• Рандомные всплывающие окна
• Как сделать параллакс эффект: анимация элементов при скроллинге
• Tippy.js – универсальный плагин всплывающих подсказок
• Анимация элементов при прокрутке страницы. JS-плагины
• Плагин Lightbox (увеличение изображения) на чистом JavaScript. Адаптивный
• Адаптивное многоуровневое меню на jQuery с набором полезных параметров
• JQuery. Полноэкранная прокрутка (скроллинг)

Как сделать темную тему с помощью CSS

На днях я баловался с темной версией в новой версии MacOS Mojave. Мои глаза не на 100% рады, но это особенно полезно, когда залипаешь в экран ночью при тусклом освещении.

Сегодня, темная тема в тренде. Большинство reader-приложений уже снабжены им (Medium App, Twitter …). Темная тема — это не просто инверсия всех цветов, это целое направление в современном дизайне.

Ещё не везде стемнело (пока)

Когда работаешь в ночной теме, вспышки света, при открытии документа с белым фоном, немного шокируют. В этом посте мы разберёмся, как применять темную тему в Интернете и пропишем для этого CSS.

Разберёмся с пользовательскими настройками ночного режима.

Было бы приятно, если бы, документы и сайты соответствовали текущей теме, не так ли?

Автоматическое преобразование цвета?

Safari и Firefox уже имеют «режим чтения» с поддержкой светлого текста на тёмном фоне. В этом случае, контент в теге , отображается с использованием специальных стилей, которые улучшают читаемость и удаляют лишнее. А также, есть настройка для инвертирования цветов. Более того, браузеры, могут автоматически инвертировать сайты, с помощью смарт-стилей. Звучит жутковато! Впрочем, Apple Mail уже так делает. Он даже инвертирует цвета для HTML писем.

«Умное-инвертирование» цвета может стать отличным решением, а может и нет. Что ещё?

Медиа запросы в помощь.

Я не один. В настоящее время (Август 2018) ведутся дискуссии по поводу ночной темы в «CSS Working Group Editor Drafts». Идея в том, чтобы использовать для этого медиа-запросы. Кое-что уже реализовано в Safari (обсуждение), и ещё здесь.

Так что, в теории, можно сделать так:

@media (prefers-dark-interface)

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

Инверсия, это ещё не темная тема.

А вы знали, что, уже есть фича в медиа-запросах для «inverted-colors», в Media Queries Level 4. Это, и темная тема― не одно и тоже. Что-то вроде темной темы существовало и ранее. Например, в Windows уже есть режим High Contrast. Есть и другие примеры.

И всё же, было бы действительно круто, если авторы сайтов смогут сами решать, что делать, когда пользователь включил темную тему в браузере. Так что, у дизайнера будет полный контроль, над внешним видом сайта с «выключенным светом». Думаете, тут много роботы? Нет, это просто. Читайте дальше.

Инкогнито — это не темная тема

Когда открываешь окно в режиме Инкогнито, для приватного просмотра, многие браузеры предоставляют тёмную версию, чтобы подчеркнуть разницу. Но, это все равно не темная тема.

Используем CSS переменные для создания темной темы

Благодаря «CSS custom properties» (также известные как «CSS Vars») теперь, мы можем проще, чем когда-либо, создавать темы, используя CSS. Самый простой способ инвертировать тему:

root: --text-color: DarkBlue; 
--back-color: Azure;
>body @media (prefers-dark-interface) root: --text-color: Azure; 
--back-color: DarkBlue; 
> 
>

Немного рекламы: мой новый (крутой) CSS фреймворк ― Teutonic CSS, уже умеет делать подобную инверсию:

Веб-сайты меняют браузер chrome.

Эта статья о том, как настройки пользователя могут изменить внешний вид сайта. Однако, это работает и в обратную сторону: веб-сайт может изменить внешний вид браузера. Существуют проприетарные мета-теги, доступные до сих пор только для мобильных браузеров:

Заключение

В стандартах хорошо то, что у вас всегда есть выбор.

В то время как «ночной режим», безусловно, тренд — существует целое множество его вариаций. Не молчите, говорите об этом, чтобы в итоге был создан единый веб-стандарт. Продвигайте свой CSS, чтобы поддержать эту идею и избежать хаоса в будущем.

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

как сделать темную/светлую тему на сайте с переключателем, и чтобы после обновления страницы, тема сохранялась?

Отслеживать
задан 14 мар в 17:39
Аббос Ибодуллаев Аббос Ибодуллаев
Сохранять выбор пользователя в localStorage
14 мар в 17:46
я просто не оч шарю может кто то мог бы поделиться кодом или еще что то
14 мар в 17:52
Выбирайте любую ссылку: Make white/dark theme localStorage
14 мар в 17:55

0

Сортировка: Сброс на вариант по умолчанию

Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как добавить темную тему на свой сайт с помощью CSS и JavaScript

С помощью CSS очень легко добавить темную тему для существующих веб-сайтов. В этом руководстве мы собираемся сделать это, используя переменные в CSS.

У нас будет 3 разных варианта темы — Auto (Авто), Light (Светлая) и Dark (Темная). Темы Light и Dark говорят сами за себя, но тема Auto будет использовать настройку темы операционной системы, чтобы решить, будет ли сайт светлым или темным.

Я не буду показывать вам, как создать этот конкретный макет или включить его в наш контент, вот пример того, что мы могли бы создать:

Добавление HTML

Начнем с HTML, мы можем представить атрибуте value в теге option как об идентификаторе для каждой темы:

 Auto Light Dark 

Добавление CSS

Давайте теперь добавим немного CSS к тегу body, здесь вы указываете свои цвета для Light темы с помощью CSS-переменных:

body

Затем вы можете использовать свои CSS-переменные во всей таблице стилей — это ключ к тому, как наше решение будет работать. Например, вы можете сделать:

.main-content < background: var(--background-color); color: var(--text-color); >button

Мы собираемся реализовать темную тему, просто заменив значения объявленных выше переменных в тех случаях, когда мы собираемся использовать темную тему. Добавим этот CSS код:

:root < --dark-background-color: #111111; --dark-text-color: #eeeeee; >body.theme-dark

Теперь, если вы добавите класс theme-dark к своему элементу, вы увидите, что темная тема работает. Вскоре мы будем использовать JavaScript для переключения этого значения, но давайте сейчас реализуем нашу опцию Auto:

@media (prefers-color-scheme: dark) < body.theme-auto < --background-color: var(--dark-background-color); --text-color: var(--dark-text-color); >>

Вышеупомянутый CSS использует Media Queries, который проверяет, предпочитает ли операционная система темную тему, и если да, мы хотим применить вложенный набор правил для body.theme-auto .

По сути, мы говорим: «Предпочитает ли операционная система темный режим и есть ли у нее класс theme-auto? Если да, давайте использовать темный режим».

Попробуйте, изменив цвет темы своей ОС, или, что еще лучше, просмотрите веб-сайт на своем телефоне с включенным темным режимом.

Добавление JavaScript

Теперь, когда наш CSS работает, мы можем перейти к работе раскрывающегося списка выбора темы. Добавим следующий JavaScript:

function applyTheme(theme) < document.body.classList.remove("theme-auto", "theme-light", "theme-dark"); document.body.classList.add(`theme-$`); > document.addEventListener("DOMContentLoaded", () => < document.querySelector("#theme").addEventListener("change", function() < applyTheme(this.value); >); >);

Здесь мы ждем, пока DOM будет готов, чтобы мы могли начать его использовать, и как только он будет готов, мы ожидаем, когда пользователь выбирает вариант в раскрывающемся списке выбора темы. После того, как пользователь изменит тему, мы удалим все существующие классы тем из (если есть), а затем просто добавим выбранную тему с помощью this.value .

Запоминание темы

Мы могли бы пойти дальше и дать браузеру возможность запоминать тему, выбранную при обновлении страницы. Для этого мы можем использовать Local Storage

Давайте добавим следующий JavaScript код, чтобы в итоге получилось следующее: