HTML에서 다크 모드를 구현하는 방법
- 王林앞으로
- 2020-04-05 15:30:473890검색
페이지에서 다크 모드를 지원하도록 만드는 방법을 간략하게 설명하겠습니다.
준비
실제로 CSS에서 Prefers-Color-Scheme 미디어 쿼리만 사용하면 됩니다.
no-preference는 사용자가 운영 체제 테마를 지정하지 않았음을 의미합니다. Boolean 값으로 사용하면 false가 출력됩니다.
light는 사용자의 운영 체제가 밝은 테마라는 의미입니다.
dark는 사용자의 운영 체제에 어두운 테마가 있음을 의미합니다.
(권장 튜토리얼: html 튜토리얼)
Instructions
이 글이 게시되었을 때 WeChat은 Prefers-color-scheme 매개변수를 얻을 수 없었기 때문에 WeChat에서 페이지를 열 때 현재 다크 모드는 지원되지 않습니다. .
이 방법은 단순한 데모일 뿐이며 이 방법을 사용하여 다른 구현 방법을 확장할 수 있습니다.
prefers-color-schemeInstructions
DEMOAddress
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}
}관련 비디오 튜토리얼 권장 사항: html 비디오 튜토리얼
위 내용은 HTML에서 다크 모드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 jb51.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제