From f9b2f69966530b83959dfeba136a2a7d0c6dce56 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 7 Sep 2020 14:09:59 -0700
Subject: [PATCH] chore(examples): extract Theme component and persist to
 localStorage

---
 examples/webpack/src/App.svelte               |  4 +-
 examples/webpack/src/components/Header.svelte | 13 +++++
 examples/webpack/src/components/Theme.svelte  | 50 ++++++++++++++++++-
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/examples/webpack/src/App.svelte b/examples/webpack/src/App.svelte
index 525a2d6b..9da89994 100644
--- a/examples/webpack/src/App.svelte
+++ b/examples/webpack/src/App.svelte
@@ -15,10 +15,10 @@
   import Header from "./components/Header.svelte";
   import Theme from "./components/Theme.svelte";
 
-  let theme = "white";
+  let theme = "g10";
 </script>
 
-<Theme theme="{theme}">
+<Theme persist bind:theme>
   <Header />
   <Content style="background: none; padding: 1rem">
     <Grid>
diff --git a/examples/webpack/src/components/Header.svelte b/examples/webpack/src/components/Header.svelte
index 4933f83f..a7916915 100644
--- a/examples/webpack/src/components/Header.svelte
+++ b/examples/webpack/src/components/Header.svelte
@@ -8,6 +8,19 @@
   import Notification20 from "carbon-icons-svelte/lib/Notification20";
   import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
   import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
+  import { getContext } from "svelte";
+
+  const ctx = getContext("Theme");
+
+  $: if (ctx) {
+    ctx.dark.subscribe((value) => {
+      console.log("dark mode?", value);
+    });
+    ctx.light.subscribe((value) => {
+      console.log("light mode?", value);
+    });
+    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
+  }
 </script>
 
 <Header company="IBM" platformName="Carbon Components Svelte" href="/">
diff --git a/examples/webpack/src/components/Theme.svelte b/examples/webpack/src/components/Theme.svelte
index 6ba08aac..6c6b73fd 100644
--- a/examples/webpack/src/components/Theme.svelte
+++ b/examples/webpack/src/components/Theme.svelte
@@ -1,7 +1,55 @@
 <script>
+  export let persist = false;
+  export let persistKey = "theme";
   export let theme = "white";
+  export const themes = ["white", "g10", "g90", "g100"];
 
-  $: document.documentElement.setAttribute("theme", theme);
+  import { onMount, afterUpdate, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+
+  const isValidTheme = (value) => themes.includes(value);
+  const isDark = (value) =>
+    isValidTheme(value) && (value === "g90" || value === "g100");
+
+  const dark = writable(isDark(theme));
+  const light = derived(dark, (_) => !_);
+
+  setContext("Theme", {
+    updateVar: (name, value) => {
+      document.documentElement.style.setProperty(name, value);
+    },
+    dark,
+    light,
+  });
+
+  onMount(() => {
+    try {
+      const persisted_theme = localStorage.getItem(persistKey);
+
+      if (isValidTheme(persisted_theme)) {
+        theme = persisted_theme;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  afterUpdate(() => {
+    if (isValidTheme(theme)) {
+      document.documentElement.setAttribute("theme", theme);
+      if (persist) {
+        localStorage.setItem(persistKey, theme);
+      }
+    } else {
+      console.warn(
+        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
+          themes
+        )}`
+      );
+    }
+  });
+
+  $: dark.set(isDark(theme));
 </script>
 
 <slot />