Главная страница>Учебник по веб-дизайну>Учебник по HTML

Реализация страницы HTML поддерживает режим Dark

Автор：Eve Cole Время обновления：2025-04-11 07:16:01

С 2019 года платформы Android и iOS начали играть в Dark Mode. Конечно, в этом нет ничего плохого, но когда наша страница включена пользователем в темном режиме, традиционный большой белый будет мгновенно ослеплен глазами.

Здесь я кратко расскажу о том, как сделать страницу поддержать Dark Mode.

Подготовить

На самом деле, нам просто нужно использовать медиа-запрос Preferreds-Color-Scheme в CSS.

  1. Без предпочтений означает, что пользователь не сформулировал тему операционной системы. При использовании в качестве логического, выход неверно.
  2. Свет означает, что операционная система пользователя является легкой темой.
  3. Темная означает, что операционная система пользователя является темной темой.
иллюстрировать

  1. Когда эта статья была опубликована, WeChat не смог получить параметр Prefers-Color-Scheme, поэтому, когда мы открываем страницу в WeChat, в настоящее время он не поддерживает Dark Mode.
  2. Этот метод является просто простой демонстрацией, и вы можете использовать этот метод для расширения других реализаций.
  3. Предпочитает инструкции по цвету
  4. Демо -адрес

HTML

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no> <title>Page adapts to dark mode</title></head><body class=back><div class=models><h1>Test Текст </h1> </div> </body> </html>

CSS

 .BACK {фон: белый; Цвет: #555; Text-Align: Center} @Media (предпочитает-то-схема: темный) {.BACK {фон: #333; Color: White;} .Models {Border: Solid 1px #00ff00}}@media (предпочитает-color-scheme: light) {.back {founal: white; Цвет: #555;} .Models {Border: Solid 1px #2b85e4}}

Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.

Связанные статьи