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,