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

SQL-Implementierung von LeetCode (197. Steigende Temperatur)

[LeetCode] 197.Steigende Temperatur Schreiben Sie...

Entwicklung eines Miniprogramms zur Implementierung einer einheitlichen Verwaltung von Access_Token

Inhaltsverzeichnis TOKEN Timer-Aktualisierung 2. ...

Vue implementiert Buchverwaltungsfall

In diesem Artikelbeispiel wird der spezifische Co...

HTML (CSS-Stilspezifikation) muss lauten

CSS-Stilspezifikationen 1. Klassenauswahl 2. Tag-...

So beheben Sie den 2002-Fehler bei der Installation einer MySQL-Datenbank in der Alibaba Cloud

Beim Installieren der Datenbank ist folgender Feh...

Detaillierte Erklärung der Verwendung von Refs in den drei Hauptattributen von React

Inhaltsverzeichnis Klassenkomponente Funktionale ...

Beispielcode zur Implementierung der Formularvalidierung mit reinem CSS

In unserem täglichen Geschäft ist die Formularval...

Mehrere gängige Methoden zum Festlegen der Ankerpositionierung in HTML

Mir sind mehrere Möglichkeiten bekannt, die Ankerp...

Schritte für den Exit-Fehlercode des Docker-Containers

Manchmal werden einige Docker-Container nach eine...

Drei Möglichkeiten zum Konfigurieren einer JNDI-Datenquelle in Tomcat

In meiner früheren Arbeit war der Entwicklungsser...

Beispielanalyse von Linux-Benutzer- und Gruppenbefehlen [Wechseln, Hinzufügen von Benutzern, Berechtigungskontrolle usw.]

Dieser Artikel beschreibt die Linux-Benutzer- und...

So bedienen Sie Datei- und Ordnerberechtigungen unter Linux

Linux-Dateiberechtigungen Überprüfen wir zunächst...

Analyse der Gründe, warum das MySQL-Indexsystem den B + -Baum verwendet

Inhaltsverzeichnis 1. Was ist ein Index? 2. Warum...

Eine detaillierte Analyse und Verarbeitung von MySQL-Alarmen

Vor kurzem hat ein Dienst einen Alarm ausgelöst, ...

Vollständige Schritte zur Verwendung von Echarts und Unterverpackungen im WeChat Mini-Programm

Vorwort Obwohl der Feiertag vorbei ist, zeigt er ...