docs(theme): use Theme component from library (#1700)

docs/src/components/Theme.svelte

@@ -1,30 +0,0 @@
-<script>
-  export let persist = false;
-  export let persistKey = "carbon-theme";
-  export const themes = ["white", "g10", "g80", "g90", "g100"];
-
-  import { onMount, afterUpdate } from "svelte";
-  import { theme } from "../store";
-
-  const isValidTheme = (value) => themes.includes(value);
-
-  onMount(() => {
-    try {
-      const persisted_theme = localStorage.getItem(persistKey);
-      if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
-    } catch (e) {}
-  });
-
-  afterUpdate(() => {
-    if (isValidTheme($theme)) {
-      document.documentElement.setAttribute("theme", $theme);
-      if (persist) {
-        try {
-          localStorage.setItem(persistKey, $theme);
-        } catch (e) {}
-      }
-    }
-  });
-</script>
-
-<slot />

docs/src/pages/_layout.svelte

@@ -12,10 +12,11 @@
     SideNav,
     SideNavItems,
     SideNavMenuItem,
+    Theme,
     Tag,
   } from "carbon-components-svelte";
   import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
-  import Theme from "../components/Theme.svelte";
+  import { theme } from "../store";
 
   const deprecated = [];
   const new_components = [];
@@ -38,7 +39,7 @@
 <!-- routify:options bundle=true -->
 <svelte:window bind:innerWidth />
 
-<Theme persist>
+<Theme persist bind:theme="{$theme}">
   <Header
     aria-label="Navigation"
     href="{$url('/')}"