From abc2f0020f4da63b957ecbe67d66453b5efbf5a4 Mon Sep 17 00:00:00 2001
From: Zai Shi <zaishi00@outlook.com>
Date: Fri, 6 Sep 2024 04:38:59 +0200
Subject: [PATCH] read prefers-color-scheme (#225)

---
 packages/stack/src/utils/browser-script.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/stack/src/utils/browser-script.tsx b/packages/stack/src/utils/browser-script.tsx
index ba89cff8e..c308780a2 100644
--- a/packages/stack/src/utils/browser-script.tsx
+++ b/packages/stack/src/utils/browser-script.tsx
@@ -16,12 +16,22 @@ const script = () => {
     return null;
   };
 
+  const setTheme = (mode: 'dark' | 'light') => {
+    document.documentElement.setAttribute('data-stack-theme', mode);
+  };
+
   const copyFromColorScheme = () => {
     const colorScheme = getComputedStyle(document.documentElement).getPropertyValue('color-scheme');
+
     if (colorScheme) {
+      if (colorScheme === 'normal') {
+        const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        setTheme(isDark ? 'dark' : 'light');
+        return true;
+      }
       const mode = getColorMode(colorScheme);
       if (mode) {
-        document.documentElement.setAttribute('data-stack-theme', mode);
+        setTheme(mode);
         return true;
       }
     }
@@ -34,7 +44,7 @@ const script = () => {
       if (colorTheme) {
         const mode = getColorMode(colorTheme);
         if (mode) {
-          document.documentElement.setAttribute('data-stack-theme', mode);
+          setTheme(mode);
           return true;
         }
       }