다크모드는 이제 사이트에서 기본 기능 중 하나입니다. 프로젝트에 다크모드를 추가하고 싶다면 다양한 방법이 있습니다.
- CSS Variable
- Styled Components 에서 ThemeProvider 사용
- TailwindCSS 에서 dark 기능 사용
이 글에서는 CSS Variable을 활용한 다크모드 구현 방법을 다뤄보겠습니다.
예제코드
HTML
<body class="light">
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item has-dropdown">
<a href="#">Theme</a>
<ul class="dropdown">
<li class="dropdown-item">
<a id="light" href="#">light</a>
</li>
<li class="dropdown-item">
<a id="dark" href="#">dark</a>
</li>
<li class="dropdown-item">
<a id="solar" href="#">solarize</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>CSS
먼저 각 색상 변수를 정의합니다.
:root {
--gray0: #f8f8f8;
--gray1: #dbe1e8;
--gray2: #b2becd;
--gray3: #6c7983;
--gray4: #454e56;
--gray5: #2a2e35;
--gray6: #12181b;
--blue: #0084a5;
--purple: #a82dd1;
--yellow: #fff565;
}
.light {
--bg: var(--gray0);
--bg-nav: linear-gradient(to right, var(--gray1), var(--gray3));
--bg-dropdown: var(--gray0);
--text: var(--gray6);
--border-color: var(--blue);
--bg-solar: var(--yellow);
}
.dark {
--bg: var(--gray5);
--bg-nav: linear-gradient(to right, var(--gray5), var(--gray6));
--bg-dropdown: var(--gray6);
--text: var(--gray0);
--border-color: var(--purple);
--bg-solar: var(--blue);
}
.solar {
--gray0: #fbffd4;
--gray1: #f7f8d0;
--gray2: #b6f880;
--gray3: #5ec72d;
--gray4: #3ea565;
--gray5: #005368;
--gray6: #003d4c;
}다음으로 각 요소에 CSS 변수를 적용합니다.
body {
color: var(--text);
background: var(--bg);
}
.navbar {
background-color: var(--bg-nav);
color: var(--text);
}
.dropdown {
position: absolute;
opacity: 0;
z-index: 2;
background-color: var(--bg-dropdown);
border-top: 2px solid var(--border-color);
}
.has-dropdown:focus-within .dropdown {
opacity: 1;
}
*참고: 생략된 코드가 많습니다.
JS
DOM을 불러옵니다.
const darkButton = document.querySelector("#dark");
const lightButton = document.querySelector("#light");
const solarButton = document.querySelector("#solar");
const body = document.body;클릭 이벤트로 클래스명을 변경합니다.
darkButton.onclick = () => {
body.classList.replace("light", "dark");
};
lightButton.onclick = () => {
body.classList.replace("dark", "light");
};
solarButton.onclick = () => {
if (body.classList.contains("solar")) {
body.classList.remove("solar");
solarButton.style.cssText = `--bg-solar: var(--yellow)`;
solarButton.innerText = "solarize";
} else {
body.classList.add("solar");
solarButton.style.cssText = `--bg-solar: white`;
solarButton.innerText = "normalize";
}
};결론
CSS Variable 방식은 JavaScript로 DOM을 조작하여 클래스명을 변경하고, CSS에서 해당 클래스의 색상을 변수로 관리하는 방식입니다.
