이번에 프레임워크 과제에서 다크/화이트 테마를 구현해야 했다. 처음에는 테마 상태에 따라 조건부 렌더링하는 식으로 구현을 했는데 찾아보니 tailwindCSS에서 쉽게 다크 테마를 구현할 수 있는 방법이 있었다.
Tailwind는 기본적으로 다크 모드를 두 가지 방식으로 지원하는데, 그 중 'class' 옵션은 다크 모드를 CSS 클래스 기반으로 활성화하여 사용할 수 있다.tailwind.config.js에 darkMode: 'class'를 추가해준다.
// tailwind.config.js
module.exports = {
darkMode: 'class',
}'class': 특정 HTML 요소에 dark 클래스를 추가하면 해당 요소의 스타일이 다크 모드로 전환된다. 사용자가 다크 모드를 선택하면 <html> 태그에 dark 클래스를 추가하면 다크 모드 스타일이 적용된다.
const [theme, setTheme] = useRecoilState<Theme>(themeState);
const toggleTheme = () => {
setTheme((prevTheme) => {
const newTheme = prevTheme === "light" ? "dark" : "light";
if (newTheme === "dark") {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
return newTheme;
});
};<button onClick={toggleTheme}>
{theme === "light" ? <MdOutlineLightMode /> : <MdOutlineDarkMode />}
</button>테마 버튼을 클릭했을 때 테마의 값을 toggle 해준다. 그 다음, 새로운 테마가 dark가 될 경우, <html> 태그에 dark 클래스를 추가해주고, light가 될 경우 dark 클래스를 제거해준다.
<nav className="transition-colors duration-300 bg-white dark:bg-black">
/* 생략 */
</nav>다음과 같이 light 모드에서의 CSS는 일반적인 방식으로 작성해주고, 다크 모드에서 변경되는 CSS는 dark:를 앞에 붙여주면 된다.
그러면 아래와 같이 모드가 변경될 때에 CSS를 쉽게 변경해줄 수 있다.
Frontend🍓