Как сделать темную тему html
Переключение темы
Типичный сценарий: у сайта уже есть светлая тема и вы хотите создать её тёмный аналог. Или, даже если вы начинаете с нуля, у вас уже есть обе темы: светлая и тёмная. Одна тема должна быть определена как тема по умолчанию, которую пользователи получают при первом посещении — в большинстве случаев это светлая тема (хотя мы можем позволить браузеру пользователя сделать этот выбор за нас, как вы увидите дальше). Также должен быть способ переключиться на другую тему (что можно сделать автоматически, как вы тоже увидите) — например, пользователь щёлкает по кнопке и цветовая тема меняется. Для этого существует несколько подходов.
Использование класса для
Хитрость заключается в замене класса, который будет указателем для изменения стиля на всей странице.
Это пример скрипта для кнопки, переключающей данный класс.
Вот как мы можем использовать эту идею.
Довольно неплохо. Теперь у нас есть тёмный текст (#222) и тёмные ссылки (#0033cc) на светлом фоне (#fff). Начало нашей темы «по умолчанию» положено.
Теперь переопределим значения этих свойств, но в этот раз для другого класса.
Вот полный рабочий код в действии. Пощёлкайте по кнопке для переключения на тёмный режим и выхода из него.
Использование разных таблиц стилей
Вместо хранения всех стилей в одном месте, мы можем переключаться между таблицами стилей для каждой темы. Предполагается, что у вас уже есть полностью готовые таблицы стилей.
К примеру, светлая тема по умолчанию, вроде light-theme.css.
Затем создаём стили для тёмной темы и сохраняем их в отдельном файле, который назовём dark-theme.css.
Использование пользовательских свойств
Мы также можем воспользоваться мощью пользовательских свойств CSS для создания тёмной темы! В итоге нам не придётся писать отдельные наборы правил стилей для каждой темы, при этом значительно ускоряется написание стилей и упрощается внесение изменений в тему, если это понадобится.
Мы по-прежнему можем менять класс у и использовать этот класс для повторной установки пользовательских свойств.
Использование скриптов на стороне сервера
Если вы уже работали с серверным языком, скажем, PHP, то можете использовать его вместо JavaScript. Это отличный подход, если предпочитаете работать непосредственно с разметкой.
Мы можем попросить пользователя отправить запрос GET или POST. Затем позволим нашему коду (в данном случае PHP) применить соответствующий класс к при перезагрузке страницы. В данной демонстрации я использую запрос GET (параметры URL).
И да, мы можем поменять местами таблицы стилей как во втором методе.
У этого метода есть очевидный недостаток: необходимо обновить страницу, чтобы переключение сработало. Но подобное серверное решение полезно для сохранения выбранной пользователем темы при перезагрузке страницы, как мы увидим позже.
Какой метод выбрать?
«Правильный» метод зависит от требований вашего проекта. Например, если вы работаете над большим проектом, то можете использовать свойства CSS, которые помогут справиться с большой базой кода. С другой стороны, если ваш проект должен поддерживать устаревшие браузеры, тогда потребуется другой подход.
Кроме того, никто не говорит, что мы можем использовать только один метод. Иногда их сочетание оказывается наиболее эффективным вариантом. Могут быть и другие возможные методы, помимо упомянутых.
Переключатель темы
В разработке веб-интерфейсов моя мантра звучит так: «не получается сделать эффективно, не делай вовсе». Это я проповедовал в Европе, Англии, Китае — пишите меньше чертова кода. Если нововведение влечет снижение производительности, совокупный эффект от него будет отрицательным, и от такого стоит отказаться вовсе. Настолько скорость критически важна для веба.
Предложить пользователю выбор из разных видов интерфейса — дружественное решение, если реализовано ненавязчиво. Оно соответствует одному из принципов инклюзивного дизайна — принципу выбора. Приятно управлять, скажем, темой сайта. Однако помните — такие фичи это приятное дополнение и вводить их имеет смысл только при условии их эффективности.
Как правило, темы реализовывают через альтернативные таблицы стилей, переключение на которые происходит с помощью JavaScript. В некоторых случаях такой подход сомнителен с точки зрения эффективности (нужно загружать много дополнительного CSS-кода), в других—ставит вопрос поддержки (альтернативный CSS нуждается в изменении вместе с основным при развитии проекта).
Один из действительно полезных типов тем — менее яркий «ночной» режим. Он не просто облегчает нагрузку на глаза при чтении в темноте, но и снижает вероятность мигрени и других расстройств, связанных с чувствительностью к свету. Я сам страдаю от мигрени, это действительно важно!
C filter одна проблема: он инвертирует только явно указанные цвета. Поэтому, если элемент не имеет фонового цвета, то цвет текста изменится, а вот фон останется прежним (белым). Результат? Светлый текст на белом фоне.
Не трогаем растровые картинки
При весе в 153 байта (без сжатия), наша ночная тема в общем-то делает всё, что нужно. Для сомневающихся — подборка того, как приём работает на популярных новостных сайтах.
CSS Quickies: CSS-переменные — или как легко создать «светлую / темную» тему
Дата публикации: 2019-10-07
От автора: что такое CSS Quickes? Я спросил в своем любимом сообществе в Instagram: «Какие свойства CSS сбивают вас с толку?» В «CSS Quickies» я подробно объясняю одно свойство CSS. Это свойства, которые просят пояснить члены.
Давайте поговорим о Пользовательских свойствах, также известных как Переменные CSS. В заключение! Работали вы когда-нибудь с CSS и хотели сохранить свой дизайн согласованным? Или было больше похоже на то, что на некоторых страницах ваш сайт имел различный отступ, поля или цвета?
Может быть, вы хотели реализовать темную тему? Это было возможно и раньше, но теперь это стало проще! Конечно, если вы использовали LESS или SASS, тогда вы имели там переменные, и теперь они наконец-то поддерживаются нативно. Давайте начнем!
Определение переменной CSS
Вы определяете переменную CSS с префиксом свойства CSS с помощью —. Давайте посмотрим на некоторые примеры.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Ваш первый вопрос: «Что это за псевдо-класс?». Хороший вопрос! Псевдо-класс :root это то, как вы бы использовали селектор html, за исключением того, что специфичность псевдо-класса :root выше. Это означает, что если вы установите свойства для псевдо-класса :root, они переопределят селектор html.
Ладно, все остальное довольно просто. Пользовательское свойство —example-color имеет значение #ccc. Когда мы используем пользовательское свойство, например, для свойства background-color, фон этого элемента будет светло-серым. Круто верно?
Вы можете назначить пользовательское свойство, то есть переменную CSS, каждому значению, которое вы можете задать для любого другого свойства в CSS. Вы можете использовать left, например, 10px и так далее.
Использование переменных CSS
Теперь, когда мы знаем, как устанавливать переменные CSS, нам нужно научиться их использовать! Для этого нам нужно изучить функцию var(). Она принимает два аргумента. Первый аргумент должен быть пользовательским свойством. Если пользовательское свойство недопустимо, вам нужно задать резервное значение. Для этого вам просто нужно установить второй аргумент функции var(). Давайте рассмотрим пример.
Продвинутая CSS-темизация: динамические темы с помощью переменных и JavaScript
Дата публикации: 2018-09-21
От автора: в этом руководстве по тому, как создаются в CSS темы, мы будем использовать пользовательские свойства (также известные как переменные CSS) для реализации динамических тем простой HTML-страницы. Мы создадим темные и светлые варианты тем, затем напишем JavaScript, чтобы переключаться между ними, когда пользователь нажимает кнопку.
Как и в обычных языках программирования, переменные используются для хранения значений. В CSS они обычно используются для хранения цветов, названий шрифтов, размеров шрифтов, единиц и т. д. Затем на них можно ссылать и повторно использовать в нескольких местах в таблице стилей. Большинство разработчиков используют термин «переменные CSS», но официальное название — это пользовательские свойства.
Пользовательские свойства CSS позволяют изменять переменные, на которые можно ссылаться в таблице стилей. Раньше это было возможно только с помощью препроцессоров CSS, таких как Sass.
:root и var()
Прежде чем создать наш пример динамической темы, давайте разберемся с основами пользовательских свойств. Пользовательское свойство — это свойство, имя которого начинается с двух дефисов (—), например, —foo. Они определяют переменные, на которые можно ссылаться, используя var(). Рассмотрим этот пример:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
3 безумно простых способа переключить сайт в темный режим
Дата публикации: 2020-05-25
От автора: как однажды сказал печально известный Дарт Вейдер: «Ты не знаешь силы Темной стороны». 2019 год вдохнул жизнь в слова Вейдера, когда темный режим захватил наши приложения, и им все стали повально увлекаться. От Instagram до Youtube, наши любимые приложения запрыгнули на подножку, и уже не далек день триумфа Ситхов.
Что такое темный режим?
Для тех, кто любит технический жаргон, Википедия определяет темный режим как «цветовую схему, которая использует светлый текст, иконки и элементы графического интерфейса пользователя на темном фоне».
Проще говоря, темный режим, как следует из названия: более темный тематический интерфейс для приложений. Тем не менее, это больше, чем готическая фишка.
Почему темный режим так популярен?
Кому не нравится высокий темный незнакомец. У темного режима есть определенное харизматичное чувство эстетической привлекательности.
Для поколения, которое проводит больше времени перед экранами, чем с людьми, темный режим обеспечивает минимальную нагрузку на глаза. Да благословит Бог ваши глаза!
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Это помогает поддерживать циркадный ритм пользователей.
Наконец, он меньше разряжает батареи. И это неплохо, не так ли!
Как можно переключить сайт в темный режим?
Давайте рассмотрим три простых способа реализации темного режима для веб-сайтов.
1. Проверьте настройки уровня ОС
В первую очередь нужно проверить параметры операционной системы. Например, Whatsapp в определенных версиях Android давал пользователям возможность переключаться в ночной режим, тогда как темный режим iOS был установлен по умолчанию на их устройствах для приложения. Это следует учитывать перед добавлением кодов для той же цели. Код для реализации темной темы показан ниже как CSS, так и JS.
Использование CSS
Код, если требуется JS определение:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
2. Выбор темы в зависимости от времени суток.
В эпоху юзабилити, темный режим полный рабочий день не может быть жизнеспособным вариантом. Чувствительность вашего веб-сайта было бы значительно увеличена благодаря использованию темы, отражающей время суток. Таким образом, вы позаботитесь и о ранних пташках, и о совах! Разумно поддерживать это естественное равновесие. Следующий код хорош для начала.
3. Пусть посетители вручную выбирают тему
Как гласит старая пословица «На вкус и цвет товарищей нет». Не всем будет удобно с темной темой, и будет полезно, если вы включите опцию для переключения между ними. Представьте себе тяжелое положение гиперметропического человека, просматривающего ваш сайт в ночном режиме.
Следующий виджет является рабочим примером:
Поддержка браузерами
Мы все с этим сталкиваемся. Проблемы совместимости, возникающие при открытии вложений, которые были созданы и изменены в архаичных версиях. То же самое относится и к приведенным выше кодам, поскольку они могут не работать в определенных версиях браузеров. В следующей таблице приведена схема совместимости.
Темный режим останется на долго, ну, по крайней мере, пока джедаи не восстанут с новым форматом. Три метода, упомянутые выше, определенно могут повысить привлекательность вашего сайта. До тех пор, да пребудет с вами Сила!
Автор: Vishnu Baliga
Источник: //dev.to
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Верстка. Быстрый старт
Практический курс по верстке адаптивного сайта с нуля!