add 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>
-  <h1>
-    <a href="/">{appName()}</a>
-  </h1>
-  <!-- .metanav -->
-  <MetaNav user={me} />
-</header>
+<global-wrapper class={colorThemeCls}>
+  <header>
+    <h1>
+      <a href="/">{appName()}</a>
+    </h1>
+    <!-- .metanav -->
+    <MetaNav user={me} />
+  </header>
 
-<main>
-  {#if $flash}
-    <FlashMessage message={$flash?.message}/>
-  {/if}
+  <main>
+    {#if $flash}
+      <FlashMessage message={$flash?.message}/>
+    {/if}
 
-  {@render children()}
-</main>
+    {@render children()}
+  </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;
@@ -57,4 +56,4 @@ export async function load(event): Promise<{feed: PostEntry[] | null, top_guilds
     }
 
     return { feed, top_guilds };
-}
+}