La implementación de la página HTML admite el modo oscuro

Desde 2019, las plataformas Android e iOS han comenzado a reproducir el modo oscuro. Por supuesto, no hay nada de malo en esto, pero cuando el usuario enciende nuestra página en modo oscuro, los ojos tradicionales Big White serán cegados instantáneamente por los ojos.

Aquí hablaré brevemente sobre cómo hacer que la página admite el modo oscuro.

De hecho, solo necesitamos usar la consulta de medios de esquema preferido-color en CSS.

1. Sin preferencia significa que el usuario no ha formulado un tema del sistema operativo. Cuando se usa como booleano, la salida es falsa.
2. La luz significa que el sistema operativo del usuario es un tema de color ligero.
3. Dark significa que el sistema operativo del usuario es un tema oscuro.

1. Cuando se publicó este artículo, WeChat no pudo obtener el parámetro Prefers-Color-Scheme, por lo que cuando abrimos la página en WeChat, actualmente no es compatible con el modo oscuro.
2. Este método es solo una demostración simple, y puede usar este método para ampliar otras implementaciones.
3. Prefiere las instrucciones de color-esquema
4. Dirección de demostración

Html

 < class = Models> <h1> Test Text </h1> </div> </body> </html>

CSS

 .back {fondo: blanco; Color: #555; Text-Align: Center} @Media (prefers-color-scheme: dark) {.back {fondo: #333; color: blanco;} .models {borde: sólido 1px #00ff00}}@media (prefers-color-scheme: light) {.back {fondo: blanco; Color: #555;} .models {borde: sólido 1px #2b85e4}}

Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.