다크 모드(Dark Mode) 지원을 위한 CSS 전략

안녕하세요! 다크 모드는 이제 웹사이트의 필수 기능이 되고 있습니다. CSS를 활용해 깔끔하게 다크 모드를 구현하는 방법을 알려드릴게요.

1. 시스템 설정 자동 전환: `prefers-color-scheme`

사용자의 운영체제(Windows, macOS 등) 설정에 따라 웹사이트의 테마를 자동으로 바꿔주는 방법입니다.

/* 기본 (라이트 모드) 스타일 */
body { background-color: #ffffff; color: #333333; }
.card { background-color: #f0f0f0; }

/* --- 다크 모드 스타일 (사용자 시스템이 다크 모드일 때 적용) --- */
@media (prefers-color-scheme: dark) {
    body { background-color: #1a1a1a; color: #e0e0e0; }
    .card { background-color: #2a2a2a; }
    /* 필요한 다른 요소들의 색상도 여기서 변경 */
}
 

`var(--변수명)`을 사용하여 색상 변수를 정의해두면, `@media` 안에서 이 변수 값만 바꿔주면 되어 관리가 훨씬 쉬워집니다.

2. 사용자 토글 버튼 구현 (수동 전환)

사용자가 직접 테마를 켜고 끌 수 있는 버튼을 만들 때는 CSS 변수와 JavaScript를 함께 사용합니다.

2.1. HTML (버튼)

html
<button id="theme-toggle" aria-label="다크 모드 전환"></button>
2.2. CSS (변수 정의)

`body`에 `.dark-mode` 클래스가 붙었을 때 색상 변수 값을 변경하도록 설정합니다.

root { /* 라이트 모드 기본 값 */
    --bg-color: #ffffff;
    --text-color: #333333;
}
.dark-mode { /* .dark-mode 클래스가 있을 때 */
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
}
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease; /* 부드러운 전환 */
}

2.3. 자바스크립트 (클래스 토글 및 저장)

* 버튼 클릭 시 `body`에 `.dark-mode` 클래스를 추가/제거하고, 사용자의 선택을 `localStorage`에 저장하여 페이지를 다시 열어도 테마가 유지되도록 합니다.

javascript
document.addEventListener('DOMContentLoaded', () => {
    const toggleButton = document.getElementById('theme-toggle');
    const body = document.body;

    // 저장된 테마 불러오기 또는 시스템 설정 따르기
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.classList.add(savedTheme);
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        body.classList.add('dark-mode');
    }

    // 버튼 클릭 시 테마 전환
    toggleButton.addEventListener('click', () => {
        if (body.classList.contains('dark-mode')) {
            body.classList.remove('dark-mode');
            localStorage.setItem('theme', ''); // 라이트 모드로 저장
        } else {
            body.classList.add('dark-mode');
            localStorage.setItem('theme', 'dark-mode');
        }
    });
});
 

그누보드/영카트 적용 팁:

* 사용 중인 테마의 CSS 파일에 다크 모드 스타일 을 추가하세요.
* `head.php` 또는 `tail.php` 파일에 다크 모드 토글 버튼과 관련된 자바스크립트코드를 넣어주면 됩니다.