Переменная CSS реализует темный режим, страница моего магазина уже поддерживает его

CSS
Переменная CSS реализует темный режим, страница моего магазина уже поддерживает его

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

я на странице своего блогамой магазинПрактикуйте страницуCSS变量а также@media查询Реализовать темный режим.

CSS Dark Mode

Я определил переменные для установки цвета темы, я рекомендую вам сделать то же самое, так как это сделает процесс намного проще. Цветовые переменные для моего режима по умолчанию следующие:

:root {
  --accent: #226997;
  --main: #333;
  --light: #666;
  --lighter: #f3f3f3;
  --border: #e6e6e6;
  --bg: #ffffff;
}

Если вы хотите использовать эти переменные в своей таблице стилей, вы можете сделать это:

p {
  color: var(--main);
}

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

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

/* 定义 dark 模式的颜色 */
:root {
  --accent: #3493d1;
  --main: #f3f3f3;
  --light: #ececec;
  --lighter: #666;
  --border: #e6e6e6;
  --bg: #333333;
}

Добавьте темную поддержку

Теперь, когда мы определили два набора переменных, осталось толькоpreferences -color-schemeдобавить медиа-запросы в нашdarkв переменной.

Возьмите переменную темного цвета и добавьте ниже@media 查询:

/* 定义 dark 模式的颜色 */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3493d1;
    --main: #f3f3f3;
    --light: #ececec;
    --lighter: #666;
    --border: #e6e6e6;
    --bg: #333333;
  }
}

Вот и все! Если кто-то использует темную тему ОС и посещает ваш сайт, ваш сайт автоматически переключится в темный режим.

и моеМаленькая кодовая страницаПоддерживается как ручное переключение, так и автоматическое переключение, темный стиль тоже отличается.

тестовое задание

Я уверен, что вы захотите проверить эффективность изменений. Для этого вы можете просто включить темную тему в операционных системах, например темную тему iOS.

В качестве альтернативы, если вы не хотите тратить время на тему своей ОС, вы можете принудительно запустить этот тест в Firefox. Методы, как показано ниже:

  1. Откройте Firefox и введите в адресную строкуabout:config, затем нажмите Enter.

  2. Вас попросят пойти на риск и принять его.

  3. В строке поиска найдитеui.systemUsesDarkTheme.

  4. Измените флажок наnumberи нажмите+символ.

  5. изменить значение на1и нажмите кнопку с галочкой.

  6. Теперь страница должна быть черной.

  7. Вернитесь на свой сайт, и тема должна автоматически обновиться до темного режима.

  8. Если вы хотите проверить, переключается ли он обратно, измените значение на0.

  9. Когда вы закончите тестирование, нажмите на корзину, чтобы удалить опцию.

Теперь у вас должен быть веб-сайт, который реагирует не только с точки зрения мобильного интерфейса, но и с точки зрения тем. Я уверен, что ваши ночные посетители или те, кто просто любит сайты с темной тематикой, будут вам благодарны.

Ссылка на исходный текст:Доступно в Зоне V.UK/how-to-add-…

переводить:Dunizb

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

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

Категории