Как внедрить темный режим в PWA без фреймворка? - PullRequest
Новая
       61

Как внедрить темный режим в PWA без фреймворка?

0 голосов
/ 27 октября 2019

Я создаю PWA для iOS и Android и не использую фреймворк (это очень простое приложение, и размер приложения - большая проблема). Я хочу реализовать темный режим, чтобы, когда пользователь переключает свое устройство в темный режим, тема приложения тоже изменяла темноту. Как мне это сделать?

Я отвечаю на свой вопрос - это чтобы помочь другим с такой же проблемой!

1 Ответ

0 голосов
/ 27 октября 2019

Я застрял на этом некоторое время и думаю, что нашел хорошее решение. Ранее я использовал платформу ionic 4, и их документы содержат интересную страницу о добавлении темного режима в PWA. Ссылка здесь

В нем говорится о CSS-селекторе, который может определять, когда устройство пользователя работает в темном режиме, и соответственно изменять стили элементов. Из документов:

Первый способ включить темный режим - использовать медиазапрос CSS для предпочтительной цветовой схемы пользователя. Этот медиазапрос подключается к системным настройкам устройства пользователя и применяет тему, если включен темный режим. 

@media (prefers-color-scheme: dark) {
  :root {
    /* dark mode variables go here */
  }
}

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

/* Fallback for older browsers or manual mode */
body.dark {
  /* Dark mode variables go here */
}

Я проверял это в моем PWA на iOS 13 и iPadOS, и они оба, кажется, работают, когда яизменить мое устройство в темный режим. Я не уверен насчет Android, но я ожидаю, что результат будет таким же.

Стоит также отметить, что вы можете включить настройки темного режима вашего приложения, хотя приложение (т.е. имеет настройку в вашем приложении, поэтомуваше приложение может быть темным, даже если устройство не). demo ниже на странице документации это прекрасно демонстрирует.

Надеюсь, это поможет вам начать работу в темном режиме!

...