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

Ein Beispiel, wie JavaScript doppelte Netzwerkanforderungen verhindern kann

Vorwort Während der Entwicklung stoßen wir häufig...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15

In diesem Artikel werden die Installations- und K...

Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)

Öffnen Sie eine beliebige Webseite, zum Beispiel ...

So ändern Sie MySQL-Berechtigungen, um Hosts den Zugriff zu ermöglichen

Aktivieren Sie Remote-Zugriffsrechte für MySQL My...

Erfahren Sie in einem Artikel, wie Sie mehrere Tomcats bereitstellen und starten und Projekte migrieren

Inhaltsverzeichnis Tomcat bereitstellen 1. Herunt...

Layui table wählt das Optionsfeld der angegebenen Zeile aus und scrollt zum Implementierungscode der Zeile

Die Layui-Tabelle enthält mehrere Datenzeilen. Üb...

Detaillierte Erläuterung von MySQL-Deadlocks sowie Datenbank- und Tabellen-Sharding-Problemen

Notieren Sie die Problempunkte der MySQL-Produkti...

So verwenden Sie die Lotteriekomponente des WeChat Mini-Programms

Es wird in Form von WeChat-Komponenten bereitgest...

MySQL 5.7 MySQL-Befehlszeilenclient - Befehlsdetails

MySQL 5.7 MySQL-Befehlszeilenclient mit Befehlen ...

Detaillierter Prozess der Installation verschiedener Software in Docker unter Windows

1. MySQL installieren # Laden Sie MySQL im Docker...

MySQL-Anweisung zum Abrufen aller Daten oder Monate in einem angegebenen Zeitraum (ohne Festlegen gespeicherter Prozeduren oder Hinzufügen von Tabellen)

mysql ruft alle Daten oder Monate in einem Zeitra...

Verwendung der MySQL-Anweisung „truncate table“

Mit der Anweisung „Truncate table“ werden alle Da...

So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue

1. Dynamische Parameter Ab 2.6.0 können Sie einen...

Lösung für das Problem, dass MySQL zwar bei der Installation in WAMP gestartet werden kann, nach dem Neustart jedoch nicht mehr

Nach der ersten Installation von Wamp können alle...

Detailliertes Beispiel für die Verwendung von MySQL-Triggern

Details zur MySQL-Triggersyntax: Ein Trigger ist ...