가끔 특정 페이지들에 접근했을 때 내 PC가 다크모드인걸 인식하고 다크모드를 적용해주는 곳들이 있어 신기해서 찾아보았다.
@media (prefers-dark-interface) {
color: white; background: black
}
if (
window.matchMedia &&
window.matchMedia(
'(prefers-color-scheme: dark)'
).matches
) {
// your code
}
CSS에도 있지만, 나는 왠지 CSS쪽 보다는 javascript의 기능에 관심이 더 갔다.
다크모드와 라이트모드를 왔다갔다 하려면 javascript를 이용해 body태그에 darkmode 클래스 같은걸 필요에따라 넣거나 빼는 기능이 필요하다고 생각되기 때문이다.