KooKs

예시

API

개발 및 사용환경

Usage

1import { useSystemTheme } from "@kooks-fe/kooks/react";
2
3function MyComponent() {
4  const { systemTheme, isDarkMode } = useSystemTheme();
5
6  return (
7    <div className={isDarkMode ? "dark-theme" : "light-theme"}>
8      <h1>현재 테마: {systemTheme}</h1>
9      {/* 테마에 따른 컴포넌트 렌더링 */}
10    </div>
11  );
12}

Hook

1import { useEffect, useState } from "react";
2
3type Theme = "light" | "dark";
4
5interface UseSystemThemeResult {
6  systemTheme: Theme;
7  isDarkMode: boolean;
8  isLightMode: boolean;
9}
10
11/**
12 * 사용자의 시스템에 설정된 테마를 감지하는 Hook
13 * 
14 * 이 훅은 사용자의 시스템 설정에서 다크 모드 여부를 감지하여 반환합니다.
15 * 시스템의 테마 설정이 변경될 때마다 자동으로 업데이트됩니다.
16 * 
17 * @returns {Object} 시스템 테마 정보를 담은 객체
18 *   - systemTheme: 현재 시스템 테마 ("light" | "dark")
19 *   - isDarkMode: 시스템 테마가 다크 모드인지 여부
20 *   - isLightMode: 시스템 테마가 라이트 모드인지 여부
21 */
22export function useSystemTheme(): UseSystemThemeResult {
23  const [systemTheme, setSystemTheme] = useState<Theme>("light");
24
25  useEffect(() => {
26    if (
27      typeof window === "undefined" ||
28      typeof window.matchMedia !== "function"
29    )
30      return;
31
32    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
33
34    const updateTheme = (e: MediaQueryListEvent | MediaQueryList) => {
35      setSystemTheme(e.matches ? "dark" : "light");
36    };
37
38    updateTheme(mediaQuery); // 초기 설정
39    mediaQuery.addEventListener("change", updateTheme);
40
41    return () => {
42      mediaQuery.removeEventListener("change", updateTheme);
43    };
44  }, []);
45
46  return {
47    systemTheme,
48    isDarkMode: systemTheme === "dark",
49    isLightMode: systemTheme === "light",
50  };
51}