pwa adjustments

src/lib/style/theme.server.js

@@ -0,0 +1,10 @@
+import {argbFromHex, hexFromArgb, themeFromSourceColor} from "@material/material-color-utilities"
+
+export const themeBase = "#6D81C7"
+export const themeSuccessBase = "#00ff00"
+
+const theme = themeFromSourceColor(argbFromHex(themeBase), [
+  {name: "success", value: argbFromHex(themeSuccessBase), blend: true},
+])
+
+export const themeColor = hexFromArgb(theme.schemes.dark.background)

src/routes/+layout.server.js

@@ -0,0 +1,10 @@
+import {themeBase, themeColor, themeSuccessBase} from "$lib/style/theme.server.js"
+
+/** @type {import("./$types").LayoutServerLoad} */
+export async function load() {
+  return {
+    themeSuccessBase,
+    themeBase,
+    themeColor,
+  }
+}

src/routes/+layout.svelte

@@ -2,22 +2,19 @@
   import "$lib/style/fonts/noto-sans-mono.scss"
   import "$lib/style/fonts/material-symbols-rounded.scss"
   import {onMount} from "svelte"
-  import {
-    applyTheme,
-    argbFromHex,
-    hexFromArgb,
-    themeFromSourceColor,
-  } from "@material/material-color-utilities"
+  import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
   import Navigation from "$lib/components/Navigation.svelte"
   import {hasSerialPermission} from "$lib/serial/device.js"
   import {initSerial} from "$lib/serial/connection.js"
   import {pwaInfo} from "virtual:pwa-info"
 
-  const theme = themeFromSourceColor(argbFromHex("#6D81C7"), [
-    {name: "success", value: argbFromHex("#00ff00"), blend: true},
-  ])
+  /** @type {import('./$types').LayoutServerData} */
+  export let data
 
   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})
 
@@ -46,7 +43,7 @@
   {@html webManifestLink}
   <title>dot i/o</title>
   <meta name="description" content="Tool for CharaChorder devices" />
-  <meta name="theme-color" content={hexFromArgb(theme.schemes.dark.background)} />
+  <meta name="theme-color" content={data.themeColor} />
 </svelte:head>
 
 <Navigation />

src/routes/+page.js

@@ -2,5 +2,5 @@ import {redirect} from "@sveltejs/kit"
 
 /** @type {import("./$types").PageLoad} */
 export function load() {
-  throw redirect(300, "/config")
+  throw redirect(302, "/config")
 }

src/routes/config/+page.js

@@ -2,5 +2,5 @@ import {redirect} from "@sveltejs/kit"
 
 /** @type {import("./$types").PageLoad} */
 export function load() {
-  throw redirect(300, "/config/chords")
+  throw redirect(302, "/config/chords")
 }