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 {
+  import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
-    applyTheme,
-    argbFromHex,
-    hexFromArgb,
-    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"), [
+  /** @type {import('./$types').LayoutServerData} */
-    {name: "success", value: argbFromHex("#00ff00"), blend: true},
+  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")
 }

static/icon.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg version="1.1" width="144" height="144" viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="72" cy="72" r="44" fill="black" />
+    <text x="72" y="82" font-size="36" font-weight="900" font-family="monospace" text-anchor="middle" dominant-baseline="middle" fill="white">i/o</text>
+</svg>

svelte.config.js

@@ -5,6 +5,7 @@ import preprocess from "svelte-preprocess"
 const config = {
   preprocess: [preprocess()],
   kit: {
+    inlineStyleThreshold: 8192,
     paths: {
       relative: false,
     },

vite.config.js

@@ -1,6 +1,8 @@
 import {sveltekit} from "@sveltejs/kit/vite"
 import {defineConfig} from "vite"
 import {SvelteKitPWA} from "@vite-pwa/sveltekit"
+// noinspection ES6PreferShortImport
+// import {themeColor} from "./src/lib/style/theme.server.js"
 
 export default defineConfig({
   plugins: [
@@ -10,6 +12,19 @@ export default defineConfig({
         adapterFallback: "/200.html",
         trailingSlash: "never",
       },
+      includeAssets: ["favicon.png"],
+      manifest: {
+        name: "dot i/o",
+        id: "dot_io_v2",
+        // theme_color: themeColor,
+        icons: [
+          {
+            src: "icon.svg",
+            sizes: "144x144",
+            type: "image/svg+xml",
+          },
+        ],
+      },
       base: "/",
       workbox: {
         modifyURLPrefix: {