From b8b67a2af90b6c34bcd321acf1d303d777ccb1b7 Mon Sep 17 00:00:00 2001
From: Riley S <substitute@pocketdevs.org>
Date: Tue, 6 Jul 2021 03:26:21 -0400
Subject: [PATCH] Better darkmode toggle

---
 src/App.svelte                      |  8 +++-----
 src/Components/ThemeToggle.svelte   | 30 ++++++++++++++++++++++++++++
 src/Layout/Header/HeaderItem.svelte |  2 +-
 src/Layout/MainLayout.svelte        |  2 ++
 src/ModeSwitcher.svelte             | 31 -----------------------------
 5 files changed, 36 insertions(+), 37 deletions(-)
 create mode 100644 src/Components/ThemeToggle.svelte
 delete mode 100644 src/ModeSwitcher.svelte

diff --git a/src/App.svelte b/src/App.svelte
index f9e8589..1b780c6 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-	import ModeSwitcher from './ModeSwitcher.svelte';
-	import Tailwindcss from './Tailwindcss.svelte';
-    import { Router } from "@roxi/routify";
-    import { routes } from "../.routify/routes";
+    import Tailwindcss from './Tailwindcss.svelte';
+    import {Router} from "@roxi/routify";
+    import {routes} from "../.routify/routes";
 </script>
 
 <Tailwindcss />
-<ModeSwitcher />
 <Router {routes} />
diff --git a/src/Components/ThemeToggle.svelte b/src/Components/ThemeToggle.svelte
new file mode 100644
index 0000000..b773ed4
--- /dev/null
+++ b/src/Components/ThemeToggle.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import Fa from 'svelte-fa'
+    import {faSun, faMoon} from '@fortawesome/free-regular-svg-icons'
+
+    let darkMode = false;
+    const THEME_KEY = 'themePreference';
+
+    function setDarkTheme(dark: boolean) {
+        darkMode = dark;
+        document.documentElement.classList.toggle('dark', darkMode);
+    }
+
+    function toggleMode() {
+        setDarkTheme(!darkMode);
+        window.localStorage.setItem(THEME_KEY, darkMode ? 'dark' : 'light');
+    }
+
+    onMount(() => {
+        const theme = window.localStorage.getItem(THEME_KEY);
+        setDarkTheme(theme === 'dark' || (theme == null && window.matchMedia('(prefers-color-scheme: dark)').matches))
+    });
+</script>
+<div on:click={toggleMode}>
+    {#if darkMode}
+        <Fa fw icon={faMoon} />
+    {:else}
+        <Fa fw icon={faSun} />
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/Layout/Header/HeaderItem.svelte b/src/Layout/Header/HeaderItem.svelte
index 94940b4..9f51f68 100644
--- a/src/Layout/Header/HeaderItem.svelte
+++ b/src/Layout/Header/HeaderItem.svelte
@@ -1,6 +1,6 @@
 <script></script>
 
-<li><slot /></li>
+<li {...$$restProps}><slot /></li>
 
 <style>
     li { @apply p-2; }
diff --git a/src/Layout/MainLayout.svelte b/src/Layout/MainLayout.svelte
index 164a487..d81dc01 100644
--- a/src/Layout/MainLayout.svelte
+++ b/src/Layout/MainLayout.svelte
@@ -6,6 +6,7 @@
     import Fa from 'svelte-fa'
     import {faImage} from '@fortawesome/free-regular-svg-icons'
     import HeaderItem from "./Header/HeaderItem.svelte";
+    import ThemeToggle from "../Components/ThemeToggle.svelte";
 </script>
 
 <div class="container">
@@ -18,6 +19,7 @@
         <HeaderItem>Comments</HeaderItem>
         <slot name="header" />
         <HeaderItem>END ITEM</HeaderItem>
+        <HeaderItem class="ml-auto"><ThemeToggle/></HeaderItem>
     </Header>
     <aside>
         <SidebarItem title="Navigation">YO YO</SidebarItem>
diff --git a/src/ModeSwitcher.svelte b/src/ModeSwitcher.svelte
deleted file mode 100644
index 1c24db2..0000000
--- a/src/ModeSwitcher.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  let darkMode = false;
-  const THEME_KEY = 'themePreference';
-
-  function setDarkTheme(dark: boolean) {
-    darkMode = dark;
-    document.documentElement.classList.toggle('dark', darkMode);
-  }
-
-  function toggleMode() {
-    setDarkTheme(!darkMode);
-    window.localStorage.setItem(THEME_KEY, darkMode ? 'dark' : 'light');
-  }
-
-  onMount(() => {
-    const theme = window.localStorage.getItem(THEME_KEY);
-    if (theme === 'dark') {
-      setDarkTheme(true);
-    } else if (theme == null && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      setDarkTheme(true);
-    }
-  });
-</script>
-<div class="absolute top-0 right-0 w-8 h-8 p-2" on:click={toggleMode}>
-  {#if darkMode}
-  <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M279.135 512c78.756 0 150.982-35.804 198.844-94.775 28.27-34.831-2.558-85.722-46.249-77.401-82.348 15.683-158.272-47.268-158.272-130.792 0-48.424 26.06-92.292 67.434-115.836 38.745-22.05 28.999-80.788-15.022-88.919A257.936 257.936 0 0 0 279.135 0c-141.36 0-256 114.575-256 256 0 141.36 114.576 256 256 256zm0-464c12.985 0 25.689 1.201 38.016 3.478-54.76 31.163-91.693 90.042-91.693 157.554 0 113.848 103.641 199.2 215.252 177.944C402.574 433.964 344.366 464 279.135 464c-114.875 0-208-93.125-208-208s93.125-208 208-208z"></path></svg>
-  {:else}
-  <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="sun" class="svg-inline--fa fa-sun fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M494.2 221.9l-59.8-40.5 13.7-71c2.6-13.2-1.6-26.8-11.1-36.4-9.6-9.5-23.2-13.7-36.2-11.1l-70.9 13.7-40.4-59.9c-15.1-22.3-51.9-22.3-67 0l-40.4 59.9-70.8-13.7C98 60.4 84.5 64.5 75 74.1c-9.5 9.6-13.7 23.1-11.1 36.3l13.7 71-59.8 40.5C6.6 229.5 0 242 0 255.5s6.7 26 17.8 33.5l59.8 40.5-13.7 71c-2.6 13.2 1.6 26.8 11.1 36.3 9.5 9.5 22.9 13.7 36.3 11.1l70.8-13.7 40.4 59.9C230 505.3 242.6 512 256 512s26-6.7 33.5-17.8l40.4-59.9 70.9 13.7c13.4 2.7 26.8-1.6 36.3-11.1 9.5-9.5 13.6-23.1 11.1-36.3l-13.7-71 59.8-40.5c11.1-7.5 17.8-20.1 17.8-33.5-.1-13.6-6.7-26.1-17.9-33.7zm-112.9 85.6l17.6 91.2-91-17.6L256 458l-51.9-77-90.9 17.6 17.6-91.2-76.8-52 76.8-52-17.6-91.2 91 17.6L256 53l51.9 76.9 91-17.6-17.6 91.1 76.8 52-76.8 52.1zM256 152c-57.3 0-104 46.7-104 104s46.7 104 104 104 104-46.7 104-104-46.7-104-104-104zm0 160c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"></path></svg>
-  {/if}
-</div>
\ No newline at end of file