From f2e27c16a10e5d4e8731af917b3caa1c34be746b Mon Sep 17 00:00:00 2001
From: Johnny <yourselfhosted@gmail.com>
Date: Sun, 6 Jul 2025 22:26:54 +0800
Subject: [PATCH] chore: tweak colors

---
 web/src/components/MemoAttachmentListView.tsx |  7 ++--
 web/src/components/MemoView.tsx               |  5 ++-
 web/src/components/Navigation.tsx             |  4 +--
 web/src/style.css                             | 32 +++++++++----------
 4 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/web/src/components/MemoAttachmentListView.tsx b/web/src/components/MemoAttachmentListView.tsx
index 5a61a00ab..868314bb8 100644
--- a/web/src/components/MemoAttachmentListView.tsx
+++ b/web/src/components/MemoAttachmentListView.tsx
@@ -39,10 +39,7 @@ const MemoAttachmentListView = ({ attachments = [] }: { attachments: Attachment[
     if (type === "image/*") {
       return (
         <img
-          className={cn(
-            "cursor-pointer h-full w-auto rounded-lg border border-border object-contain hover:border-accent transition-colors",
-            className,
-          )}
+          className={cn("cursor-pointer h-full w-auto rounded-lg border border-border/60 object-contain transition-colors", className)}
           src={attachment.externalLink ? attachmentUrl : attachmentUrl + "?thumbnail=true"}
           onError={(e) => {
             // Fallback to original image if thumbnail fails
@@ -61,7 +58,7 @@ const MemoAttachmentListView = ({ attachments = [] }: { attachments: Attachment[
       return (
         <video
           className={cn(
-            "cursor-pointer h-full w-auto rounded-lg border border-border object-contain bg-popover hover:border-accent transition-colors",
+            "cursor-pointer h-full w-auto rounded-lg border border-border/60 object-contain bg-popover transition-colors",
             className,
           )}
           preload="metadata"
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 1173690bd..57f035ac4 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -137,7 +137,6 @@ const MemoView: React.FC<Props> = observer((props: Props) => {
     <div
       className={cn(
         "group relative flex flex-col justify-start items-start w-full px-4 py-3 mb-2 gap-2 bg-card text-card-foreground rounded-lg border border-border transition-colors",
-        "hover:bg-accent hover:text-accent-foreground hover:border-accent",
         className,
       )}
     >
@@ -182,7 +181,7 @@ const MemoView: React.FC<Props> = observer((props: Props) => {
             {props.showVisibility && memo.visibility !== Visibility.PRIVATE && (
               <Tooltip>
                 <TooltipTrigger>
-                  <span className="flex justify-center items-center hover:bg-accent hover:text-accent-foreground rounded-md p-1 transition-colors">
+                  <span className="flex justify-center items-center rounded-md p-1 hover:opacity-80">
                     <VisibilityIcon visibility={memo.visibility} />
                   </span>
                 </TooltipTrigger>
@@ -194,7 +193,7 @@ const MemoView: React.FC<Props> = observer((props: Props) => {
           {!isInMemoDetailPage && (workspaceMemoRelatedSetting.enableComment || commentAmount > 0) && (
             <Link
               className={cn(
-                "flex flex-row justify-start items-center hover:bg-accent hover:text-accent-foreground rounded-md p-1 transition-colors",
+                "flex flex-row justify-start items-center rounded-md p-1 hover:opacity-80",
                 commentAmount === 0 && "invisible group-hover:visible",
               )}
               to={`/${memo.name}#comments`}
diff --git a/web/src/components/Navigation.tsx b/web/src/components/Navigation.tsx
index da52fd69b..92f8f0437 100644
--- a/web/src/components/Navigation.tsx
+++ b/web/src/components/Navigation.tsx
@@ -81,8 +81,8 @@ const Navigation = observer((props: Props) => {
                 "px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-sidebar-foreground transition-colors",
                 collapsed ? "" : "w-full px-4",
                 isActive
-                  ? "bg-sidebar-primary text-sidebar-primary-foreground border-sidebar-border"
-                  : "border-transparent hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:border-sidebar-border",
+                  ? "bg-sidebar-accent text-sidebar-accent-foreground border-sidebar-accent-border drop-shadow"
+                  : "border-transparent hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:border-sidebar-accent-border opacity-80",
               )
             }
             key={navLink.id}
diff --git a/web/src/style.css b/web/src/style.css
index bb8a77143..65a56ca9e 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -1,16 +1,16 @@
 :root {
   --background: oklch(0.9818 0.0054 95.0986);
-  --foreground: oklch(0.3438 0.0269 95.7226);
+  --foreground: oklch(0.2438 0.0269 95.7226);
   --card: oklch(0.9818 0.0054 95.0986);
   --card-foreground: oklch(0.1908 0.002 106.5859);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.2671 0.0196 98.939);
-  --primary: oklch(0.6171 0.1375 39.0427);
-  --primary-foreground: oklch(1 0 0);
+  --primary: oklch(0.3918 0.0127 286.3);
+  --primary-foreground: oklch(0.9818 0.0054 95.0986);
   --secondary: oklch(0.9245 0.0138 92.9892);
   --secondary-foreground: oklch(0.4334 0.0177 98.6048);
   --muted: oklch(0.9341 0.0153 90.239);
-  --muted-foreground: oklch(0.6059 0.0075 97.4233);
+  --muted-foreground: oklch(0.5559 0.0075 97.4233);
   --accent: oklch(0.9245 0.0138 92.9892);
   --accent-foreground: oklch(0.2671 0.0196 98.939);
   --destructive: oklch(0.1908 0.002 106.5859);
@@ -25,8 +25,8 @@
   --chart-5: oklch(0.5608 0.1348 42.0584);
   --sidebar: oklch(0.9663 0.008 98.8792);
   --sidebar-foreground: oklch(0.359 0.0051 106.6524);
-  --sidebar-primary: oklch(0.6171 0.1375 39.0427);
-  --sidebar-primary-foreground: oklch(0.9881 0 0);
+  --sidebar-primary: oklch(0.3918 0.0127 286.3);
+  --sidebar-primary-foreground: oklch(0.9818 0.0054 95.0986);
   --sidebar-accent: oklch(0.9245 0.0138 92.9892);
   --sidebar-accent-foreground: oklch(0.325 0 0);
   --sidebar-border: oklch(0.9401 0 0);
@@ -51,19 +51,19 @@
 
 .dark {
   --background: oklch(0.2679 0.0036 106.6427);
-  --foreground: oklch(0.8074 0.0142 93.0137);
+  --foreground: oklch(0.8274 0.0142 93.0137);
   --card: oklch(0.2679 0.0036 106.6427);
-  --card-foreground: oklch(0.9818 0.0054 95.0986);
+  --card-foreground: oklch(0.8518 0.0054 95.0986);
   --popover: oklch(0.3085 0.0035 106.6039);
-  --popover-foreground: oklch(0.9211 0.004 106.4781);
-  --primary: oklch(0.6724 0.1308 38.7559);
-  --primary-foreground: oklch(1 0 0);
+  --popover-foreground: oklch(0.8411 0.004 106.4781);
+  --primary: oklch(0.7062 0.0156 286.3);
+  --primary-foreground: oklch(0.2679 0.0036 106.6427);
   --secondary: oklch(0.9818 0.0054 95.0986);
   --secondary-foreground: oklch(0.3085 0.0035 106.6039);
   --muted: oklch(0.2213 0.0038 106.707);
-  --muted-foreground: oklch(0.7713 0.0169 99.0657);
+  --muted-foreground: oklch(0.5813 0.0169 99.0657);
   --accent: oklch(0.213 0.0078 95.4245);
-  --accent-foreground: oklch(0.9663 0.008 98.8792);
+  --accent-foreground: oklch(0.8163 0.008 98.8792);
   --destructive: oklch(0.6368 0.2078 25.3313);
   --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.3618 0.0101 106.8928);
@@ -75,9 +75,9 @@
   --chart-4: oklch(0.3074 0.0516 289.323);
   --chart-5: oklch(0.5608 0.1348 42.0584);
   --sidebar: oklch(0.2357 0.0024 67.7077);
-  --sidebar-foreground: oklch(0.8074 0.0142 93.0137);
-  --sidebar-primary: oklch(0.325 0 0);
-  --sidebar-primary-foreground: oklch(0.9881 0 0);
+  --sidebar-foreground: oklch(0.8274 0.0142 93.0137);
+  --sidebar-primary: oklch(0.7062 0.0156 286.3);
+  --sidebar-primary-foreground: oklch(0.2679 0.0036 106.6427);
   --sidebar-accent: oklch(0.168 0.002 106.6177);
   --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
   --sidebar-border: oklch(0.9401 0 0);