feat: user themes

[deploy]

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,

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) {

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>

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>