From 5d7d294a80e1e15ec22c472616cbc69de905b956 Mon Sep 17 00:00:00 2001
From: Wind-Explorer <windexplorer@outlook.com>
Date: Mon, 24 Aug 2026 14:01:46 +0800
Subject: [PATCH] daisyui

---
 bun.lock                                      |  3 +
 package.json                                  |  5 +-
 src/app.css                                   | 81 +++++++++++++++++++
 src/routes/scene/+page.svelte                 |  3 +-
 .../scene/scene-user-popover-content.svelte   | 12 +--
 5 files changed, 95 insertions(+), 9 deletions(-)

diff --git a/bun.lock b/bun.lock
index f60315e..cf73e0e 100644
--- a/bun.lock
+++ b/bun.lock
@@ -15,6 +15,7 @@
         "@sveltejs/kit": "^2.9.0",
         "@sveltejs/vite-plugin-svelte": "^5.0.0",
         "@tauri-apps/cli": "^2",
+        "daisyui": "^5.7.21",
         "svelte": "^5.0.0",
         "svelte-check": "^4.0.0",
         "typescript": "~5.6.2",
@@ -227,6 +228,8 @@
 
     "cookie": ["cookie@0.6.0", "", {}, "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="],
 
+    "daisyui": ["daisyui@5.7.21", "", {}, "sha512-DyJvCwrclM8K3Jp8TB9n2WZ+QUd+0/dSEY0WRvTE26wL06e8I6nEpKYYJWJ5SDRwc7FRDp3CyeREqYTHi9hM3A=="],
+
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
diff --git a/package.json b/package.json
index 5eaf307..6bde39e 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,11 @@
     "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.9.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tauri-apps/cli": "^2",
+    "daisyui": "^5.7.21",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "typescript": "~5.6.2",
-    "vite": "^6.0.3",
-    "@tauri-apps/cli": "^2"
+    "vite": "^6.0.3"
   }
 }
diff --git a/src/app.css b/src/app.css
index f1d8c73..8c28a06 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1 +1,82 @@
 @import "tailwindcss";
+@plugin "daisyui";
+
+@plugin "daisyui/theme" {
+  name: "proper";
+  default: true;
+  prefersdark: false;
+  color-scheme: "light";
+  --color-base-50: oklch(96% 0.001 286.375);
+  --color-base-100: oklch(96% 0.001 286.375);
+  --color-base-200: oklch(92% 0.004 286.32);
+  --color-base-300: oklch(87% 0.006 286.286);
+  --color-base-content: oklch(44% 0.017 285.786);
+  --color-primary: oklch(71% 0.143 215.221);
+  --color-primary-content: oklch(98% 0.019 200.873);
+  --color-secondary: oklch(67% 0.182 276.935);
+  --color-secondary-content: oklch(93% 0.034 272.788);
+  --color-accent: oklch(93% 0.032 255.585);
+  --color-accent-content: oklch(38% 0.063 188.416);
+  --color-neutral: oklch(96% 0.001 286.375);
+  --color-neutral-content: oklch(0% 0 0);
+  --color-info: oklch(58% 0.158 241.966);
+  --color-info-content: oklch(100% 0 0);
+  --color-success: oklch(76% 0.233 130.85);
+  --color-success-content: oklch(98% 0.031 120.757);
+  --color-warning: oklch(66% 0.179 58.318);
+  --color-warning-content: oklch(100% 0 0);
+  --color-error: oklch(70% 0.191 22.216);
+  --color-error-content: oklch(100% 0 0);
+  --radius-selector: 0.25rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.25rem;
+  --size-selector: 0.1875rem;
+  --size-field: 0.1875rem;
+  --border: 1px;
+  --depth: 1;
+  --noise: 1;
+}
+
+@plugin "daisyui/theme" {
+  name: "properdark";
+  default: false;
+  prefersdark: true;
+  color-scheme: "dark";
+  --color-base-50: oklch(14% 0 0);
+  --color-base-100: oklch(26% 0 0);
+  --color-base-200: oklch(37% 0 0);
+  --color-base-300: oklch(43% 0 0);
+  --color-base-content: oklch(100% 0 0);
+  --color-primary: oklch(86% 0.127 207.078);
+  --color-primary-content: oklch(39% 0.07 227.392);
+  --color-secondary: oklch(87% 0.065 274.039);
+  --color-secondary-content: oklch(35% 0.144 278.697);
+  --color-accent: oklch(36.2% 0.076 265.6);
+  --color-accent-content: oklch(97% 0.014 254.604);
+  --color-neutral: oklch(37% 0.01 67.558);
+  --color-neutral-content: oklch(100% 0 0);
+  --color-info: oklch(64.4% 0.12 237.3);
+  --color-info-content: oklch(100% 0 0);
+  --color-success: oklch(76% 0.233 130.85);
+  --color-success-content: oklch(0% 0 0);
+  --color-warning: oklch(87% 0.169 91.605);
+  --color-warning-content: oklch(0% 0 0);
+  --color-error: oklch(63% 0.237 25.331);
+  --color-error-content: oklch(100% 0 0);
+  --radius-selector: 0.25rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.25rem;
+  --size-selector: 0.1875rem;
+  --size-field: 0.1875rem;
+  --border: 1px;
+  --depth: 1;
+  --noise: 1;
+}
+
+:root {
+  background-color: transparent;
+}
+
+.pixelated {
+  image-rendering: pixelated;
+}
diff --git a/src/routes/scene/+page.svelte b/src/routes/scene/+page.svelte
index fefcc9c..f5e6a21 100644
--- a/src/routes/scene/+page.svelte
+++ b/src/routes/scene/+page.svelte
@@ -31,7 +31,8 @@
       {@const foregroundApp = $liveMetadata.foregroundApps.get(userId)}
       {@const popoverId = `scene-user-${index}`}
       {#if cursor}
-        {@const renderedX = selectedUserId === userId ? selectedUserX : cursor.mapped.x}
+        {@const renderedX =
+          selectedUserId === userId ? selectedUserX : cursor.mapped.x}
         <div
           class="absolute bottom-0 left-0 flex flex-col items-center gap-1 transition-transform duration-1000 ease-linear"
           style:transform={`translateX(${(renderedX ?? cursor.mapped.x) * 100}vw)`}
diff --git a/src/routes/scene/scene-user-popover-content.svelte b/src/routes/scene/scene-user-popover-content.svelte
index 08cb0e2..10d69b3 100644
--- a/src/routes/scene/scene-user-popover-content.svelte
+++ b/src/routes/scene/scene-user-popover-content.svelte
@@ -24,9 +24,9 @@
   }
 </script>
 
-<article class="w-68 overflow-hidden text-neutral-100">
+<article class="w-68 overflow-hidden text-base-content">
   <header
-    class="flex w-max items-center ml-2 gap-1 px-2 py-0.5 bg-neutral-800 border border-neutral-500 border-b-0"
+    class="flex w-max items-center ml-2 gap-1 px-2 py-0.5 bg-base-200 border border-base-300 border-b-0"
   >
     <div class="min-w-0 flex-1">
       <p id={titleId} class="truncate text-xs">{username}</p>
@@ -34,10 +34,10 @@
   </header>
 
   <div
-    class="grid gap-3 p-2 text-sm bg-neutral-900 border border-neutral-500 shadow-lg"
+    class="grid gap-3 p-2 text-sm bg-base-100 border border-base-200 shadow-lg"
   >
     <section>
-      <h3 class="text-xs font-medium text-neutral-400">Currently enjoying</h3>
+      <h3 class="text-xs text-base-content/50">Currently enjoying</h3>
       <div class="mt-1 flex min-w-0 items-center gap-2">
         {#if foregroundApp?.ico}
           <img
@@ -47,13 +47,13 @@
           />
         {/if}
         <div class="min-w-0">
-          <p class="truncate text-xs">
+          <p class="truncate text-sm">
             {foregroundApp?.local ??
               foregroundApp?.unlocal ??
               "Waiting for data"}
           </p>
           {#if foregroundApp?.local && foregroundApp.unlocal}
-            <p class="truncate text-xs text-neutral-400">
+            <p class="truncate text-xs text-base-content/50">
               {foregroundApp.unlocal}
             </p>
           {/if}