Дизайнер пользовательского интерфейса в Берлине. Я также являюсь дизайнером взаимодействия, дизайнером пользовательского опыта, дизайнером продуктов, иммигрантом, пограничным тысячелетием, пограничным кейсом, папой.
Добавление темного режима — это, по сути, добавление темы. Принципы одинаковы для добавления светлого режима к темному веб-сайту или альтернативного стиля на основе пользовательских переменных, времени года или праздников.
Я добавил темы со смесью Javascript и CSS. В этом посте я шаг за шагом расскажу о том, как я это сделал и чему научился.
Установка
Темы активируются классами CSS в корневом элементе, . Когда страница загружена, я хочу применить тему, которая наиболее подходит посетителю (вам!) Лучше всего. В конце концов, большинству людей не нравится настраивать веб-сайты до того, как они смогут прочитать сообщение в блоге, поэтому вся функция создания тем, скорее всего, останется неиспользованной. Поэтому я должен сделать предположение о том, что посетитель хочет и ожидает. Я делаю это в следующем порядке:
- Я предполагаю, что люди не хотят, чтобы тема менялась при переходе между страницами. Поэтому, если загруженная страница — не первая, которую они посещают, я хочу использовать тему, которая использовалась ранее.
- Если это первая страница, которую они просматривают на моем сайте, их браузер может определить их предпочтения.
- Если предпочтения нет, мы можем основывать выбор на основании того, день это или ночь.
Я также хочу реагировать на изменения:
- Когда тема изменяется в одной вкладке браузера, все остальные вкладки с веб-сайтом должны меняться вместе с ней
- Когда посетители меняют свою ОС со светлой на темную или наоборот, веб-сайт должен реагировать на это.
Превращение этой логики в Javascript:
1
2
3
4
5
6
7
8
9
( функция initializeTheme () {
syncBetweenTabs ()
listenToOSChanges ()
enableTheme (
returnThemeBasedOnLocalStorage () ||
returnThemeBasedOnOS () ||
returnThemeBasedOnTime (),
ложно )
} ())
Конечно, посетители должны иметь возможность вручную выбрать тему, если я угадаю неправильно. Наконец, я добавил переход, когда тема меняется. Это также делается с помощью класса CSS, добавленного к корневому элементу.
Это базовая настройка, теперь давайте углубимся в детали!
Состояние сохранения и загрузки
Когда посетитель переходит со страницы на страницу, тема не должна меняться. Поэтому я сохраняю состояние выбранной темы, чтобы ее можно было загрузить на следующей странице. Рассмотрев некоторые альтернативы (см. Ниже), я попал на сохранение выбранной темы в локальном хранилище.
Каждый раз, когда страница загружается, в текущей или новой вкладке, она проверяет, была ли тема установлена ранее. Поскольку предпочтения для светлой или темной темы могут изменяться в течение дня, при каждом изменении я добавляю отметку времени к сохраненной настройке. Только когда состояние было сохранено менее двух часов назад, оно применяется:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function returnThemeBasedOnLocalStorage () {
const pref = localStorage . getItem [1945934] 'предпочтения-тема' )
const lastChanged = localStorage . getItem предпочтение-тематический последнее изменение " )
пусть сейчас = новый Дата ()
сейчас = сейчас . getTime ()
const минутПройдено = ( в настоящее время -
Пожалуйста, поставьте рейтинг статье:
(Пока оценок нет)
Загрузка...Связанные записи
