feat: Enhance theme management with type attribute #78

EveSunMaple · EveSunMaple · commit a71d09facf20 · 2025-04-19T10:19:45.000+08:00
- Added `data-theme-type` attribute to the document element to indicate the current theme type (light or dark).
- Updated theme toggle functionality to set the theme type based on user selection and system preferences.
- Modified global styles to prevent Chrome's auto dark theme interference by configuring color schemes based on the theme type.
diff --git a/src/components/widgets/ThemeToggle.astro b/src/components/widgets/ThemeToggle.astro
@@ -62,6 +62,11 @@ const { className = "" } = Astro.props as ThemeToggleProps;
 
       // Set new theme
       document.documentElement.setAttribute("data-theme", newTheme);
+
+      // Set theme type based on which theme is active
+      const themeType = newTheme === SITE_THEME.dark ? "dark" : "light";
+      document.documentElement.setAttribute("data-theme-type", themeType);
+
       localStorage.setItem("theme", newTheme);
 
       // Update icons for all theme toggles on the page
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -14,7 +14,7 @@ const { title, image, headings = [], showTOC = false } = Astro.props;
 ---
 
 <!doctype html>
-<html lang={SITE_LANGUAGE} class="bg-base-300" data-theme={SITE_THEME.light}>
+<html lang={SITE_LANGUAGE} class="bg-base-300" data-theme={SITE_THEME.light} data-theme-type="light">
   <head>
     <ClientRouter />
     <ElementCrossing />
@@ -40,12 +40,21 @@ const { title, image, headings = [], showTOC = false } = Astro.props;
         // Apply theme to document
         document.documentElement.setAttribute("data-theme", theme);
 
+        // Set theme type based on which theme is active
+        const themeType = theme === SITE_THEME.dark ? "dark" : "light";
+        document.documentElement.setAttribute("data-theme-type", themeType);
+
         // Listen for system preference changes
         window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
           // Only update if user hasn't explicitly set a theme preference
           if (!localStorage.getItem("theme")) {
             const newTheme = e.matches ? SITE_THEME.dark : SITE_THEME.light;
             document.documentElement.setAttribute("data-theme", newTheme);
+
+            // Update theme type attribute when system preference changes
+            const newThemeType = e.matches ? "dark" : "light";
+            document.documentElement.setAttribute("data-theme-type", newThemeType);
+
             localStorage.setItem("theme", newTheme);
           }
         });
@@ -83,6 +92,10 @@ const { title, image, headings = [], showTOC = false } = Astro.props;
         if (storedTheme) {
           // Apply the stored theme to ensure it persists during navigation
           document.documentElement.setAttribute("data-theme", storedTheme);
+
+          // Set theme type based on which theme is active
+          const themeType = storedTheme === SITE_THEME.dark ? "dark" : "light";
+          document.documentElement.setAttribute("data-theme-type", themeType);
         }
       });
     </script>
diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -3,6 +3,16 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Color scheme configuration to prevent Chrome's auto dark theme */
+:root,
+[data-theme-type="light"] {
+  color-scheme: light dark; /* This prevents Chrome's auto dark theme from taking effect */
+}
+
+[data-theme-type="dark"] {
+  color-scheme: dark;
+}
+
 /* Global styles with nesting support */
 html {
   @apply scroll-smooth;
