CSS Custom Properties, 즉 CSS 변수는 스타일을 유동적으로 관리하고 쉽게 변경할 수 있는 강력한 도구입니다. 특히 다크모드와 라이트모드 같은 테마를 적용할 때 CSS 변수를 활용하면 테마 전환이 간단해지고 유지 보수가 쉬워집니다.
1. CSS Custom Properties(변수)란 무엇인가?
CSS 변수는 CSS에서 값을 재사용할 수 있도록 하는 기능입니다. 변수는 --로 시작하며, 일반적으로 루트(:root) 선택자 안에서 정의해 문서 전체에서 사용할 수 있습니다. 기본 형식은 다음과 같습니다:
:root {
--primary-color: #3498db;
--background-color: #ffffff;
--text-color: #333333;
}
이 변수를 사용하려면 var() 함수를 사용하여 호출할 수 있습니다.
body {
background-color: var(--background-color);
color: var(--text-color);
}
이렇게 설정하면 --background-color 값이 배경 색으로, --text-color가 글자 색으로 적용됩니다. 이를 통해 디자인의 색상 및 스타일을 변경할 때 변수만 수정하면 되므로 효율적인 유지보수가 가능합니다.
2. 다크모드와 라이트모드 테마 전환 원리
CSS 변수의 가장 큰 장점은 사용자에게 유연하게 테마를 제공할 수 있다는 것입니다. 다크모드와 라이트모드를 쉽게 전환하려면 각각의 테마 색상을 변수에 저장해두고, 테마 전환 시 해당 변수를 업데이트하는 방식으로 구현할 수 있습니다.
기본 테마 설정
일반적으로 루트 선택자(:root) 안에 라이트모드 색상을 기본으로 설정합니다.
:root {
--background-color: #ffffff;
--text-color: #333333;
--primary-color: #3498db;
}
다크모드 설정
다크모드 전환 시, CSS의 data-theme 속성을 활용해 다크모드 관련 변수 값을 설정할 수 있습니다.
[data-theme="dark"] {
--background-color: #333333;
--text-color: #ffffff;
--primary-color: #1abc9c;
}
이렇게 하면 data-theme="dark" 속성을 가진 요소가 다크모드 설정을 사용하게 됩니다.
3. 다크모드와 라이트모드 전환 기능 구현
다음 단계에서는 자바스크립트를 사용하여 사용자가 다크모드와 라이트모드를 쉽게 전환할 수 있도록 구현해 보겠습니다.
HTML 버튼 생성
사용자가 테마를 전환할 수 있도록 HTML에 버튼을 추가합니다.
<button id="theme-toggle">Toggle Theme</button>
자바스크립트 코드로 테마 전환 설정
버튼을 클릭할 때마다 테마가 전환되도록 자바스크립트를 작성합니다. 여기서는 localStorage를 사용해 사용자가 설정한 테마를 저장하고, 페이지가 다시 로드될 때 이전 설정을 기억하도록 합니다.
const themeToggle = document.getElementById('theme-toggle');
// 기존 테마가 있다면 로드
const currentTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', currentTheme);
// 버튼 클릭 시 테마 전환
themeToggle.addEventListener('click', () => {
const newTheme = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme); // 로컬 스토리지에 테마 저장
});
이 스크립트를 통해, 사용자가 버튼을 클릭하면 테마가 전환되며 설정된 테마가 localStorage에 저장됩니다. 페이지를 새로고침해도 이전에 설정한 테마가 유지되므로, 일관된 사용자 경험을 제공합니다.
4. 테마 변경 시 적용되는 스타일 확인
이제 다크모드와 라이트모드 전환이 실제로 적용되는지 확인하기 위해 본문의 스타일을 작성해 보겠습니다.
body {
background-color: var(--background-color);
color: var(--text-color);
}
h1 {
color: var(--primary-color);
}
다크모드에서는 data-theme="dark" 속성에 정의된 색상이, 라이트모드에서는 기본 설정된 색상이 적용됩니다. 이를 통해 배경 색상과 텍스트 색상, 주요 색상이 테마에 따라 자동으로 변경됩니다.
5. CSS 변수 활용의 장점
CSS Custom Properties를 활용한 테마 전환에는 다음과 같은 장점이 있습니다.
- 유연성과 유지보수성: CSS 변수 하나만 수정해도 전체 스타일이 업데이트되므로 유지보수가 용이합니다.
- 빠른 전환: 변수 값만 변경하면 되므로 테마 전환이 빠르게 이루어집니다.
- 다양한 요소 스타일 통일: 같은 변수로 여러 요소를 스타일링할 수 있어, 일관된 디자인을 유지할 수 있습니다.
6. 사용자에게 친화적인 다크모드 구현 추가 팁
사용자가 브라우저의 다크모드 설정을 선호하는 경우라면, prefers-color-scheme 미디어 쿼리를 통해 이를 감지하고, 초기 테마를 자동으로 설정할 수 있습니다.
@media (prefers-color-scheme: dark) {
:root {
--background-color: #333333;
--text-color: #ffffff;
--primary-color: #1abc9c;
}
}
위 코드를 추가하면, 사용자의 시스템 설정에 따라 초기 테마가 자동으로 적용됩니다. 물론 이후 사용자가 테마를 변경할 수도 있으며, 변경된 테마는 localStorage에 저장됩니다.
CSS Custom Properties를 사용한 다크모드와 라이트모드 구현은 웹사이트의 디자인 일관성을 유지하면서도 사용자의 테마 선호도에 맞출 수 있는 유연성을 제공합니다. CSS 변수를 활용하여 스타일을 효율적으로 관리하고, 자바스크립트를 통해 다크모드와 라이트모드를 손쉽게 전환할 수 있습니다. 이를 통해 웹사이트의 유지보수와 사용자 경험을 향상시킬 수 있습니다.
