style(docs): color-scheme reflects theme (carbon-design-system#1874)

brunnerh · Dec 30, 2023 · 1600775 · 1600775
1 parent fe0b0c2
commit 1600775
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -5,6 +5,16 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Carbon Components Svelte</title>
+    <script>
+      try {
+        const theme = localStorage.getItem("theme");
+
+        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>
   </head>
   <body>
     <script type="module" src="/src/index.js"></script>

diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
@@ -34,10 +34,11 @@
   $: multiple = api_components.length > 1;
 
   onMount(() => {
-    const currentTheme = window.location.search.split("?theme=")[1];
+    const searchParams = new URLSearchParams(window.location.search);
+    const current_theme = searchParams.get("theme");
 
-    if (["white", "g10", "g80", "g90", "g100"].includes(currentTheme)) {
-      theme.set(currentTheme);
+    if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
+      theme.set(current_theme);
     }
   });
 

diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
@@ -80,7 +80,14 @@
     }
   }}" />
 
-<Theme persist bind:theme="{$theme}">
+<Theme
+  persist
+  bind:theme="{$theme}"
+  on:update="{(e) => {
+    const theme = e.detail.theme;
+    document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark");
+  }}"
+>
   <Header
     aria-label="Navigation"
     href="{$url('/')}"

diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte
@@ -8,9 +8,18 @@
     };
   });
 
-  // TODO: [refactor] parse search parameters more reliably
-  $: currentTheme = window.location.search.split("?theme=")[1];
-  $: document.documentElement.setAttribute("theme", currentTheme);
+  $: {
+    const searchParams = new URLSearchParams(window.location.search);
+    const current_theme = searchParams.get("theme");
+
+    // NOTE: we *do not* want to persist the theme as this can
+    // conflict with how the iframe is displayed in the docs.
+    // Instead, we want the theme to be overridden in the standalone page.
+    if ([ "white", "g10", "g80", "g90", "g100" ].includes(current_theme)) {
+      document.documentElement.setAttribute("theme", current_theme)
+      document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(current_theme) ? "light" : "dark");
+    }
+  }
 </script>
 
 <slot />