From 1297457cd6434834d020eacf4f60d729f0e47d64 Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Wed, 1 Apr 2026 12:04:03 +0800
Subject: [PATCH] chore: fix oklch style

---
 web/src/assets/index.css       | 119 ++++++++++++++++++---------------
 web/src/layouts/MainLayout.vue |  20 +++---
 2 files changed, 75 insertions(+), 64 deletions(-)

diff --git a/web/src/assets/index.css b/web/src/assets/index.css
index 5dcbddd..e94a051 100644
--- a/web/src/assets/index.css
+++ b/web/src/assets/index.css
@@ -70,117 +70,128 @@
 
 :root {
   --background: #ffffff;
-  --background: oklch(1 0 0);
   --foreground: #252525;
-  --foreground: oklch(0.145 0 0);
   --card: #ffffff;
-  --card: oklch(1 0 0);
   --card-foreground: #252525;
-  --card-foreground: oklch(0.145 0 0);
   --popover: #ffffff;
-  --popover: oklch(1 0 0);
   --popover-foreground: #252525;
-  --popover-foreground: oklch(0.145 0 0);
   --primary: #333333;
-  --primary: oklch(0.205 0 0);
   --primary-foreground: #ffffff;
-  --primary-foreground: oklch(0.985 0 0);
   --secondary: #f3f4f6;
-  --secondary: oklch(0.97 0 0);
   --secondary-foreground: #333333;
-  --secondary-foreground: oklch(0.205 0 0);
   --muted: #f3f4f6;
-  --muted: oklch(0.97 0 0);
   --muted-foreground: #6b7280;
-  --muted-foreground: oklch(0.556 0 0);
   --accent: #f3f4f6;
-  --accent: oklch(0.97 0 0);
   --accent-foreground: #333333;
-  --accent-foreground: oklch(0.205 0 0);
   --destructive: #ef4444;
-  --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: #ffffff;
-  --destructive-foreground: oklch(0.985 0 0);
   --border: #e5e7eb;
-  --border: oklch(0.922 0 0);
   --input: #e5e7eb;
-  --input: oklch(0.922 0 0);
   --ring: #9ca3af;
-  --ring: oklch(0.708 0 0);
   --radius: 0.625rem;
   --sidebar: #f9fafb;
-  --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: #252525;
-  --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: #333333;
-  --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: #ffffff;
-  --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: #f3f4f6;
-  --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: #333333;
-  --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: #e5e7eb;
-  --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: #9ca3af;
-  --sidebar-ring: oklch(0.708 0 0);
+}
+
+/* OKLCH support targeting modern browsers */
+@supports (color: oklch(1 0 0)) {
+  :root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+  }
 }
 
 .dark {
   --background: #1a1a1a;
-  --background: oklch(0.22 0 0);
   --foreground: #f9fafb;
-  --foreground: oklch(0.985 0 0);
   --card: #242424;
-  --card: oklch(0.26 0 0);
   --card-foreground: #f9fafb;
-  --card-foreground: oklch(0.985 0 0);
   --popover: #242424;
-  --popover: oklch(0.26 0 0);
   --popover-foreground: #f9fafb;
-  --popover-foreground: oklch(0.985 0 0);
   --primary: #f3f4f6;
-  --primary: oklch(0.922 0 0);
   --primary-foreground: #252525;
-  --primary-foreground: oklch(0.205 0 0);
   --secondary: #2d2d2d;
-  --secondary: oklch(0.32 0 0);
   --secondary-foreground: #f9fafb;
-  --secondary-foreground: oklch(0.985 0 0);
   --muted: #2d2d2d;
-  --muted: oklch(0.32 0 0);
   --muted-foreground: #9ca3af;
-  --muted-foreground: oklch(0.708 0 0);
   --accent: #2d2d2d;
-  --accent: oklch(0.32 0 0);
   --accent-foreground: #f9fafb;
-  --accent-foreground: oklch(0.985 0 0);
   --destructive: #dc2626;
-  --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: #f9fafb;
-  --destructive-foreground: oklch(0.985 0 0);
   --border: rgba(255, 255, 255, 0.12);
-  --border: oklch(1 0 0 / 12%);
   --input: rgba(255, 255, 255, 0.15);
-  --input: oklch(1 0 0 / 15%);
   --ring: #6b7280;
-  --ring: oklch(0.556 0 0);
   --sidebar: #1a1a1a;
-  --sidebar: oklch(0.26 0 0);
   --sidebar-foreground: #f9fafb;
-  --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: #60a5fa;
-  --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: #f9fafb;
-  --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: #2d2d2d;
-  --sidebar-accent: oklch(0.32 0 0);
   --sidebar-accent-foreground: #f9fafb;
-  --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: rgba(255, 255, 255, 0.12);
-  --sidebar-border: oklch(1 0 0 / 12%);
   --sidebar-ring: #6b7280;
-  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@supports (color: oklch(1 0 0)) {
+  .dark {
+    --background: oklch(0.22 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.26 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.26 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.32 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.32 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.32 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(1 0 0 / 12%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --sidebar: oklch(0.26 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.32 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 12%);
+    --sidebar-ring: oklch(0.556 0 0);
+  }
 }
 
 @layer base {
diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue
index 1ddb513..08076ad 100644
--- a/web/src/layouts/MainLayout.vue
+++ b/web/src/layouts/MainLayout.vue
@@ -110,7 +110,7 @@ onMounted(() => {
     
     <!-- Application Card: The main floating surface -->
     <div :style="mobileMenuOpen ? 'transform: scale(0.98); opacity: 0.9;' : ''"
-      class="flex h-full w-full bg-background relative transition-all duration-500 overflow-hidden
+      class="flex h-full w-full bg-white dark:bg-slate-950 relative transition-all duration-500 overflow-hidden
              2xl:max-w-[1800px] 2xl:max-h-[92vh] 2xl:rounded-[2.5rem] 2xl:shadow-[0_40px_100px_-20px_rgba(0,0,0,0.12)] 2xl:border 2xl:border-slate-200/60 dark:2xl:border-slate-800/40
              3xl:max-w-[2200px] 3xl:max-h-[90vh]">
       
@@ -119,26 +119,26 @@ onMounted(() => {
   
       <!-- Sidebar -->
       <aside :class="[
-        'fixed lg:static inset-y-0 z-50 w-44 2xl:w-52 border-r bg-background flex flex-col transition-all duration-300 ease-in-out',
+        'fixed lg:static inset-y-0 z-50 w-44 2xl:w-52 border-r bg-white dark:bg-slate-900 flex flex-col transition-all duration-300 ease-in-out',
         mobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
       ]">
-        <div class="h-14 flex items-center justify-center px-4 font-bold text-lg border-b relative">
+        <div class="h-14 flex items-center justify-center px-4 font-bold text-lg border-b relative bg-white dark:bg-slate-900">
           <span>{{ siteSettings.title }}</span>
           <Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden absolute right-2" @click="mobileMenuOpen = false">
             <X class="h-4 w-4" />
           </Button>
         </div>
-        <nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center overflow-y-auto custom-scrollbar">
+        <nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center overflow-y-auto custom-scrollbar bg-white dark:bg-slate-900">
           <RouterLink v-for="item in navItems" :key="item.to" :to="item.to" custom v-slot="{ navigate }">
             <Button variant="ghost"
-              :class="['justify-start gap-3 h-9 px-3 w-full', isItemActive(item) && 'bg-primary/5 text-primary font-semibold shadow-sm']"
+              :class="['justify-start gap-3 h-9 px-3 w-full', isItemActive(item) && 'bg-slate-100 dark:bg-slate-800 text-primary font-semibold shadow-sm']"
               @click="handleNavClick(navigate)">
               <component :is="item.icon" class="h-3.5 w-3.5" />
               <span class="text-[13px]">{{ item.label }}</span>
             </Button>
           </RouterLink>
         </nav>
-        <div class="px-3 py-4 border-t flex justify-center">
+        <div class="px-3 py-4 border-t flex justify-center bg-white dark:bg-slate-900">
           <Button variant="ghost" class="justify-start gap-3 h-9 px-3 w-full text-muted-foreground hover:text-destructive hover:bg-destructive/5 transition-colors"
             @click="logout">
             <LogOut class="h-3.5 w-3.5" />
@@ -148,14 +148,14 @@ onMounted(() => {
       </aside>
   
       <!-- Main Content Area -->
-      <main class="flex-1 flex flex-col min-w-0 relative bg-white/5 dark:bg-slate-900/10">
+      <main class="flex-1 flex flex-col min-w-0 relative bg-slate-50/30 dark:bg-slate-950/20">
         <!-- Top Navigation Bar -->
-        <header class="h-14 border-b bg-background/80 backdrop-blur-md flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30">
+        <header class="h-14 border-b bg-white dark:bg-slate-900 flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30 shadow-sm">
           <div class="flex items-center gap-3 flex-1 min-w-0">
-            <Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden shrink-0 border bg-muted/20" @click="mobileMenuOpen = true">
+            <Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden shrink-0 border bg-slate-50 dark:bg-slate-800" @click="mobileMenuOpen = true">
               <Menu class="h-4 w-4" />
             </Button>
-            <span class="text-xs text-muted-foreground truncate italic opacity-80" :title="sentence">
+            <span class="text-xs text-muted-foreground truncate italic opacity-80" :title="sentence" style="color: #6b7280;">
               <span class="hidden sm:inline">{{ sentence }}</span>
               <span class="sm:hidden">{{ sentenceContent }}</span>
             </span>