@0610studio/zs-ui 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeProvider.d.ts","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+E,MAAM,OAAO,CAAC;AAKpG,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAkB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEhE,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"useThemeProvider.d.ts","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+E,MAAM,OAAO,CAAC;AAKpG,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAkB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEhE,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,uBAAuB,CAAC;IACpC,SAAS,EAAE,eAAe,CAAC;CAC5B;AAED,MAAM,WAAW,OAAQ,SAAQ,KAAK;IACpC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,wBAAwB,EAAE,OAAO,CAAC;IAClC,uBAAuB,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,eAAO,MAAM,QAAQ,kBAMpB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsFtD,CAAA"}
|
|
@@ -13,26 +13,31 @@ export const useTheme = () => {
|
|
|
13
13
|
}
|
|
14
14
|
return context;
|
|
15
15
|
};
|
|
16
|
-
export const ThemeProvider = ({ themeFonts, children }) => {
|
|
16
|
+
export const ThemeProvider = ({ themeFonts, children, isDarkModeEnabled = true }) => {
|
|
17
17
|
const systemColorScheme = useColorScheme(); // 시스템 다크 모드 감지
|
|
18
|
-
const [isUsingSystemColorScheme, setUseSystemColorScheme] = useState(true);
|
|
19
|
-
const [mode, setMode] = useState(systemColorScheme === 'dark' ? 'dark' : 'light');
|
|
18
|
+
const [isUsingSystemColorScheme, setUseSystemColorScheme] = useState(isDarkModeEnabled ? true : false);
|
|
19
|
+
const [mode, setMode] = useState(isDarkModeEnabled ? (systemColorScheme === 'dark' ? 'dark' : 'light') : 'light');
|
|
20
20
|
// AsyncStorage에서 시스템 모드 사용 설정 값 로드
|
|
21
21
|
useEffect(() => {
|
|
22
22
|
const loadSettings = async () => {
|
|
23
23
|
let isMounted = true;
|
|
24
24
|
try {
|
|
25
|
-
const storedUseSystemColorScheme = await AsyncStorage.getItem('useSystemColorScheme');
|
|
26
|
-
const storedMode = await AsyncStorage.getItem('themeMode');
|
|
27
25
|
if (isMounted) {
|
|
28
|
-
if (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
26
|
+
if (isDarkModeEnabled) {
|
|
27
|
+
const storedUseSystemColorScheme = await AsyncStorage.getItem('useSystemColorScheme');
|
|
28
|
+
const storedMode = await AsyncStorage.getItem('themeMode');
|
|
29
|
+
if (storedUseSystemColorScheme !== null) {
|
|
30
|
+
setUseSystemColorScheme(storedUseSystemColorScheme === 'true');
|
|
31
|
+
}
|
|
32
|
+
if (storedMode) {
|
|
33
|
+
setMode(storedMode === 'dark' ? 'dark' : 'light');
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
setMode(systemColorScheme === 'dark' ? 'dark' : 'light');
|
|
37
|
+
}
|
|
33
38
|
}
|
|
34
39
|
else {
|
|
35
|
-
setMode(
|
|
40
|
+
setMode('light');
|
|
36
41
|
}
|
|
37
42
|
}
|
|
38
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeProvider.js","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpG,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,YAAY,MAAM,2CAA2C,CAAC;AACrE,OAAO,KAAK,aAAa,MAAM,qBAAqB,CAAC;AACrD,OAAO,OAAO,MAAM,kBAAkB,CAAC;AAEvC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,SAA8B,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"useThemeProvider.js","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useMemo, useState, useEffect, useCallback } from 'react';\nimport { Platform, useColorScheme } from 'react-native';\nimport AsyncStorage from '@react-native-async-storage/async-storage';\nimport * as NavigationBar from 'expo-navigation-bar';\nimport palette from '../theme/palette';\nimport { Theme, ThemeFonts, TypographyVariantsProps } from '../theme/types';\nimport typography from '../theme/typography';\nimport elevation, { ElevationStyles } from '../theme/elevation';\n\nexport interface ThemeProviderProps {\n themeFonts?: ThemeFonts;\n children: React.ReactNode;\n isDarkModeEnabled?: boolean;\n}\n\nexport interface ThemeProps {\n palette: Palette;\n typography: TypographyVariantsProps;\n elevation: ElevationStyles;\n}\n\nexport interface Palette extends Theme {\n mode: 'light' | 'dark';\n isUsingSystemColorScheme: boolean;\n setUseSystemColorScheme: (useSystem: boolean) => void;\n toggleTheme: () => void;\n}\n\nconst ThemeContext = createContext<ThemeProps | null>(null);\n\nexport const useTheme = () => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ themeFonts, children, isDarkModeEnabled = true }) => {\n const systemColorScheme = useColorScheme(); // 시스템 다크 모드 감지\n const [isUsingSystemColorScheme, setUseSystemColorScheme] = useState(isDarkModeEnabled ? true : false);\n const [mode, setMode] = useState<'light' | 'dark'>(isDarkModeEnabled ? (systemColorScheme === 'dark' ? 'dark' : 'light') : 'light');\n\n // AsyncStorage에서 시스템 모드 사용 설정 값 로드\n useEffect(() => {\n const loadSettings = async () => {\n let isMounted = true;\n try {\n if (isMounted) {\n if (isDarkModeEnabled) {\n const storedUseSystemColorScheme = await AsyncStorage.getItem('useSystemColorScheme');\n const storedMode = await AsyncStorage.getItem('themeMode');\n\n if (storedUseSystemColorScheme !== null) {\n setUseSystemColorScheme(storedUseSystemColorScheme === 'true');\n }\n if (storedMode) {\n setMode(storedMode === 'dark' ? 'dark' : 'light');\n } else {\n setMode(systemColorScheme === 'dark' ? 'dark' : 'light');\n }\n } else {\n setMode('light');\n }\n }\n } catch (error) {\n console.error('Failed to load theme settings', error);\n }\n\n return () => {\n isMounted = false;\n };\n };\n\n loadSettings();\n }, []);\n\n // 시스템 다크 모드 변경에 따른 효과 적용\n useEffect(() => {\n if (isUsingSystemColorScheme) {\n setMode(systemColorScheme === 'dark' ? 'dark' : 'light');\n }\n }, [isUsingSystemColorScheme]);\n\n // 안드로이드 하단 제스쳐 영역 스타일\n useEffect(() => {\n if (Platform.OS === 'android') {\n NavigationBar.setButtonStyleAsync(mode);\n NavigationBar.setBackgroundColorAsync(palette({ mode }).background.base)\n }\n }, [mode])\n\n // 테마 토글 함수\n const toggleTheme = useCallback(async () => {\n setUseSystemColorScheme(false); // 사용자 지정 모드로 전환\n setMode((prevMode) => {\n const newMode = prevMode === 'light' ? 'dark' : 'light';\n AsyncStorage.setItem('themeMode', newMode); // 로컬스토리지에 저장\n return newMode;\n });\n }, []);\n\n // 시스템 모드 사용 설정 변경 함수\n const handleSetUseSystemColorScheme = useCallback(async (useSystem: boolean) => {\n setUseSystemColorScheme(useSystem);\n await AsyncStorage.setItem('useSystemColorScheme', useSystem.toString());\n }, []);\n\n const themeValue = useMemo(() => ({\n palette: {\n isUsingSystemColorScheme,\n setUseSystemColorScheme: handleSetUseSystemColorScheme,\n toggleTheme,\n ...palette({ mode }), // 선택된 모드에 따른 팔레트 적용\n },\n typography: typography({ themeFonts }),\n elevation: elevation(palette({ mode }))\n }), [mode, isUsingSystemColorScheme, typography, themeFonts]);\n\n return (\n <ThemeContext.Provider value={themeValue}>\n {children}\n </ThemeContext.Provider>\n );\n}\n"]}
|