Maison > Article > interface Web > Comment implémenter le mode sombre en HTML
Comment implémenter le mode sombre en HTML
- 王林avant
- 2020-04-05 15:30:473948parcourir
Ce qui suit explique brièvement comment faire en sorte que la page prenne en charge le mode sombre.
Préparation
En fait, nous avons juste besoin d'utiliser la requête multimédia préfère-color-scheme en CSS.
no-preference signifie que l'utilisateur n'a pas spécifié de thème de système d'exploitation. Lorsqu'il est utilisé comme valeur booléenne, false est affiché.
la lumière indique que le système d'exploitation de l'utilisateur a un thème clair.
sombre signifie que le système d'exploitation de l'utilisateur a un thème sombre.
(Tutoriel recommandé : Tutoriel HTML)
Remarque
Lorsque cet article a été publié, WeChat n'a pas pu obtenir le schéma de couleurs préférées paramètre, donc lorsque nous ouvrons la page dans WeChat, le mode sombre n'est actuellement pas pris en charge.
Cette méthode n'est qu'une simple démo, et vous pouvez utiliser cette méthode pour développer d'autres méthodes de mise en œuvre.
préfère-color-schemeDescription
DEMOAdresse
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>页面适应黑暗模式</title>
</head>
<body>
<div><h1>测试文字</h1></div>
</body>
</html>CSS
.back {background: white; color: #555;text-align: center}
@media (prefers-color-scheme: dark) {
.back {background: #333; color: white;}
.models {border:solid 1px #00ff00}
}
@media (prefers-color-scheme: light) {
.back {background: white; color: #555;}
.models {border:solid 1px #2b85e4}
}Tutoriels vidéo associés recommandés : Tutoriel vidéo HTML
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!