From 15ad54a8471b13373e0890b7272f24e26752ef39 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Fri, 12 Jun 2026 10:48:55 +0200
Subject: [PATCH] refactor: polish dark theme colors and add border accents

---
 static/assets/style.css | 33 +++++++++++++++++----------------
 templates/anime.gohtml  |  2 +-
 templates/base.gohtml   |  2 +-
 templates/watch.gohtml  |  2 +-
 4 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/static/assets/style.css b/static/assets/style.css
index d646b97..7ed8a72 100644
--- a/static/assets/style.css
+++ b/static/assets/style.css
@@ -4,14 +4,15 @@
 @source "../**/*.ts";
 
 @theme {
-  --color-background: light-dark(#ffffff, #0b0c10);
-  --color-background-sidebar: light-dark(#f7f7f7, #0f1115);
-  --color-background-header: light-dark(#fbfbfb, #0f1115);
-  --color-background-surface: light-dark(#ffffff, #17181c);
-  --color-background-button: light-dark(#f5f5f5, #131417);
-  --color-background-button-hover: light-dark(#ececec, #1c1d22);
-  --color-foreground: light-dark(#111111, #f3f4f6);
-  --color-accent: #00b3c4;
+  --color-background: light-dark(#ffffff, #101113);
+  --color-background-sidebar: light-dark(#f7f7f7, #161719);
+  --color-background-header: light-dark(#fbfbfb, #161719);
+  --color-background-surface: light-dark(#ffffff, #1b1c1f);
+  --color-background-button: light-dark(#f5f5f5, #202125);
+  --color-background-button-hover: light-dark(#ececec, #292a2f);
+  --color-foreground: light-dark(#111111, #f4f1ea);
+  --color-accent: light-dark(#007a85, #00b3c4);
+  --color-on-accent: light-dark(#ffffff, #000000);
   --color-surface-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
 }
 
@@ -36,14 +37,14 @@
 
 :root {
   color-scheme: light dark;
-  --skeleton-base: light-dark(#e5e5e5, #1f1f1f);
-  --skeleton-highlight: light-dark(#d4d4d4, #2a2a2a);
-  --border: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
-  --border-light: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.035));
-  --shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.28));
-  --scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
-  --scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.2));
-  --scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.3));
+  --skeleton-base: light-dark(#e5e5e5, #242529);
+  --skeleton-highlight: light-dark(#d4d4d4, #303137);
+  --border: light-dark(rgba(0, 0, 0, 0.08), rgba(244, 241, 234, 0.08));
+  --border-light: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.04));
+  --shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 12px rgba(0, 0, 0, 0.32));
+  --scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.05));
+  --scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(244, 241, 234, 0.22));
+  --scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(244, 241, 234, 0.32));
 }
 
 html[data-theme="light"] {
diff --git a/templates/anime.gohtml b/templates/anime.gohtml
index 9a9da3e..7d60b98 100644
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -179,7 +179,7 @@
             {{end}}
           </section>
         </div>
-        <aside class="fixed right-0 top-0 hidden h-screen w-80 shrink-0 flex-col overflow-y-auto bg-background-sidebar p-8 lg:flex">
+        <aside class="fixed right-0 top-0 hidden h-screen w-80 shrink-0 flex-col overflow-y-auto border-l border-(--border-light) bg-background-sidebar p-8 lg:flex">
           <div class="flex flex-col gap-8">
             <section>
               <h3 class="mb-6 text-base font-normal text-foreground">Information</h3>
diff --git a/templates/base.gohtml b/templates/base.gohtml
index c30f7eb..03f907e 100644
--- a/templates/base.gohtml
+++ b/templates/base.gohtml
@@ -93,7 +93,7 @@
         <!-- Sidebar -->
         <div id="mobile-menu-backdrop" data-mobile-menu-backdrop class="fixed inset-0 z-40 hidden bg-black/50 lg:hidden"></div>
 
-        <div id="mobile-menu" data-mobile-open="false" class="fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-hidden bg-background-sidebar transition-transform duration-300 lg:static lg:translate-x-0 lg:transition-none">
+        <div id="mobile-menu" data-mobile-open="false" class="fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-hidden border-r border-(--border-light) bg-background-sidebar transition-transform duration-300 lg:static lg:translate-x-0 lg:transition-none">
 	          {{block "sidebar" .}}
 	            {{template "navigation" dict "CurrentPath" .CurrentPath "IsCollapsed" false}}
 	          {{end}}
diff --git a/templates/watch.gohtml b/templates/watch.gohtml
index 3cc83d0..7dfdff6 100644
--- a/templates/watch.gohtml
+++ b/templates/watch.gohtml
@@ -176,7 +176,7 @@
 
             <div class="flex items-center justify-between">
               <button type="button" data-segment-reset class="text-sm font-normal text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Reset</button>
-              <button type="button" data-segment-save class=" px-4 py-2 bg-accent text-sm font-normal text-black transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Save</button>
+              <button type="button" data-segment-save class=" px-4 py-2 bg-accent text-sm font-normal text-on-accent transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Save</button>
             </div>
 
             <div data-segment-error class="hidden text-sm text-red-400"></div>