Página Inicial>Tutorial de web design>Tutorial HTML

A implementação da página HTML suporta o Modo Dark

Autor：Eve Cole Data da Última Atualização：2025-04-11 07:16:01

Desde 2019, as plataformas Android e iOS começaram a tocar o Modo Dark. Obviamente, não há nada de errado nisso, mas quando nossa página é ativada pelo usuário no modo escuro, o Big Branco tradicional será instantaneamente cego pelos olhos.

Aqui vou falar brevemente sobre como fazer a página suportar o modo escuro.

Preparar

Na verdade, precisamos apenas usar a consulta de mídia preferida-cor-scheme no CSS.

  1. A não preferência significa que o usuário não formulou um tema do sistema operacional. Quando usado como booleano, a saída é falsa.
  2. A luz significa que o sistema operacional do usuário é um tema de cor clara.
  3. Dark significa que o sistema operacional do usuário é um tema sombrio.
ilustrar

  1. Quando este artigo foi publicado, o WeChat não conseguiu o parâmetro Prefere-Color-Scheme; portanto, quando abrimos a página no WeChat, atualmente não suporta o Modo Dark.
  2. Este método é apenas uma demonstração simples e você pode usar esse método para expandir outras implementações.
  3. Prefere instruções do esquema-colorido
  4. Endereço de demonstração

Html

 <! Doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = ViewPort Content = width = Width, escala inicial = 1,0, Minimum-Scale = 1.0, escala máxima = 1.0, scalable/número <timbody> <tits> ADAPTS para o Modo de Blood <spage para escura < Class = Models> <H1> Texto de teste </h1> </div> </body> </html>

CSS

 .back {Background: White; Cor: #555; Text-Align: Center} @media (Prefere-Color-Scheme: Dark) {.back {Background: #333; Cor: White;} .Models {Border: Solid 1PX #00FF00}}@Media (Prefere-color-scheme: Light) {.back {Background: White; Cor: #555;} .Models {Border: Solid 1px #2B85E4}}

O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.

Artigos Relacionados