CSS 다크 테마 구현

iOS13에 다크모드가 추가 되면서, 개별 웹 사이트의 다크 테마 구현에 관심이 쏠리고 있습니다.
iSO13외에도, Android 10, MacOS 10.14부터 다크모드가 추가 되었으며, Windows10도 지난 5월 업데이트로 다크모드 사용이 가능해졌습니다.

최근 9to5mac 에 다크 테마가 적용 되었는데, OS에서 다크모드가 활성화 된 상태로 사이트에 접속하면 다크테마로, 그렇지 않은 경우 밝은 색상의 사이트로 출력됩니다.
현재 OS가 어떤 색상모드를 사용중인지 웹사이트에서 감지하려면, 애플의 제안으로 CSS사양에 추가된 prefers-color-scheme 미디어 쿼리를 사용하면 됩니다.
예제와 함께 사용법을 알아 보겠습니다.

 

데모용으로 사용할 HTML페이지 입니다.

<div class="container">
    <img class="cat" src="https://i.imgur.com/2ZIRImj.jpg">
    <p><span class="text--alpha">Lorem ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, <span class="text--alpha">"Lorem ipsum dolor sit amet.."</span>, comes from a line in section 1.10.32.

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>

 

데모 페이지에 적용할 스타일입니다.

.text--alpha {
    color: #c3423f;
}

body {
    font-family: 'Segoe UI';
    background-color: var(--background-color);
    color: #212121;
    padding: 26px;
    line-height: 1.6;
    font-size: 16px;
}

.container {
    padding: 26px 52px;
    max-width: 776px;
    margin: 52px auto;
    background-color: #fff;
    box-shadow: 0 0 12px 6px rgba(0,0,0,0.05);
    border-radius: 5px;
}

img {
    width: 100%;
    height: auto;
    float: left;
    max-width: 300px;
    margin-right: 26px;
    margin-bottom: 26px;
}

 

데모 페이지는 아래와 같은 모습으로 보여집니다.

이제 미디어 쿼리를 추가하여 다크 테마를 구현하겠습니다.

@media (prefers-color-scheme: dark) 
{
    body {
        background-color: #111;
    }

    .container {
        color: white;
        background-color: #212121;
    }

    .text--alpha {
        color: #50a8d8;
    }
}

 

배경색과 컨테이너의 배경색, 폰트 색상 등을 변경하였습니다. OS에서 다크모드가 활성화 된 상태로 데모페이지를 열면 아래처럼 출력됩니다.

 

이 데모 페이지처럼 간단한 HTML은 이렇게 하는 것이 쉽지만, 일반적인 웹 사이트의 경우 적용해야 할 요소가 많아지게 되므로 관리가 어렵게 될 것입니다.
CSS필터를 이용하면 단 한줄로 비슷한 효과를 구현할 수 있습니다.

@media (prefers-color-scheme: dark) 
{
    html {
        filter: invert(100%);
    }
}

 

적용 모습입니다.

텍스트나 컨테이너의 배경색은 괜찮아 보이지만, 이미지까지 색상이 반전되어 버렸습니다. 
CSS필터는 적용된 엘리먼트의 하위 요소에 자동 적용되며 일부만 제외할 수 없기 때문에, 이미지만 별도로 필터가 적용 안되게 할 수는 없습니다(편법으로 HTML구조를 수정하여 이미지를 제외하는 방법도 있지만, 이미 개발되어 운영중인 사이트라면 수정이 쉽지 않을 것 입니다)
또한, 이 상태에서는 개별 엘리먼트에 대한 제어도 할 수 없습니다.

 

관리를 조금 더 쉽게 하기 위해, 커스텀 속성을 사용하는 방법으로 변경해 보겠습니다.
먼저 root 가상 클래스에 일부 요소를 변수로 선언합니다.(root 가상 클래스는 문서의 최상위 요소를 의미합니다)

:root {
    --background-color: #ededed;
    --page-background: #fff;
    --text-color: #212121;
    --color-alpha: #c3423f;
    --page-shadow: 0 0 12px 6px rgba(0,0,0,0.05);
}

 

생성한 변수를 적용합니다. 커스텀 속성 적용 문법은 var('--속성 이름') 입니다.

.text--alpha {
    color: var(--color-alpha);
}

body {
    font-family: 'Segoe UI';
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 26px;
    line-height: 1.6;
    font-size: 16px;
}

.container {
    padding: 26px 52px;
    max-width: 776px;
    margin: 52px auto;
    background-color: var(--page-background);
    box-shadow: var(--page-shadow);
    border-radius: 5px;
}

img {
    width: 100%;
    height: auto;
    float: left;
    max-width: 300px;
    margin-right: 26px;
    margin-bottom: 26px;
}

 

다크 테마에도 커스텀 속성을 사용하여 유지보수를 조금 더 수월하게 합니다.

@media (prefers-color-scheme: dark) 
{
    :root {
        --background-color: #111;
        --page-background: #212121;
        --text-color: #ededed;
        --color-alpha: #50a8d8;
        --page-shadow: 0 0 12px 6px rgba(0,0,0,0.033);
    }
}