Полное руководство по переключению темного режима с помощью JavaScript
Введение
Темный режим / тема постепенно становится одной из наиболее часто используемых функций на настольных / мобильных устройствах. Если вы находитесь в браузере, на веб-сайте или в любом приложении Android, вы найдете переключатель темного режима в правом углу приложения.
Темный режим обеспечит релаксацию от чрезмерной визуальной стимуляции яркого экрана или более стабильную производственную среду с приложениями на вашем смартфоне или настольном компьютере. В этом руководстве мы покажем вам, как добавить функцию темного режима в ваши веб-приложения с помощью JavaScript, чтобы пользователи могли переключать его в соответствии со своими предпочтениями.
В этом руководстве предполагается, что читатель имеет минимальные знания HTML, CSS и JavaScript. Для более опытных разработчиков пропустите, чтобы выбрать необходимую информацию.
Выполнение
Есть разные способы интеграции этой функции на свои веб-сайты или в мобильные приложения. С щепоткой функций HTML, стилей CSS и JavaScript мы можем реализовать функциональность темного режима. Прежде чем копаться в коде, создайте новый проект с тремя основными файлами, такими как darkMode.html, darkMode.css и darkMode.js. для размещения всех кодов HTML, CSS и JavaScript соответственно.
HTML
Во-первых, давайте напишем HTML-код, необходимый для этого руководства. Для соблюдения стандартов кодирования использование HTML Boilerplate code является обязательным. В файл darkMode.html добавьте следующий код.
Это простой HTML-код, содержащий тег внешнего деления. Внутренний раздел содержит несколько текстов заголовков вместе со значком переключателя. Чтобы значок луны был виден, нам нужно добавить библиотеку font-awesome. Включите комплект в головной раздел веб-страницы. Вместо того, чтобы использовать CSS для внутренних целей, давайте определим его таким образом, чтобы мы могли использовать его для многих HTML-страниц. Мы называем это Внешний CSS. Вы можете изменить внешний вид всего веб-сайта с помощью внешней таблицы стилей, просто изменив один файл.
Добавьте ссылку на таблицу стилей в тег head страницы HTML. Сделайте то же самое с файлом JavaScript. Мы также можем размещать скрипты во внешних файлах. Поместите имя файла сценария в атрибут src (источник) тега script, чтобы использовать внешний сценарий. Это делает ваш код аккуратным и легко читаемым. Убедитесь, что файлы JavaScript и CSS должны иметь расширение .js и .css соответственно.
CSS
Давайте добавим стили CSS на нашу веб-страницу. В файл darkMode.css добавьте следующий код.
После добавления указанного выше кода HTML и CSS ваш результат будет выглядеть примерно так.
С точки зрения дизайна это правильно, но с точки зрения функциональности - нет. Когда вы нажимаете на значок луны, переключение из темного режима в светлый и наоборот не происходит. Потому что мы еще не добавили основную часть функции, а именно JavaScript.
JavaScript
Наконец, давайте добавим несколько функций JavaScript для переключения между темным и светлым режимами. В файл darkMode.js добавьте следующий код.
Когда мы нажимаем на значок луны, приведенный выше код помогает переключиться со светлой темы на темную и наоборот. Как только мы перейдем в световой режим, значок автоматически изменится с солнца на луну. Это поможет пользователям узнать текущий статус страницы, не позволяя им переключаться назад и вперед, чтобы увидеть разницу.
Переключиться со светлой темы на темную довольно просто, нам просто нужно добавить переменную CSS, которая содержит черный цвет фона. В темном режиме мы сделаем цвет текста черно-белым, в светлом режиме. Для этих незначительных корректировок обновите переменные CSS, которые содержат текст, и измените его цвета. Здесь нам нужно соответственно изменить цвета текста h1, h3 и h4. Ниже мы можем увидеть более функциональные результаты перехода между темным и светлым режимами.
Результат также будет отзывчивым, поэтому он будет хорошо смотреться на устройствах любого размера, от смартфонов до настольных компьютеров и больших экранов. Измените размер браузера, чтобы увидеть разницу. Bootstrap CDN (сеть доставки контента) в основном используется для обеспечения быстрого реагирования. Одним из основных преимуществ использования CDN является то, что вам не нужно загружать библиотеки и размещать их самостоятельно. Вы можете расширить его, просто упомянув его в теге head.
Преимущества темного режима
- В то время как темный текст на белом фоне является лучшим с точки зрения читаемости, темный режим, в котором светлый текст отображается на темном фоне, лучше подходит для снижения утомляемости глаз в условиях низкой освещенности. В долгосрочной перспективе темный режим менее вреден для глаз, чем светлый.
- В условиях низкой освещенности темный режим упрощает использование экрана для всех.
- Темный режим экономит энергию, особенно если в компьютере используется OLED- или AMOLED-дисплей.
Готовы показать миру вашу светлую / темную тему
Теперь вы знаете, как с нуля реализовать функцию светлый / темный режим. Независимо от того, размещаете ли вы переключатель на панели навигации, нижнем колонтитуле или в любом месте веб-страницы, убедитесь, что он выделяется среди пользователей. Пользователи должны иметь возможность легко переходить к выбору довольно быстро. Одно из таких мест поместит его с правой стороны панели навигации.
Обычно он не занимает слишком много места, поэтому вы можете раздвинуть его рядом с параметрами на панели навигации. Это по-прежнему хорошее место для начала, даже если в конечном итоге вы не используете те цвета (тему), которые были созданы. Мы все еще можем настроить цвета, которые использовались выше.
Используя это или экспериментируя, чтобы превратить это во что-то новое. Разумеется, реализовать функцию светлого / темного режима на вашем веб-сайте довольно просто, и нет никаких ограничений на то, что вы можете делать с темой темного режима. Введя световой класс, основанный на потребностях пользователей, вы можете еще больше улучшить веб-страницу. Вы также можете использовать локальное хранилище, чтобы сохранить стиль и статус, которые пользователь использовал в приложении.
