add color theme

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@yusurko/vigil",
 	"private": true,
-	"version": "0.1.0-dev40",
+	"version": "0.1.0-dev41",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

src/lib/HomeMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { RiHome2Line } from 'svelte-remixicon';
+  import { RiHome2Line, RiSettings2Line, RiSettingsLine } from 'svelte-remixicon';
 
 </script>
 
@@ -7,4 +7,7 @@
   <li>
     <a href="/"><RiHome2Line /> Home</a>
   </li>
+  <li>
+    <a href="/settings"><RiSettings2Line /> Settings</a>
+  </li>
 </ul>

src/lib/backend.ts

@@ -39,7 +39,8 @@ export type ServerHealth = {
     post_count: number,
     user_count: number,
     me: string | null,
-    csrf_token?: string
+    csrf_token?: string,
+    color_theme?: number
 };
 
 

src/lib/globals.svelte.ts

@@ -3,21 +3,23 @@ import type { ServerHealth, UserEntry } from "$lib/backend";
 
 let health : {
     app_name: string, version: string, post_count: number,
-    user_count: number, me: null | UserEntry
+    user_count: number, me: null | UserEntry, color_theme: number
 } = $state({
     app_name: 'app_name',
     version: "?.?",
     post_count: NaN,
     user_count: NaN,
-    me: null
+    me: null,
+    color_theme: 0
 });
 
 
-export function setHealth ({ name, version, post_count, user_count }: ServerHealth) {
+export function setHealth ({ name, version, post_count, user_count, color_theme = 0 }: ServerHealth) {
     health.app_name = name;
     health.version = version;
     health.post_count = post_count;
     health.user_count = user_count;
+    health.color_theme = color_theme;
 }
 
 
@@ -50,3 +52,7 @@ export function activeUserCount (): number{
 export async function sleep (ms: number): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
+
+export function getColorThemeCode (): number {
+    return health.color_theme;
+}

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { getColorThemeCode } from '$lib/globals.svelte';
 import { version } from '$app/environment';
 import type { Snippet } from 'svelte';
 import type { ServerHealth, UserEntry } from '$lib/backend';
@@ -17,6 +18,11 @@ let { data, children } : {
 let {me} = $derived(data);
 
 const flash = getFlash(page);
+
+let colorThemeCode = $derived(getColorThemeCode());
+let colorSchemeCode =  $derived(Math.floor(colorThemeCode / 256));
+let colorScheme = $derived(colorSchemeCode == 1? 'dark': colorSchemeCode == 2? 'light': 'system');
+let colorThemeCls = $derived(`color-scheme-${colorScheme} color-theme-${colorThemeCode % 256}`);
 </script>
 
 <svelte:head>
@@ -30,23 +36,26 @@ const flash = getFlash(page);
   <!-- end SEO tags -->
 </svelte:head>
 
-<header>
+<global-wrapper class={colorThemeCls}>
-  <h1>
+  <header>
-    <a href="/">{appName()}</a>
+    <h1>
-  </h1>
+      <a href="/">{appName()}</a>
-  <!-- .metanav -->
+    </h1>
-  <MetaNav user={me} />
+    <!-- .metanav -->
-</header>
+    <MetaNav user={me} />
+  </header>
 
-<main>
+  <main>
-  {#if $flash}
+    {#if $flash}
-    <FlashMessage message={$flash?.message}/>
+      <FlashMessage message={$flash?.message}/>
-  {/if}
+    {/if}
 
-  {@render children()}
+    {@render children()}
-</main>
+  </main>
+
+  <MobileFooter />
+</global-wrapper>
 
-<MobileFooter />
 
 <style>
   header {

src/routes/+page.ts

@@ -33,7 +33,6 @@ async function loadTopGuilds (event: LoadEvent): Promise<GuildEntry[] | null> {
         const respJ = await resp.json();
 
         const { has: top_guilds } : { has: GuildEntry[] } = respJ;
-        console.log('top_guilds is', top_guilds);
         return top_guilds;
     } catch (e) {
         return null;