이 포스트에서는 웹 브라우저의 밝은/어두운 테마에 따라 다른 모양으로 표현되는 웹 페이지를 만들기 위한 CSS에 대해 서술합니다.
CSS의 미디어쿼리에는 웹 브라우저의 테마(밝게/어둡게)에 따른 반응형 미디어쿼리도 있습니다. 근래의 웹 브라우저(특히 모바일 브라우저)에서는 밝은 테마와 어두운 테마를 선택하는 것을 지원하는데, 기본적으로 밝은 배경의 웹 페이지를 만들어 두고 웹 브라우저의 테마를 어둡게 했을 경우 그 테마에 맞춰 어두운 배경으로 바꿔 보여주는 반응형 페이지를 만들 수 있습니다. 물론 반대로 어두운 배경을 기본으로 하고 밝은 테마에서 밝은 배경으로 바꿔 보여주는 것도 가능합니다.
다음 HTML 코드를 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Light and Dark CSS Sample</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* Light mode */
@media only screen and (prefers-color-scheme: light) {
body { background-color: #ffffff; color: #2a2a2a; }
.dark_only { display: none; }
}
/* Dark mode */
@media only screen and (prefers-color-scheme: dark) {
body { background-color: #2a2a2a; color: #ffffff; }
.light_only { display: none; }
}
</style>
</head>
<body>
<h1>Light and Dark CSS Sample</h1>
<p class="light_only">Light mode</p>
<p class="dark_only">Dark mode</p>
</body>
</html>
모바일의 가로세로에 따라 달라지는 CSS 만들기 포스트에서 서술한 반응형 CSS와 방법이 비슷합니다.
10번 줄과 16번 줄을 봅시다. 옵션이 prefers-color-scheme로 되어 있을 것입니다. 이 조건이 light로 되어 있다면 웹 브라우저의 테마가 밝은 테마일 때 적용되고 dark로 되어 있다면 웹 브라우저의 테마가 어두운 테마일 때 적용됩니다.
이 예제에서는 밝은 테마일 경우 배경색이 흰색이고 light_only 클래스만 표시, 세로화면에 대해서는 배경색이 암회색(검은색에 가까운)이고 dark_only 클래스만 표시되게끔 되어 있습니다.
샘플 링크는 다음과 같습니다. 모바일에서는 웹 브라우저 설정의 테마 기능을 이용해서 밝은 테마와 어두운 테마를 서로 바꿔가면서 실험해 보시면 됩니다. 데스크톱에서도 브라우저의 테마를 밝은 테마와 어두운 테마로 바꿀 수 있으나, 브라우저에 따라 재시작이 필요할 수도 있습니다.
https://pjw48.net/samp/light_and_dark_css_sample.html