[AI 감성 일기장] Tailwind CSS와 Context API를 활용한 다크모드 구현

Tailwind CSS의 다크모드 기능과 React Context API를 활용하여 애플리케이션 전체에서 일관된 다크모드 전환 기능을 구현했다.

Tailwind 설정

tailwind.config.ts에서 다크모드를 클래스 기반으로 설정했다.

darkMode: "class",  // .dark 클래스 존재 여부에 따라 다크모드 활성화
theme: {
  extend: {
    colors: {
      // 색상 스키마
    },
  },
},

이를 통해 HTML 요소에 .dark 클래스가 추가되면 다크모드 스타일이 적용되도록 했다.

 

다크모드 상태 관리

ThemeContext 생성

Context API를 사용해 다크모드 상태를 전역으로 관리했다.

const ThemeContext = createContext({
  isDarkMode: false,
  toggleDarkMode: () => {},
});

export const ThemeProvider = ({ children }: ThemeProviderProps) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  // isDarkMode에 따라 .dark 클래스 추가/제거
  useEffect(() => {
    const body = document.querySelector("body");
    isDarkMode ? body?.classList.add("dark") : body?.classList.remove("dark");
    return () => {
      body?.classList.remove("dark");
    };
  }, [isDarkMode]);

  // isDarkMode 상태를 전환하는 함수
  const toggleDarkMode = () => setIsDarkMode(!isDarkMode);

  return (
    <ThemeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeContext;

• ThemeContext를 통해 애플리케이션 전체에 isDarkMode와 toggleDarkMode 제공
• useEffect로 isDarkMode 상태 변경 시 body에 .dark 클래스 동적 적용
• Tailwind CSS의 다크모드 클래스가 자동으로 활성화됨

 

전역 상태 제공

// main.tsx
import { ThemeProvider } from "context/theme-context";

<ThemeProvider>
  <App />
</ThemeProvider>

애플리케이션 최상위에서 ThemeProvider로 감싸 전체 컴포넌트에서 다크모드 상태에 접근할 수 있도록 했다.

 

다크모드 토글 버튼

export default function Footer() {
  const { isDarkMode, toggleDarkMode } = useContext(ThemeContext);

  return (
    <button onClick={toggleDarkMode}>
      {isDarkMode ? '라이트모드 아이콘' : '다크모드 아이콘'}
    </button>
  );
}

사용자가 버튼을 클릭하면 toggleDarkMode 함수가 실행되어 다크모드와 라이트모드를 전환한다.

 

다크모드 스타일 적용

컴포넌트별 스타일 조정

다크모드 상태에 따라 컴포넌트의 테마를 동적으로 변경했다.

const { isDarkMode } = useContext(ThemeContext);

return (
  <>
    <ToastContainer theme={isDarkMode ? "dark" : "light"} />
    {/* ... */}
  </>
);

 

Tailwind 다크모드 클래스 활용

Tailwind의 dark: 접두사를 사용해 다크모드 전용 스타일을 적용했다.

<div className="dark:text-white" />

const btnColor =
  type === ButtonType.DEFAULT
    ? "bg-btnLight dark:bg-btnDark dark:text-white"  // 모드별 스타일
    : type === ButtonType.POSITIVE
    ? "bg-green text-white"
    : type === ButtonType.NEGATIVE
    ? "bg-red text-white"
    : "";

return (
  <button
    className={`${btnColor} ${className}`}
    onClick={onClick}
  >
    {text}
  </button>
);

 

결과

전체 애플리케이션에서 일관된 다크모드 전환이 가능해졌다.