[CSS] 다크모드 구현 하는 방법 - 시스템 설정 기반 및 사용자 선택기반 모드변경

오늘날, 다양한 웹사이트와 애플리케이션에서 다크 모드와 라이트 모드 전환 기능은 거의 필수적으로 간주되고 있다. 이 기능은 사용자의 눈을 보호하며, 에너지 절약 효과와 개별 사용자의 선호도 반영으로 전반적인 사용자 경험을 향상시킨다. 이 포스트에서는 웹페이지에서 CSS를 활용하여 이러한 테마 전환 기능을 어떻게 구현하는지, 초보자도 쉽게 따라할 수 있도록 자세하게 설명하겠다.

시스템 설정 기반 초기 모드 설정

웹페이지 방문자의 첫 화면은 대부분 그 사용자의 시스템 설정에 기반하여 표시된다. 만약 사용자의 운영 체제 또는 브라우저 설정이 다크 모드로 설정되어 있다면, 해당 웹페이지도 다크 모드로 보여지게 될 것이다. 이러한 행동은 사용자의 선호와 일치하도록 웹페이지의 스타일을 초기 설정하는 것이다. 그렇게 함으로써 사용자의 눈의 피로를 줄이고, 더욱 편안한 웹 브라우징 경험을 제공할 수 있다. 이 기능을 구현하기 위해서는 CSS의 특별한 미디어 쿼리인 prefers-color-scheme를 사용한다.

prefers-color-scheme란?

prefers-color-scheme는 사용자의 시스템 설정에서 선호하는 색상 테마(예: 다크모드 또는 라이트모드)를 감지하는 데 사용되는 CSS 미디어 쿼리의 피처이다.

사용 가능한 값:

  • no-preference: 사용자의 시스템이 특정 테마 선호도를 가지고 있지 않을 때.
  • light: 라이트 모드를 선호할 때 적용.
  • dark: 다크 모드를 선호할 때 적용.

적용방법

1. 기본적으로 라이트 모드 스타일 적용

css
:root {
  --primary-font-color: #111827;
  --secondary-font-color: #374151;
  --bg-color: #f9f9f9;
}
  • :root는 CSS에서 문서의 최상위 요소를 의미한다. 이는 보통 전체 웹페이지에 대한 기본값을 설정할 때 사용된다.
  • 위 코드는 웹 페이지의 기본 모드를 라이트 모드로 설정하고 있다. 이에 따라, 주요 글꼴 색상, 부차적인 글꼴 색상, 그리고 배경색에 대한 값들이 지정되어 있다.
  • --primary-font-color, --secondary-font-color, --bg-color는 CSS 변수로, 웹 페이지 전체에서 사용될 색상의 값을 저장하고 있다.

2. 다크 모드 선호 시 스타일 적용

css
@media (prefers-color-scheme: dark) {
  :root {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
  }
}
  • @media (prefers-color-scheme: dark)는 사용자의 운영체제 또는 브라우저 설정에서 다크 모드를 선호하는 경우에만 적용되는 스타일을 정의하는 미디어 쿼리이다.
  • 이 부분의 코드는 사용자의 시스템 설정이 다크 모드로 되어 있을 경우, 웹 페이지의 스타일을 다크 모드로 전환하기 위한 설정을 담고 있다.
  • 여기에서도 마찬가지로 CSS 변수를 활용하여 주요 글꼴 색상, 부차적인 글꼴 색상, 그리고 배경색에 대한 값을 변경하여 다크 모드에 적합한 스타일을 적용하고 있다.

이 CSS 코드는 사용자의 시스템 설정에 따라 라이트 모드와 다크 모드 사이의 스타일 전환을 자동으로 수행할 수 있도록 돕다. 사용자가 다크 모드를 선호하는 설정을 선택한 경우에만 다크 모드 스타일이 적용되며, 그렇지 않은 경우 기본적으로 라이트 모드 스타일이 적용된다.

주의사항

  • 모든 브라우저에서 prefers-color-scheme를 지원하지 않을 수 있으므로, 호환성을 고려하여 구현해야 한다.
  • 사용자의 시스템 설정에 의존하는 것만으로 충분하지 않을 수 있다. 웹사이트 내에서 사용자가 직접 테마를 변경할 수 있는 옵션을 제공하는 것이 좋다. 그와 관련된 사항은 아래에 계속해서 설명 할 것이다.

사용자 선택에 따른 모드 변경

웹페이지가 사용자의 시스템 설정을 기반으로 초기 모드를 설정한 후, 사용자는 자신의 선호에 따라 모드를 변경하고 싶을 수 있다. 예를 들어, 주변 환경이나 특정 작업에 따라 다크 모드와 라이트 모드 사이에서 스위치하려는 사용자의 필요를 충족시켜주는 것이 중요하다. 이러한 사용자 선택 기반의 테마 전환 기능은 웹페이지의 유연성을 높이며, 사용자에게 더욱 개인화된 경험을 제공한다. 이를 위해서는 HTML, CSS, 그리고 자바스크립트를 조합하여 구현할 수 있다.

적용방법

1. HTML: 모드 변경 버튼 추가 다크 모드와 라이트 모드를 전환할 수 있는 버튼 또는 토글 스위치를 웹 페이지에 추가한다.

html
<button id="themeToggle">Dark Mode</button>

2. 기본 및 라이트 모드 스타일

css
:root,
[data-theme='light'] {
    --primary-font-color: #111827;
    --secondary-font-color: #374151;
    --bg-color: #f9f9f9;
    --divider-color: rgba(0, 0, 0, 0.1);
}
  • :root는 CSS에서의 최상위 요소를 의미하며, 여기에 변수를 정의함으로써 전체 페이지의 기본 스타일을 설정할 수 있다.
  • [data-theme='light']는 data-theme 속성의 값이 'light'인 요소에 적용되는 스타일을 의미한다.
  • 이 부분에서는 기본적으로 웹 페이지에 적용될 라이트 모드의 스타일을 정의하고 있다.

3. 다크 모드 스타일

css
[data-theme='dark'] {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
    --divider-color: rgba(255, 255, 255, 0.1);
}
  • [data-theme='dark']는 data-theme 속성의 값이 'dark'인 요소에 적용되는 스타일을 의미한다.
  • 이 부분에서는 다크 모드를 선택했을 때 웹 페이지에 적용될 스타일을 정의하고 있다.

4. JavaScript: 모드 전환 로직 구현

버튼을 클릭하면 웹 페이지의 테마가 전환되도록 자바스크립트로 로직을 구현한다.

javascript
const themeToggleButton = document.getElementById('themeToggle');

themeToggleButton.addEventListener('click', function() {
    const currentTheme = document.documentElement.getAttribute('data-theme');

    if (currentTheme === 'dark') {
        document.documentElement.setAttribute('data-theme', 'light');
        themeToggleButton.innerText = 'Dark Mode';
    } else {
        document.documentElement.setAttribute('data-theme', 'dark');
        themeToggleButton.innerText = 'Light Mode';
    }
});

이렇게 설정하면, 사용자가 'Dark Mode' 버튼을 클릭하면 웹 페이지의 테마가 다크 모드로 바뀌게 된다. 반대로, 다크 모드에서 'Light Mode' 버튼을 클릭하면 라이트 모드로 전환된다.

웹페이지에서 다크 모드와 라이트 모드의 전환은 사용자 경험을 향상시키는 중요한 기능 중 하나이다. 이 포스트를 통해, 이러한 기능의 구현 방법에 대해 기본적인 이해를 얻었기를 바란다. 웹 개발 초보자라도 이러한 지침을 따라 단계별로 진행하면 웹페이지에 효과적으로 테마 전환 기능을 추가할 수 있다

© Copyright 2023 CLONE CODING