chore(docs): color-scheme reflects theme

carbon-design-system · Dec 30, 2023 · 983b20f · 983b20f
1 parent 44d3083
commit 983b20f
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/docs/src/components/index.svelte b/docs/src/components/index.svelte
@@ -29,6 +29,12 @@
   );
   $: mounted = typeof document !== "undefined";
   $: code = `<script>\n  import ${moduleName} from "carbon-pictograms-svelte/lib/${moduleName}.svelte";\n<\/script>\n\n<${moduleName} />`;
+  $: if (mounted) {
+    document.documentElement.style.setProperty(
+      "color-scheme",
+      ["white", "g10"].includes(theme) ? "light" : "dark"
+    );
+  }
 </script>
 
 <FocusKey element={ref} selectText />

diff --git a/docs/src/constants.ts b/docs/src/constants.ts
@@ -1 +1 @@
-export const VERSION = __VERSION;
+export const VERSION = __VERSION;
diff --git a/docs/src/env.d.ts b/docs/src/env.d.ts
@@ -1,3 +1,3 @@
 /// <reference types="astro/client" />
 
-declare const __VERSION: string;
+declare const __VERSION: string;
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -19,6 +19,7 @@ import Home from "../components/index.svelte";
 
         if (["white", "g10", "g80", "g90", "g100"].includes(theme)) {
           document.documentElement.setAttribute("theme", theme);
+          document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark");
         }
       } catch (e) {}
     </script>