현시점으로 많은 기기에는 다크 모드 기능이 많이 적용되어 있습니다. 다크 모드가 적용된 인터페이스는 어두운 환경에서 사용하였을 때 눈의 피로를 줄여주고, 시력을 조금이나마 보호할 수 있습니다. 이번 시간에는 간단한 코드를 추가함으로, 다크 모드를 감지하고 그에 따라 웹 페이지의 CSS를 변경하는 방법에 대해 자세히 알아보겠습니다.
JS
아래 코드를 JS 파일이나, HTML 파일에 붙여넣으세요.
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches
console.log(prefersDark);CSS
아래 코드 수정하여 CSS 파일이나, HTML 파일에 붙여넣으세요.
@media (prefers-color-scheme: dark) {
/* 다크 모드에 사용 할 CSS를 입력하세요. */
}예시로 확인하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기기의 다크모드 감지하기</title>
<script>
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches
console.log(prefersDark);
</script>
<style>
body {
background-color: #ffffff;
}
h1 {
color: #000000;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #000000;
}
h1 {
color: #ffffff;
}
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
반응형
'IT' 카테고리의 다른 글
| 프리미어 프로에서, 영상에 블러 효과 적용하기 (2) | 2020.03.02 |
|---|---|
| 폰폰(fonfon)으로 심리테스트하기 (0) | 2020.02.29 |
| 롤 청약철회 한 번 더 얻는 방법 (0) | 2020.02.13 |
| 영문 유료 폰트 추천 - Proxima Nova [Adobe Fonts] (0) | 2020.02.07 |
| 터미널 Login incorrect 오류 해결하기 (0) | 2020.01.28 |