From 7df75e109d3df144003b26170262229f8ffe0fb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Sun, 23 Jul 2023 23:01:21 +0200
Subject: [PATCH] feat: user themes

[deploy]
---
 icons.config.ts              |  5 ++++
 src/lib/preferences.ts       |  5 ++++
 src/routes/+layout.svelte    | 12 ++++----
 src/routes/Navigation.svelte |  2 ++
 src/routes/Theme.svelte      | 57 ++++++++++++++++++++++++++++++++++++
 5 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 src/routes/Theme.svelte

diff --git a/icons.config.ts b/icons.config.ts
index ecaa4195..6f1275e6 100644
--- a/icons.config.ts
+++ b/icons.config.ts
@@ -52,6 +52,10 @@ const config: IconsConfig = {
     "check_circle",
     "error",
     "auto_delete",
+    "format_paint",
+    "dark_mode",
+    "light_mode",
+    "palette",
   ],
   codePoints: {
     speed: "e9e4",
@@ -62,6 +66,7 @@ const config: IconsConfig = {
     counter_2: "f783",
     counter_3: "f782",
     ios_share: "e6b8",
+    light_mode: "e518",
   },
 }
 
diff --git a/src/lib/preferences.ts b/src/lib/preferences.ts
index 3d60b29c..c6c5de4f 100644
--- a/src/lib/preferences.ts
+++ b/src/lib/preferences.ts
@@ -6,6 +6,11 @@ export interface UserPreferences {
   autoConnect: boolean
 }
 
+export const theme = writable({
+  color: "#6D81C7",
+  mode: "dark" as "light" | "dark" | "auto",
+})
+
 export const userPreferences = writable<UserPreferences>({
   backup: false,
   autoConnect: true,
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 30f7fc5d..05d22d3d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -18,7 +18,7 @@
   import "tippy.js/animations/shift-away.css"
   import "tippy.js/dist/tippy.css"
   import tippy from "tippy.js"
-  import {userPreferences} from "$lib/preferences.js"
+  import {theme, userPreferences} from "$lib/preferences.js"
 
   if (browser) {
     tippy.setDefaultProps({
@@ -33,11 +33,11 @@
   export let data: LayoutServerData
 
   onMount(async () => {
-    const theme = themeFromSourceColor(argbFromHex("#6D81C7"), [
-      {name: "success", value: argbFromHex("#00ff00"), blend: true},
-    ])
-    const dark = true // window.matchMedia("(prefers-color-scheme: dark)").matches
-    applyTheme(theme, {target: document.body, dark})
+    theme.subscribe(it => {
+      const theme = themeFromSourceColor(argbFromHex(it.color))
+      const dark = it.mode === "dark" // window.matchMedia("(prefers-color-scheme: dark)").matches
+      applyTheme(theme, {target: document.body, dark})
+    })
     initLocalStorage()
 
     if (pwaInfo) {
diff --git a/src/routes/Navigation.svelte b/src/routes/Navigation.svelte
index e95f23e3..69263719 100644
--- a/src/routes/Navigation.svelte
+++ b/src/routes/Navigation.svelte
@@ -9,6 +9,7 @@
   import {canAutoConnect} from "$lib/serial/device"
   import {browser} from "$app/environment"
   import {userPreferences} from "$lib/preferences"
+  import Theme from "./Theme.svelte"
 
   const training = [
     {slug: "cpm", title: "CPM - Characters Per Minute", icon: "music_note"},
@@ -70,6 +71,7 @@
     >
       cable
     </button>
+    <button title="Theme" use:popup={Theme} class="icon">format_paint</button>
     <a href="/stats/" title="Statistics" class="icon account">person</a>
   </div>
 </nav>
diff --git a/src/routes/Theme.svelte b/src/routes/Theme.svelte
new file mode 100644
index 00000000..a8071864
--- /dev/null
+++ b/src/routes/Theme.svelte
@@ -0,0 +1,57 @@
+<script>
+  import {theme} from "$lib/preferences"
+</script>
+
+<section>
+  <input type="color" bind:value={$theme.color} />
+  <button
+    class="icon"
+    on:click={() => {
+      $theme.mode = $theme.mode === "light" ? "dark" : "light"
+    }}
+  >
+    {#if $theme.mode === "light"}
+      light_mode
+    {:else if $theme.mode === "dark"}
+      dark_mode
+    {:else}
+      TODO
+    {/if}
+  </button>
+</section>
+
+<style lang="scss">
+  section {
+    display: flex;
+    gap: 16px;
+  }
+
+  button,
+  input[type="color"] {
+    cursor: pointer;
+
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: 24px;
+    block-size: 24px;
+    margin: 0;
+    padding: 0;
+
+    color: inherit;
+
+    background: transparent;
+    border: none;
+    border-radius: 50%;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+    }
+  }
+</style>