diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 74a67da3..96b75171 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -10,6 +10,7 @@
   } from "carbon-components-svelte";
   import Code16 from "carbon-icons-svelte/lib/Code16";
   import { page, metatags } from "@sveltech/routify";
+  import { onMount } from "svelte";
   import { theme } from "../store";
 
   export let component = $page.title;
@@ -17,6 +18,14 @@
 
   metatags.title = $page.title;
 
+  onMount(() => {
+    const currentTheme = window.location.search.split("?theme=")[1];
+
+    if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
+      theme.set(currentTheme);
+    }
+  });
+
   // TODO: [refactor] read from package.json value
   $: sourceCode = `https://github.com/IBM/carbon-components-svelte/tree/master/src/${
     source || `${$page.title}/${$page.title}.svelte`