docs: build carbon themes using sass

docs/src/components/GlobalHeader.svelte

@@ -7,8 +7,9 @@
     HeaderNav,
     HeaderNavItem,
     HeaderUtilities,
-    HeaderActionLink
+    HeaderActionLink,
   } from "carbon-components-svelte";
+  import Theme from "./Theme.svelte";
 </script>
 
 <Header

docs/src/components/Theme.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { onMount } from "svelte";
+  import { Select, SelectItem } from "carbon-components-svelte";
+
+  let theme = undefined;
+
+  onMount(() => {
+    theme = localStorage.getItem("theme") || "g10";
+  });
+
+  $: if (theme) {
+    localStorage.setItem("theme", theme);
+    document.documentElement.setAttribute("carbon-theme", theme);
+  }
+</script>
+
+<style>
+  :global(.bx--select-input) {
+    width: auto;
+    min-width: 0;
+  }
+</style>
+
+<Select inline labelText="Theme" bind:selected={theme}>
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>

docs/src/routes/_layout.svelte

@@ -29,6 +29,10 @@
 </script>
 
 <style>
+  :global(#sapper) {
+    min-height: 100vh;
+  }
+
   :global(.bx--content) {
     padding: 0;
   }

docs/src/routes/index.svelte

@@ -1,10 +1,7 @@
 <script>
-  import components from "./components/_components";
-  import { Link } from "carbon-components-svelte";
+  import Theme from "../components/Theme.svelte";
 </script>
 
 <h1>Welcome</h1>
 
-{#each components as component}
-  <Link href="examples/{component.title}">{component.title}</Link>
-{/each}
+<Theme />

docs/src/template.html

@@ -9,10 +9,7 @@
 
     <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
     <link rel="icon" type="image/png" href="favicon.png" />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/carbon-components/css/carbon-components.min.css"
-    />
+    <link rel="stylesheet" href="style.css" />
     <title>Carbon Components Svelte</title>
 
     %sapper.styles% %sapper.head%