홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

HTML 페이지의 구현은 Dark Mode를 지원합니다

저자：Eve Cole 업데이트 시간：2025-04-11 07:16:01

2019 년부터 Android 및 iOS 플랫폼 모두 Dark Mode를 재생하기 시작했습니다. 물론, 이것에는 아무런 문제가 없지만, 어두운 모드로 사용자가 우리 페이지를 켜면 전통적인 큰 흰색은 즉시 눈으로 눈을 멀게 할 것입니다.

여기서는 페이지를 어두운 모드로 지원하는 방법에 대해 간단히 이야기하겠습니다.

준비하다

실제로, 우리는 CSS에서 preferreds-color-scheme 미디어 쿼리를 사용하면됩니다.

  1. 예비 회의는 사용자가 운영 체제 테마를 공식화하지 않았 음을 의미합니다. 부울로 사용하면 출력이 거짓입니다.
  2. 빛은 사용자의 운영 체제가 빛의 색상 테마임을 의미합니다.
  3. Dark는 사용자의 운영 체제가 어두운 테마임을 의미합니다.
설명

  1. 이 기사가 게시되면 WeChat은 Prefers Color-Scheme 매개 변수를 얻을 수 없었으므로 WeChat에서 페이지를 열면 현재 Dark Mode를 지원하지 않습니다.
  2. 이 방법은 단순한 데모 일 뿐이며이 방법을 사용하여 다른 구현에서 확장 할 수 있습니다.
  3. 컬러 체계 지침을 선호합니다
  4. 데모 주소

HTML

 <! docType html> <html lang = en> <head> <meta charset = utf-8> <meta name = meta name = viewport content = width = device-width, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no> <title> </title> </head> </head> 클래스 = 모델> <h1> 테스트 텍스트 </h1> </div> </body> </html>

CSS

 .BACKE {배경 : 흰색; 색상 : #555; Text-Align : Center} @Media (Prefers-Color-Scheme : Dark) {.BACKE {배경 : #333; 색상 : 흰색;}. 모들 {테두리 : Solid 1PX #00ff00}}@Media (선호하는 색상의 체계 : light) {.BACKE {background : white; 색상 : #555;}. 모델 {테두리 : Solid 1PX #2B85E4}}}

위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.

관련 기사