@modern-kit/react
Version:
1 lines • 6.43 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useColorScheme/index.ts"],"sourcesContent":["import { isFunction } from '@modern-kit/utils';\nimport { useLocalStorage } from '../useLocalStorage';\nimport { usePreferredColorScheme } from '../usePreferredColorScheme';\nimport { useCallback, useEffect } from 'react';\n\nconst COLOR_SCHEME_DEFAULT_KEY = 'color-scheme';\n\ntype ColorScheme = 'dark' | 'light';\n\ninterface UseColorSchemeReturnType {\n colorScheme: ColorScheme;\n preferredColorScheme: ColorScheme;\n setToggleMode: () => void;\n setDarkMode: () => void;\n setLightMode: () => void;\n setPreferredMode: () => void;\n}\n\ninterface UseColorSchemeOptions {\n key?: string;\n defaultValue?: (() => ColorScheme) | ColorScheme;\n shouldSetBodyClass?: boolean;\n}\n\n/**\n * @description 사용자의 색상 테마(다크 모드 또는 라이트 모드)를 관리하기 위한 훅입니다.\n *\n * @param {UseColorSchemeOptions} [options={}] - 색상 테마를 관리를 위한 추가 옵션입니다.\n * - `key`: 스토리지에 저장 할 key 값입니다. 기본 값은 `'color-scheme'`입니다.\n * - `defaultValue`: 기본 값으로 셋팅 값입니다. `prefers-color-scheme`를 지원하지 않는 OS의 경우 혹은 외부에서 테마 값을 전달 받는 경우 `defaultValue`를 활용 할 수 있습니다.\n * - `shouldSetBodyClass`: document.body의 클래스에 색상 테마를 저장 할 여부를 결정하는 값입니다. 기본 값은 `false`입니다.\n *\n * @returns {UseColorSchemeReturnType}\n * - `colorScheme`: 현재 적용된 색상 테마(`dark`, `light`)입니다. 로컬 스토리지에 저장된 값이 있다면 해당 값을 가져옵니다.\n * 스토리지에 저장된 값이 없는 상황에서 `defaultValue`가 설정되어 있다면 우선적으로 `defaultValue` 값을 갖습니다.\n * 만약, `defaultValue`가 없다면 다음으로 사용자 선호 색상(`prefers-color-scheme`) 값을 가져옵니다.\n * - `preferredColorScheme`: 사용자의 선호 색상 테마입니다. 사용자 시스템 설정에 따라 달라집니다.\n * - `setToggleMode`: 현재 색상 테마를 `다크 모드`와 `라이트 모드` 사이에서 전환합니다.\n * - `setDarkMode`: 현제 색상 테마를 `다크 모드`로 설정합니다.\n * - `setLightMode`: 현재 색상 테마를 `라이트 모드`로 설정합니다.\n * - `setPreferredMode` - 현재 색상 테마를 사용자의 선호 색상(`prefers-color-scheme`)으로 설정합니다.\n *\n * @example\n * // 사용자의 선호 색상(`prefers-color-scheme`)이 Light 모드인 경우\n * const {\n * colorScheme,\n * preferredColorScheme,\n * setDarkMode,\n * setLightMode,\n * setToggleMode,\n * setPreferredMode\n * } = useColorScheme();\n *\n * // 초기 상태\n * // colorScheme: 'light', preferredColorScheme; // 'light'\n *\n * // 스트리지 저장\n * setToggleMode(); // colorScheme: 'dark', preferredColorScheme: 'light'\n * setLightMode(); // colorScheme: 'light', preferredColorScheme: 'light'\n * setDarkMode(); // colorScheme: 'dark', preferredColorScheme: 'light'\n * setPreferredMode(); // colorScheme: 'light', preferredColorScheme: 'light'\n *\n * @example\n * // 옵션 설정\n * // 앱에서 userAgent로 dark mode 관련 프로퍼티를 전달 받아서 사용하는 경우\n * const userAgent = window.navigator.userAgent\n *\n * useColorScheme({\n * key: 'custom-key', // 스토리지에 저장 할 key입니다.\n * defaultValue: userAgent.includes('{Dark Mode Property}') ? 'dark' : 'light',\n * shouldSetBodyClass: true, // document.body 클래스에 colorScheme을 셋팅합니다.\n * });\n */\nexport function useColorScheme({\n defaultValue,\n key = COLOR_SCHEME_DEFAULT_KEY,\n shouldSetBodyClass = false,\n}: UseColorSchemeOptions = {}): UseColorSchemeReturnType {\n const preferredColorScheme = usePreferredColorScheme();\n const defaultValueToUse = isFunction(defaultValue)\n ? defaultValue()\n : defaultValue;\n\n const { state: colorScheme, setState: setColorScheme } =\n useLocalStorage<ColorScheme>({\n key,\n initialValue: defaultValueToUse ?? preferredColorScheme,\n });\n\n const setToggleMode = useCallback(() => {\n setColorScheme((prev) => (prev === 'dark' ? 'light' : 'dark'));\n }, [setColorScheme]);\n\n const setDarkMode = useCallback(() => {\n setColorScheme('dark');\n }, [setColorScheme]);\n\n const setLightMode = useCallback(() => {\n setColorScheme('light');\n }, [setColorScheme]);\n\n const setPreferredMode = useCallback(() => {\n setColorScheme(preferredColorScheme);\n }, [setColorScheme, preferredColorScheme]);\n\n useEffect(() => {\n if (shouldSetBodyClass) {\n document.body.classList.add(colorScheme);\n }\n return () => {\n if (shouldSetBodyClass) {\n document.body.classList.remove(colorScheme);\n }\n };\n }, [colorScheme, shouldSetBodyClass]);\n\n return {\n colorScheme,\n preferredColorScheme,\n setToggleMode,\n setDarkMode,\n setLightMode,\n setPreferredMode,\n };\n}\n"],"names":[],"mappings":";;;;;;;;;;AAKA,MAAM,wBAAA,GAA2B,cAAA;AAoE1B,SAAS,cAAA,CAAe;AAAA,EAC7B,YAAA;AAAA,EACA,GAAA,GAAM,wBAAA;AAAA,EACN,kBAAA,GAAqB;AACvB,CAAA,GAA2B,EAAC,EAA6B;AACvD,EAAA,MAAM,uBAAuB,uBAAA,EAAwB;AACrD,EAAA,MAAM,iBAAA,GAAoB,UAAA,CAAW,YAAY,CAAA,GAC7C,cAAa,GACb,YAAA;AAEJ,EAAA,MAAM,EAAE,KAAA,EAAO,WAAA,EAAa,QAAA,EAAU,cAAA,KACpC,eAAA,CAA6B;AAAA,IAC3B,GAAA;AAAA,IACA,cAAc,iBAAA,IAAqB;AAAA,GACpC,CAAA;AAEH,EAAA,MAAM,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,cAAA,CAAe,CAAC,IAAA,KAAU,IAAA,KAAS,MAAA,GAAS,UAAU,MAAO,CAAA;AAAA,EAC/D,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAA,MAAM,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,cAAA,CAAe,MAAM,CAAA;AAAA,EACvB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAA,MAAM,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,cAAA,CAAe,OAAO,CAAA;AAAA,EACxB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAA,MAAM,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,cAAA,CAAe,oBAAoB,CAAA;AAAA,EACrC,CAAA,EAAG,CAAC,cAAA,EAAgB,oBAAoB,CAAC,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,QAAA,CAAS,IAAA,CAAK,SAAA,CAAU,GAAA,CAAI,WAAW,CAAA;AAAA,IACzC;AACA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,kBAAA,EAAoB;AACtB,QAAA,QAAA,CAAS,IAAA,CAAK,SAAA,CAAU,MAAA,CAAO,WAAW,CAAA;AAAA,MAC5C;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,WAAA,EAAa,kBAAkB,CAAC,CAAA;AAEpC,EAAA,OAAO;AAAA,IACL,WAAA;AAAA,IACA,oBAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}