CSS 다크모드 라이트모드 구현하기

안녕하세요.

이번시간에는 CSS로 다크모드를 감지하고 다크모드일 때 CSS를 적용하는 방법에 대해 알아보겠습니다.

우리는 앞에서 미디어쿼리를 활용한 적이 있습니다.

반응형 웹을 만들 때 사용했었죠.

미디어 쿼리는 그 외에도 OS가 다크모드를 사용하는지 라이트모드를 사용하는지도 구분할 때 사용합니다.

prefers-color-scheme를 사용해서요.

미디어쿼리로 다크모드 라이트모드 구분하여 CSS 적용하기

@media(prefers-color-scheme: 모드){
CSS코드
}

모드는 dark또는 Light를 적습니다.

/* light mode */
@media(prefers-color-scheme: light){
CSS코드
}
/* dark mode */
@media(prefers-color-scheme: dark){
CSS코드
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0}
@media(prefers-color-scheme: light){
html{background:#fff;color:#000}
}
@media(prefers-color-scheme: dark){
html{background:#000;color:#ccc}
}
</style>
<title>coreasur</title>
</head>
<body>
    <header>
        <h1>coreasur</h1>
    </header>
</body>
</html>

제가 사용하는 MacOS에서 라이트 모드로 변경을 한 후 결과를 보면..

dark mode light mode

라이트모드 결과

dark mode light mode

제가 사용하는 MacOS에서 다크 모드로 변경을 한 후 결과를 보면..

dark mode light mode

다크모드 결과

dark mode light mode