Startseite>Webdesign-Tutorial>HTML-Tutorial

Die Implementierung der HTML -Seite unterstützt den Dunklen Modus

Autor：Eve Cole Aktualisierungszeit：2025-04-11 07:16:01

Seit 2019 haben sowohl Android- als auch iOS -Plattformen begonnen, den Dark -Modus zu spielen. Natürlich ist daran nichts auszusetzen, aber wenn unsere Seite vom Benutzer im dunklen Modus eingeschaltet wird, wird das traditionelle große Weiß sofort von den Augen geblendet.

Hier werde ich kurz darüber sprechen, wie die Seite den Dunklen Modus unterstützt.

Vorbereiten

Tatsächlich müssen wir nur die Medienabfrage für bevorzugte Medien in CSS verwenden.

  1. No-Preference bedeutet, dass der Benutzer kein Betriebssystemthema formuliert hat. Wenn sie als Booleschen verwendet werden, ist die Ausgabe falsch.
  2. Licht bedeutet, dass das Betriebssystem des Benutzers ein helles Thema ist.
  3. Dunkel bedeutet, dass das Betriebssystem des Benutzers ein dunkles Thema ist.
veranschaulichen

  1. Als dieser Artikel veröffentlicht wurde, konnte WeChat den Parameter für den Vorrangsfarben nicht erhalten. Wenn wir die Seite in WeChat öffnen, unterstützt er den Dunklen Modus derzeit nicht.
  2. Diese Methode ist nur eine einfache Demo, und Sie können diese Methode verwenden, um andere Implementierungen zu erweitern.
  3. bevorzugt Anweisungen für Farben
  4. Demo -Adresse

Html

 <! DocType html> <html Lang = en> <pepe> <meta charset = utf-8> <meta name = viewPort content = width = Geräte-Breite, initiale scale = 1,0, minimal scale = 1,0, maximal scale = 1,0, user-scalable = no> <title> page adapts dem dunklen modus adapts dem dunklen modus adapts an dunkle modus </title> </title> </head> <- class = models> <h1> Testtext </h1> </div> </body> </html>

CSS

 .Back {Hintergrund: weiß; Farbe: #555; Text-Align: Center} @Media (bevorzugt Farben-Scheme: dunkel) {.back {Hintergrund: #333; Farbe: White;} .models {Border: Solid 1px #00ff00}}@media (bevorzugt die Farbton-Scheme: Licht) {.back {Hintergrund: White; Farbe: #555;} .models {Border: Solid 1PX #2B85E4}}

Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.

Ähnliche Artikel