feat: add light mode and mode switcher

src/app.pcss

@@ -5,33 +5,39 @@
 @layer base {
     :root {
         --background: 0 0% 100%;
-        --foreground: 0 0% 3.9%;
+        --foreground: 234 44% 14%;
 
         --muted: 0 0% 96.1%;
         --muted-foreground: 0 0% 45.1%;
 
-        --popover: 0 0% 100%;
-        --popover-foreground: 0 0% 3.9%;
+        --popover: var(--secondary);
+        --popover-foreground: var(--secondary-foreground);
 
-        --card: 0 0% 100%;
-        --card-foreground: 0 0% 3.9%;
+        --card: 220 100% 98%;
+        --card-foreground: var(--foreground);
 
-        --border: 0 0% 89.8%;
-        --input: 0 0% 89.8%;
+        --border: var(--foreground);
+        --input: var(--foreground);
 
-        --primary: 0 0% 9%;
-        --primary-foreground: 0 0% 98%;
+        --primary-gradient: linear-gradient(
+            180deg,
+            hsl(var(--background)) 0%,
+            #d2e0fc 60%,
+            #a6dfff 100%
+        );
+        --primary-color: 202 100% 82%;
+        --primary-foreground: var(--foreground);
 
-        --secondary: 0 0% 96.1%;
+        --secondary: 220 87% 91%;
         --secondary-foreground: 0 0% 9%;
 
-        --accent: 0 0% 96.1%;
-        --accent-foreground: 0 0% 9%;
+        --accent: 45 79% 78%;
+        --accent-foreground: var(--background);
 
-        --destructive: 0 72.2% 50.6%;
-        --destructive-foreground: 0 0% 98%;
+        --destructive: 0 64% 63%;
+        --destructive-foreground: var(--background);
 
-        --ring: 0 0% 3.9%;
+        --ring: var(--accent);
 
         --radius: 0;
     }
@@ -64,7 +70,7 @@
         --secondary: 234 29% 22%;
         --secondary-foreground: var(--foreground);
 
-        --accent: 45 79%78%;
+        --accent: 45 79% 78%;
         --accent-foreground: var(--background);
 
         --destructive: 0 79% 78%;
@@ -82,3 +88,7 @@
         @apply bg-background text-foreground;
     }
 }
+
+body * {
+    @apply transition-colors duration-100;
+}

src/lib/ui/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/ui/utils.js";
+
+	type $$Props = AvatarPrimitive.FallbackProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Fallback
+	class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Fallback>

src/lib/ui/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/ui/utils.js";
+
+	type $$Props = AvatarPrimitive.ImageProps;
+
+	let className: $$Props["class"] = undefined;
+	export let src: $$Props["src"] = undefined;
+	export let alt: $$Props["alt"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Image
+	{src}
+	{alt}
+	class={cn("aspect-square h-full w-full", className)}
+	{...$$restProps}
+/>

src/lib/ui/components/ui/avatar/avatar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/ui/utils.js";
+
+	type $$Props = AvatarPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let delayMs: $$Props["delayMs"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Root
+	{delayMs}
+	class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Root>

src/lib/ui/components/ui/avatar/index.ts

@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback,
+};

src/lib/ui/components/ui/progress/progress.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <ProgressPrimitive.Root
-    class={cn("relative h-8 w-full overflow-hidden border-2 bg-secondary", className)}
+    class={cn("relative h-8 w-full overflow-hidden border-2", className)}
     {...$$restProps}
 >
     <div

src/routes/+layout.svelte

@@ -3,26 +3,52 @@
     import "@fontsource-variable/rubik";
     import "@fontsource/ibm-plex-mono";
     import { Toaster } from "$lib/ui/components/ui/sonner";
+    import { ModeWatcher } from "mode-watcher";
+    import { toggleMode } from "mode-watcher";
+    import { LucideSun, LucideMoon, LucideUserRound } from "lucide-svelte";
+    import Button from "$lib/ui/components/ui/button/button.svelte";
+    import * as Avatar from "$lib/ui/components/ui/avatar";
     // @ts-ignore
     // import { PUBLIC_ADAPTER } from "$env/static/public";
 
     export let data;
 </script>
 
+<Toaster />
+<ModeWatcher disableTransitions={false} />
+
 <div class="min-h-screen bg-background text-foreground">
     <header class="flex flex-row border-b border-muted px-8 py-4">
-        <h1 class="text-xl">BlueBuild Workshop</h1>
-        <div class="ml-auto">
+        <h1 class="place-self-center text-xl">BlueBuild Workshop</h1>
+        <div class="ml-auto flex flex-row gap-2">
+            <Button
+                on:click={toggleMode}
+                size="icon"
+                variant="outline"
+                class="relative overflow-hidden"
+            >
+                <LucideSun
+                    class="absolute h-6 w-6 translate-y-0 transition-transform dark:-translate-y-10"
+                />
+                <LucideMoon
+                    class="absolute h-6 w-6 translate-y-10 transition-transform dark:translate-y-0"
+                />
+            </Button>
             {#if data.githubUser.login}
-                Logged in as {data.githubUser.login}.
+                <Avatar.Root>
+                    <Avatar.Image src={data.githubUser.avatar_url} alt={data.githubUser.login} />
+                    <Avatar.Fallback>CN</Avatar.Fallback>
+                </Avatar.Root>
             {:else}
-                Not logged in.
+                <Avatar.Root>
+                    <Avatar.Fallback>
+                        <LucideUserRound />
+                    </Avatar.Fallback>
+                </Avatar.Root>
             {/if}
         </div>
     </header>
 
-    <Toaster />
-
     <main class="p-4">
         <slot />
     </main>