Page d'accueil>Tutoriel de conception de sites Web>Tutoriel HTML

L'implémentation de la page HTML prend en charge le mode sombre

Auteur：Eve Cole Date de mise à jour：2025-04-11 07:16:01

Depuis 2019, les plates-formes Android et iOS ont commencé à jouer au mode sombre. Bien sûr, il n'y a rien de mal à cela, mais lorsque notre page est activée par l'utilisateur en mode sombre, le grand blanc traditionnel sera instantanément aveuglé par les yeux.

Ici, je parlerai brièvement de la façon de faire en sorte que la page prend en charge le mode sombre.

Préparer

En fait, nous avons juste besoin d'utiliser la requête multimédia préférée-colore-scheme dans CSS.

  1. La non-préférence signifie que l'utilisateur n'a pas formulé de thème de système d'exploitation. Lorsqu'il est utilisé comme booléen, la sortie est fausse.
  2. Light signifie que le système d'exploitation de l'utilisateur est un thème de couleur claire.
  3. Dark signifie que le système d'exploitation de l'utilisateur est un thème sombre.
illustrer

  1. Lorsque cet article a été publié, WeChat n'a pas pu obtenir le paramètre Préfers-Color-Scheme, donc lorsque nous ouvrons la page dans WeChat, il ne prend pas actuellement en charge le mode sombre.
  2. Cette méthode n'est qu'une simple démo, et vous pouvez utiliser cette méthode pour développer d'autres implémentations.
  3. Préfère des instructions de schéma
  4. Adresse de démonstration

Html

 <! Doctype html> <html lang = en> <ead> <meta charset = utf-8> <meta name = Viewport contenu = width = device-width, initial-scale = 1.0, minimum-échelle = 1.0, mode maximum = title> Class = Modèles> <h1> Test Text </H1> </div> </ Body> </HTML>

CSS

 .back {fond: blanc; Couleur: # 555; Text-Align: Center} @media (préfère-Color-Scheme: Dark) {.Back {Background: # 333; Couleur: blanc;} .models {border: solide 1px # 00ff00}} @ media (préfers-Color-Scheme: Light) {.Back {Background: White; Couleur: # 555;} .Models {Border: Solid 1Px # 2B85E4}}

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.

Articles connexes