Переключение между светлой и темной темами никогда не было таким простым
Мы прошли полный круг с темным режимом. Из темного режима в светлый и обратно в темный режим. На заре персональных компьютеров темный режим был единственным вариантом. Монохромные компьютерные мониторы с ЭЛТ работали, направляя электронные лучи на фосфоресцирующий экран. Люминофор, используемый в первых ЭЛТ, был зеленым, в результате текст отображался зеленым цветом, а остальная часть экрана была черной. Эти модели часто называли зелеными экранами.
С последующим внедрением цветных ЭЛТ стало возможным отображение множества цветов за счет использования красного, зеленого и синего люминофоров. Белый цвет был создан путем одновременной активации всех трех люминофоров. Теперь мы снова вернулись к темным темам, так как они приятнее для глаз и, субъективно, более эстетичны.
Я большой поклонник веб-компонентов и мне нравится, как они делают веб-разработку компонентно-ориентированной. Давайте создадим переключатель темной и светлой тем, используя только веб-компоненты.
«Будущее за компонентно-ориентированным программированием». - Индрек Ласн
Веб-компоненты - это набор различных технологий, которые позволяют создавать повторно используемые настраиваемые элементы - с их функциональностью, инкапсулированной отдельно от остальной части вашего кода - и использовать их в ваших веб-приложениях. Если вы не уверены в веб-компонентах, ознакомьтесь с Краткими сведениями о компонентах W eb.
Начиная
Все, что нам нужно, это веб-браузер и текстовый редактор. Идите вперед и создайте файл index.html. Если вы используете emmet, вы можете просто ввести ! и нажать Tab. Это даст вам шаблонный код index.html.
<dark-mode-toggle> Элемент
Благодаря открытому исходному коду у нас уже есть удобный компонент, созданный для наших нужд. Он называется dark-mode-toggle - мы можем либо включить компонент через CDN, либо установить его как пакет NPM.
Следующий компонент представляет собой настраиваемый элемент, который позволяет вам легко установить переключатель Темный режим 🌒 на вашем сайте, чтобы вы могли изначально придерживаться предпочтений своих пользователей в соответствии с prefers-color-scheme, но также разрешить им (необязательно навсегда) переопределить свои системные настройки только для вашего сайта.
Функция prefers-color-scheme мультимедиа используется для определения того, запрашивал ли пользователь на странице светлую или темную цветовую тему. Он имеет следующие три значения.
no-preference: Указывает, что пользователь не указал браузеру никаких предпочтений. Значение этого ключевого слова оценивается какfalseв логическом контексте.light: указывает, что пользователь уведомил браузер о том, что он предпочитает страницу со светлой темой (темный текст на светлом фоне).dark: указывает, что пользователь уведомил браузер о том, что он предпочитает страницу с темной темой (светлый текст на темном фоне).
Поместите следующий код в раздел <head> index.html:
Пользовательский элемент предполагает, что вы организовали свой CSS в разных файлах, которые загружаются условно на основе атрибута media в соответствующем элементе link таблицы стилей. Следующие таблицы стилей имеют имена common.css, light.css и dark.css - обратите внимание, что каждая тема имеет свои собственные инкапсулированные стили. Идите вперед и создайте три таблицы стилей.
touch common.css light.css dark.css
Это отличный образец производительности, поскольку вы не заставляете людей загружать CSS, который им не нужен, исходя из их текущих предпочтений темы, но несовпадающие таблицы стилей все равно загружаются, но не конкурируют за пропускную способность на критическом пути рендеринга. .
Затем добавьте элемент <dark-mode-toggle> к нашему index.html
Пока мы там, давайте также добавим немного контента. В конце концов, мы хотим увидеть и проверить свои результаты. Вот как сейчас выглядит наш index.html:
И наконец, нам нужно объявить стили для нашей светлой и темной темы. Возьмите стили из фрагментов кода ниже.
common.css
Эти стили повторно используются между темной и светлой темами.
Обратите внимание на свойство color-scheme. Свойство color-scheme все еще находится в разработке и, возможно, еще не полностью поддерживается. Полная поддержка Chrome появится в конце 2019 года.
dark.css
Это стили для нашей темной темы.
light.css
И, наконец, стили для светлой темы.
Откройте в браузере файл index.html. Вы можете открыть его локально или запустить быстрый HTTP-сервер. В моем случае я просто открою его с помощью встроенного сервера Python.
$ python -m SimpleHTTPServer
Теперь, если мы откроем наш браузер и введем localhost:8000 - мы должны увидеть следующее:
Идите вперед и нажмите кнопки переключения тем в правом верхнем углу.
Потрясающие! Работает как часы. Вы можете найти все изображения из репозитория GitHub здесь.
Если вы новичок в JavaScript и хотите выучить язык, я рекомендую начать с чтения книг в сочетании с созданием вещей. Начните с книги « Более разумный способ изучения JavaScript » и вот список интересных приложений для создания.
Спасибо за чтение, надеюсь, вы кое-что узнали. Оставайся классным!
