From 5c9bc7d6d7327b404960eae45ffd03d73d2622f4 Mon Sep 17 00:00:00 2001 From: refansa Date: Sat, 3 Aug 2024 11:52:59 +0700 Subject: [PATCH] fix: theme switch on system theme --- src/components/theme-switch.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/theme-switch.tsx b/src/components/theme-switch.tsx index d5782a4..102bed3 100644 --- a/src/components/theme-switch.tsx +++ b/src/components/theme-switch.tsx @@ -25,7 +25,7 @@ export function ThemeSwitch({ }: Props) { let REACT_TOGGLE_DARK_MODE_GLOBAL_ID = starterId - const { theme, setTheme } = useTheme() + const { theme, systemTheme, setTheme } = useTheme() const [id, setId] = useState(REACT_TOGGLE_DARK_MODE_GLOBAL_ID) @@ -34,6 +34,13 @@ export function ThemeSwitch({ setId(REACT_TOGGLE_DARK_MODE_GLOBAL_ID) }, [setId]) + useEffect(() => { + // If the theme is currently using system theme, set the theme according to the system theme value. + if (theme === 'system') { + setTheme(systemTheme as 'dark' | 'light') + } + }, []) + const properties = { circle: { r: theme === 'dark' ? 9 : 5,