출처 바로가기

const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches

true 이면 다크모드이며, false 이면 라이트모드 혹은 “운영체제에서 명시된 정보가 없음” 입니다. (라이트모드 감지는 위의 코드에서'(prefers-color-scheme: Dark)''(prefers-color-scheme: Light)'로 치환)

현재 라이트모드이므로 false 가 표시됩니다.

 

참고로 CSS 미디어쿼리를 사용하면 다음과 같습니다.

@media (prefers-color-scheme: dark) { /* 다크 모드에 사용 할 CSS를 입력하세요. */ }

 

예제: 다크모드 감지 페이지


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html.darkmode {
background-color: black;
color: white;
}
/* 일반적인 경우(라이트-다크 모드 구분없이) */
#title {
color: black;
}
/* 다크 모드인 경우 */
html.darkmode #title {
color: red;
}
</style>
</head>
<body>
<h3 id="title">title</h3>
<p id="light-dark">browser-mode: <span id="current-mode"></span></p>
<input type="checkbox" id="chk-user-mode"><label for="chk-user-mode">사용자 지정 다크모드</label>
<input type="radio" name="radio-dark" value="dark" disabled> dark <input type="radio" value="light" name="radio-dark" disabled> light
<script>
function getPrefersDark() {
console.log(window.matchMedia('(prefers-color-scheme: Dark)'))
return window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches
}
function setDarkmode(isOn = true) {
const currentMode = document.getElementById("current-mode")
if (isOn) {
document.getElementsByTagName("html")[0].classList.add("darkmode")
currentMode.innerHTML = "dark"
} else {
document.getElementsByTagName("html")[0].classList.remove("darkmode")
currentMode.innerHTML = "light"
}
}
const classList = document.getElementsByTagName("html")[0].classList
const prefersDark = getPrefersDark()
document.getElementById("title").textContent = prefersDark ? "System: Dark" : "System: Light"
const radio = document.querySelectorAll("input[name=radio-dark]")
const chkBox = document.querySelector("#chk-user-mode")
if (!localStorage.getItem("user-dark")) {
localStorage.setItem("user-dark", "no")
}
if (localStorage.getItem("user-dark") === "no" && prefersDark) {
setDarkmode()
radio[0].checked = true
} else {
localStorage.getItem("user-dark") === "dark" ? setDarkmode() : setDarkmode(false)
chkBox.checked = true
radio.forEach(el => {
if (el.value === localStorage.getItem("user-dark")) {
el.checked = true
}
})
}
chkBox.onclick = e => {
if (e.target.checked) {
localStorage.setItem("user-dark", "yes")
radio.forEach(el => {
el.disabled = false
})
} else {
localStorage.setItem("user-dark", "no")
radio.forEach(el => {
el.disabled = true
if(prefersDark && el.value === "dark") {
el.checked = true
} else {
el.chekced = true
}
})
setDarkmode(prefersDark)
}
}
radio.forEach(el => {
el.addEventListener("change", e => {
if (localStorage.getItem("user-dark") === "no") {
return
}
if (el.value === "dark") {
setDarkmode()
localStorage.setItem("user-dark", "dark")
} else {
setDarkmode(false)
localStorage.setItem("user-dark", "light")
}
})
})
</script>
</body>
</html>

view raw

darkmode.html

hosted with ❤ by GitHub

문의 | 코멘트 또는 yoonbumtae@gmail.com




0개의 댓글

답글 남기기

Avatar placeholder

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다