최근 웹사이트와 애플리케이션은 사용자 경험을 강화하기 위해 다크모드를 지원하는 경우가 많습니다. 다크 모드는 화면의 밝기를 낮추어 야간에 더 편리한 사용 환경을 제공하며, 일부 디바이스에서는 배터리 소모를 줄이는 데 도움을 주기도 합니다. 이 글에서는 prefers-color-scheme 미디어 쿼리와 CSS Custom Properties(변수)를 활용해 다크모드를 구현하는 방법에 대해 알아보겠습니다.
1. 다크모드의 기본 개념
다크 모드는 기본적으로 웹사이트의 색상 테마를 조정해 밝은 배경과 어두운 글꼴 조합에서 어두운 배경과 밝은 글꼴 조합으로 변경하는 것을 의미합니다. 다크모드 구현 시 다음 요소를 고려해야 합니다.
- 배경 색상과 텍스트 색상의 대비 비율 유지.
- 버튼, 링크, 테두리 등의 UI 요소에 적합한 색상 적용.
- 사용자의 시스템 설정을 자동으로 인식하도록 구성.
2. prefers-color-scheme 미디어 쿼리란?
prefers-color-scheme 미디어 쿼리는 사용자의 시스템 테마(라이트 또는 다크 모드)를 감지합니다. 이를 통해 별도의 사용자 설정 없이도 브라우저에서 다크모드와 라이트 모드를 자동으로 전환할 수 있습니다.
/* 라이트 모드 */
@media (prefers-color-scheme: light) {
body {
background-color: #ffffff;
color: #000000;
}
}
/* 다크 모드 */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
}
3. CSS Custom Properties로 다크모드 관리하기
3.1 기본 변수 설정
CSS Custom Properties를 활용하면 반복적인 색상 정의를 줄이고 유지보수를 쉽게 할 수 있습니다.
:root {
--bg-color: #ffffff;
--text-color: #000000;
--accent-color: #007BFF;
}
다크 모드에 대응하는 변수는 다음과 같이 정의할 수 있습니다.
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #ffffff;
--accent-color: #1E90FF;
}
}
이제 CSS에서 정의된 변수를 활용해 스타일을 적용합니다.
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--accent-color);
}
3.2 컴포넌트에 변수 활용하기
다크모드와 라이트 모드에 적합한 UI 요소를 쉽게 적용할 수 있습니다.
버튼 스타일링
button {
background-color: var(--accent-color);
color: var(--text-color);
border: none;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: rgba(0, 123, 255, 0.8);
}
4. 사용자 설정과 다크모드 토글
4.1 JavaScript로 다크 모드 토글 추가
사용자가 시스템 기본값이 아닌 웹사이트에서 테마를 직접 설정할 수 있도록 JavaScript로 다크 모드 토글 버튼을 추가합니다.
HTML 구조
<button id="theme-toggle">Toggle Dark Mode</button>
JavaScript 코드
const toggleButton = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
}
toggleButton.addEventListener('click', () => {
const theme = document.documentElement.getAttribute('data-theme');
const newTheme = theme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
});
CSS 스타일
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #ffffff;
}
4.2 초기 설정
사용자의 기존 설정을 반영하려면 페이지 로드 시 prefers-color-scheme 값을 읽어 초기 테마를 설정해야 합니다.
if (!localStorage.getItem('theme')) {
const systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', systemPreference);
localStorage.setItem('theme', systemPreference);
}
5. 성능 최적화
다크모드와 관련된 스타일은 주요 CSS 파일에 포함하거나, 별도로 로드하도록 최적화할 수 있습니다. 예를 들어, 다크모드 관련 CSS를 별도 파일로 분리해 로드 시간을 줄일 수 있습니다.
<link rel="stylesheet" href="light-mode.css"> <link rel="stylesheet" href="dark-mode.css" media="(prefers-color-scheme: dark)">
다크 모드는 사용자 경험과 접근성을 동시에 향상시킬 수 있는 중요한 웹 디자인 요소입니다. prefers-color-scheme 미디어 쿼리와 CSS Custom Properties를 활용하면 유지보수와 구현을 단순화할 수 있으며, JavaScript를 활용한 사용자 정의 설정으로 더욱 직관적인 인터페이스를 제공할 수 있습니다. 이제 다크 모드를 추가하여 더 많은 사용자에게 호감을 얻는 웹사이트를 만들어 보세요!
