어두운 테마에서 다르게 표시되는 CSS 만들기

이 포스트에서는 웹 브라우저의 밝은/어두운 테마에 따라 다른 모양으로 표현되는 웹 페이지를 만들기 위한 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 클래스만 표시되게끔 되어 있습니다.

샘플 링크는 다음과 같습니다. 모바일에서는 웹 브라우저 설정의 테마 기능을 이용해서 밝은 테마와 어두운 테마를 서로 바꿔가면서 실험해 보시면 됩니다. 데스크톱에서도 브라우저의 테마를 밝은 테마와 어두운 테마로 바꿀 수 있으나, 브라우저에 따라 재시작이 필요할 수도 있습니다.
http://parkjuwan.dothome.co.kr/samp/light_and_dark_css_sample.html

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다