HTML-Seite unterstützt die Implementierung des Dunkelmodus

HTML-Seite unterstützt die Implementierung des Dunkelmodus

Seit 2019 verwenden sowohl Android- als auch iOS-Plattformen den Dunkelmodus. Daran ist natürlich nichts auszusetzen, aber wenn der Benutzer unsere Seite im Dunkelmodus öffnet, wird er sofort von der herkömmlichen weißen Farbe geblendet.

Im Folgenden wird kurz erläutert, wie die Seite den Dunkelmodus unterstützt.

Vorbereiten

Tatsächlich müssen wir nur die Medienabfrage „prefers-color-scheme“ in CSS verwenden.

  1. „no-preference“ bedeutet, dass der Benutzer kein Betriebssystemdesign angegeben hat. Als Boolescher Wert wird false ausgegeben.
  2. Licht zeigt an, dass das Betriebssystem des Benutzers ein helles Design verwendet.
  3. „dunkel“ zeigt an, dass das Betriebssystem des Benutzers ein dunkles Design hat.

veranschaulichen

  1. Zum Zeitpunkt dieses Artikels konnte WeChat den Parameter „prefers-color-scheme“ nicht abrufen. Wenn wir also die Seite in WeChat öffnen, wird der Dunkelmodus derzeit nicht unterstützt.
  2. Diese Methode ist nur eine einfache Demo und Sie können diese Methode verwenden, um andere Implementierungsmethoden zu erweitern.
  3. bevorzugtes Farbschema Beschreibung
  4. DEMO-Adresse

HTML

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
  <meta name="viewport" content="Breite=Gerätebreite, Anfangsmaßstab=1,0, Mindestmaßstab=1,0, Höchstmaßstab=1,0, benutzerdefiniert skalierbar=nein">
    <title>Seite an Dunkelmodus anpassen</title>
</Kopf>
<body class="zurück">
<div class="models"><h1>Testtext</h1></div>
</body>
</html>

CSS

.back {Hintergrund: weiß; Farbe: #555;Textausrichtung: zentriert}

@media (bevorzugtes Farbschema: dunkel) {
  .back {Hintergrund: #333; Farbe: weiß;}
  .models {border:solid 1px #00ff00}
}

@media (bevorzugtes Farbschema: hell) {
  .back {Hintergrund: weiß; Farbe: #555;}
  .models {border:solid 1px #2b85e4}
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  MySQL verwendet benutzerdefinierte Sequenzen zur Implementierung von row_number-Funktionen (detaillierte Schritte)

>>:  Verwenden des CSS-Loaders zum Implementieren des CSS-Moduls in Vue-CLI

Artikel empfehlen

JS erkennt den Fall der Eliminierung von Sternen

In diesem Artikelbeispiel wird der spezifische JS...

Der Quellcode zeigt, warum Vue2 Daten und Methoden direkt abrufen kann

Inhaltsverzeichnis 1. Beispiel: Hiermit können Da...

HTML-Tabellen-Markup-Tutorial (43): VALIGN-Attribut der Tabellenüberschrift

In vertikaler Richtung können Sie die Ausrichtung...

Docker-Netzwerkmodus und Konfigurationsmethode

1. Docker-Netzwerkmodus Wenn Docker Run einen Doc...

MySQL-Datenbankbeschränkungen und Prinzipien des Datentabellenentwurfs

Inhaltsverzeichnis 1. Datenbankbeschränkungen 1.1...

So erstellen Sie schnell MySQL Master-Slave mit mysqlreplicate

Einführung Das mysql-utilities-Toolset ist eine S...

Eine kurze Analyse der zugrunde liegenden Prinzipien von MySQL-Transaktionen und Isolationsebenen

Inhaltsverzeichnis Vorwort 1. Kurze Analyse der z...

Zusammenfassung der zwölf Methoden der Vue-Wertübertragung

Inhaltsverzeichnis 1. Vom Vater zum Sohn 2. Vom S...

Detaillierte Erklärung der grundlegenden HTML-Tags und -Strukturen

1. HTML-Übersicht 1.HTML: Hypertext Markup Langua...

Interpretation von syslogd- und syslog.conf-Dateien unter Linux

1: Einführung in syslog.conf Für verschiedene Uni...

So installieren Sie suPHP für PHP5 auf CentOS 7 (Peng Ge)

Standardmäßig wird PHP unter CentOS 7 als Apache ...

Detaillierte Erläuterung der Ausführung von SQL-Anweisungen (Übersicht über die MySQL-Architektur -> Abfrageausführungsprozess -> SQL-Analysereihenfolge)

Vorwort: Ich wollte schon immer wissen, wie eine ...

Detaillierte Erklärung der Grundkonzepte von HTML

Was ist HTML? HTML ist eine Sprache zur Beschreib...

Einführung in die Anwendung der HTML-Tags superscript sup und subscript sub

HTML-Tag: hochgestellt In HTML definiert das <s...

Detailliertes Tutorial zur Installation von Docker und Nvidia-Docker unter Ubuntu 16.04

Inhaltsverzeichnis Docker-Installation Nvidia-Doc...