다크모드 쉽게 적용하기

주의! 2024년 2월 21일 현재, Firefox 120 버전에서만 지원되는 기능

기존 방법

body {
    color: black;
    background: white;
}

@media (prefers-color-scheme: dark) {
    body {
        color: white;
        background: black;
    }
}

유저가 다크모드를 사용 중인지 prefers-color-scheme 미디어 쿼리를 통해 확인

prefers-color-scheme는 white 또는 dark의 값을 가짐

해당 값이 dark일 경우 배경을 black, 글자색을 white로 변경

새로운 방법

브라우저에 지원하는 모드 전달

• 라이트모드, 다크모드를 지원한다고 전달

:root {
    color-scheme: light dark;
}

(다크)모드 적용

body {
    color: light-dark(black, white);
    background: light-dark(white, black);
}

라이트 모드만 지원하는 요소

form {
    color-scheme: light;
}

form input {
    background: light-dark(white, gray);
}

• form의 color-scheme은 라이트 모드만 지원하므로 해당 form의 input에서 light-dark 함수는 항상 white를 반환

참고

• MDN Web Docs