diff --git a/web/app/dashboard/layout.tsx b/web/app/dashboard/layout.tsx
index 7cf7ca7..d8d2ae9 100644
--- a/web/app/dashboard/layout.tsx
+++ b/web/app/dashboard/layout.tsx
@@ -33,7 +33,7 @@ export default function DashboardLayout({
 
   if (!ready || !session) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-[linear-gradient(160deg,#f3f4f6_0%,#fff7ed_45%,#ecfeff_100%)] p-6">
+      <div className="flex min-h-screen items-center justify-center bg-[linear-gradient(160deg,#f3f1e8_0%,#f8faf5_46%,#e8f7f2_100%)] p-6">
         <div className="flex items-center gap-3">
           <div className="flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary">
             <Loader2Icon className="size-5 animate-spin" />
@@ -61,7 +61,7 @@ export default function DashboardLayout({
     >
       <NotificationProvider>
         <AppSidebar variant="inset" />
-        <SidebarInset>
+        <SidebarInset className="overflow-hidden border border-border/65 shadow-[0_18px_50px_rgba(20,83,69,0.09)] dark:shadow-none">
           <SiteHeader />
           <div className="@container/main flex min-h-0 flex-1 flex-col gap-2 overflow-auto">
             {children}
diff --git a/web/app/globals.css b/web/app/globals.css
index 8fbe93a..452d3ad 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -49,71 +49,207 @@
 
 :root {
   --radius: 0.65rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.488 0.243 264.376);
-  --primary-foreground: oklch(0.97 0.014 254.604);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.546 0.245 262.881);
-  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(0.973 0.011 112);
+  --foreground: oklch(0.22 0.021 210);
+  --card: oklch(0.996 0.004 105);
+  --card-foreground: oklch(0.22 0.021 210);
+  --popover: oklch(0.996 0.004 105);
+  --popover-foreground: oklch(0.22 0.021 210);
+  --primary: oklch(0.475 0.118 178);
+  --primary-foreground: oklch(0.985 0.012 170);
+  --secondary: oklch(0.94 0.018 124);
+  --secondary-foreground: oklch(0.255 0.035 178);
+  --muted: oklch(0.942 0.012 115);
+  --muted-foreground: oklch(0.49 0.026 205);
+  --accent: oklch(0.91 0.028 169);
+  --accent-foreground: oklch(0.245 0.045 178);
+  --destructive: oklch(0.59 0.225 25);
+  --border: oklch(0.872 0.018 116);
+  --input: oklch(0.872 0.018 116);
+  --ring: oklch(0.56 0.115 178);
+  --chart-1: oklch(0.52 0.13 178);
+  --chart-2: oklch(0.61 0.14 220);
+  --chart-3: oklch(0.72 0.15 78);
+  --chart-4: oklch(0.62 0.15 330);
+  --chart-5: oklch(0.58 0.12 262);
+  --sidebar: oklch(0.925 0.018 118);
+  --sidebar-foreground: oklch(0.245 0.03 190);
+  --sidebar-primary: oklch(0.475 0.118 178);
+  --sidebar-primary-foreground: oklch(0.985 0.012 170);
+  --sidebar-accent: oklch(0.89 0.032 156);
+  --sidebar-accent-foreground: oklch(0.235 0.048 178);
+  --sidebar-border: oklch(0.835 0.022 118);
+  --sidebar-ring: oklch(0.56 0.115 178);
+}
+
+:root[data-palette="blue"] {
+  --background: oklch(0.982 0.007 250);
+  --foreground: oklch(0.205 0.018 255);
+  --card: oklch(0.998 0.002 250);
+  --card-foreground: oklch(0.205 0.018 255);
+  --popover: oklch(0.998 0.002 250);
+  --popover-foreground: oklch(0.205 0.018 255);
+  --primary: oklch(0.548 0.19 257);
+  --primary-foreground: oklch(0.985 0.006 248);
+  --secondary: oklch(0.948 0.013 250);
+  --secondary-foreground: oklch(0.245 0.02 252);
+  --muted: oklch(0.95 0.01 250);
+  --muted-foreground: oklch(0.49 0.024 245);
+  --accent: oklch(0.922 0.026 255);
+  --accent-foreground: oklch(0.255 0.044 254);
+  --destructive: oklch(0.59 0.225 25);
+  --border: oklch(0.888 0.014 250);
+  --input: oklch(0.888 0.014 250);
+  --ring: oklch(0.61 0.15 252);
+  --chart-1: oklch(0.59 0.18 255);
+  --chart-2: oklch(0.62 0.13 178);
+  --chart-3: oklch(0.72 0.16 82);
+  --chart-4: oklch(0.61 0.17 333);
+  --chart-5: oklch(0.56 0.13 285);
+  --sidebar: oklch(0.94 0.016 250);
+  --sidebar-foreground: oklch(0.245 0.024 252);
+  --sidebar-primary: oklch(0.548 0.19 257);
+  --sidebar-primary-foreground: oklch(0.985 0.006 248);
+  --sidebar-accent: oklch(0.908 0.025 252);
+  --sidebar-accent-foreground: oklch(0.245 0.038 254);
+  --sidebar-border: oklch(0.858 0.018 250);
+  --sidebar-ring: oklch(0.61 0.15 252);
+}
+
+:root[data-palette="gray"] {
+  --background: oklch(0.974 0.006 170);
+  --foreground: oklch(0.205 0.018 255);
+  --card: oklch(0.998 0.001 106);
+  --card-foreground: oklch(0.205 0.018 255);
+  --popover: oklch(0.998 0.001 106);
+  --popover-foreground: oklch(0.205 0.018 255);
+  --primary: oklch(0.538 0.183 257);
+  --primary-foreground: oklch(0.985 0.006 248);
+  --secondary: oklch(0.944 0.011 175);
+  --secondary-foreground: oklch(0.245 0.018 250);
+  --muted: oklch(0.948 0.008 180);
+  --muted-foreground: oklch(0.49 0.024 245);
+  --accent: oklch(0.925 0.018 218);
+  --accent-foreground: oklch(0.255 0.033 250);
+  --destructive: oklch(0.59 0.225 25);
+  --border: oklch(0.886 0.012 178);
+  --input: oklch(0.886 0.012 178);
+  --ring: oklch(0.61 0.15 252);
+  --chart-1: oklch(0.59 0.18 255);
+  --chart-2: oklch(0.62 0.13 178);
+  --chart-3: oklch(0.72 0.16 82);
+  --chart-4: oklch(0.61 0.17 333);
+  --chart-5: oklch(0.56 0.13 285);
+  --sidebar: oklch(0.94 0.011 170);
+  --sidebar-foreground: oklch(0.255 0.022 250);
+  --sidebar-primary: oklch(0.538 0.183 257);
+  --sidebar-primary-foreground: oklch(0.985 0.006 248);
+  --sidebar-accent: oklch(0.904 0.017 190);
+  --sidebar-accent-foreground: oklch(0.245 0.028 250);
+  --sidebar-border: oklch(0.86 0.014 176);
+  --sidebar-ring: oklch(0.61 0.15 252);
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.488 0.243 264.376);
-  --primary-foreground: oklch(0.97 0.014 254.604);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
+  --background: oklch(0.18 0.016 190);
+  --foreground: oklch(0.94 0.009 155);
+  --card: oklch(0.225 0.018 190);
+  --card-foreground: oklch(0.94 0.009 155);
+  --popover: oklch(0.225 0.018 190);
+  --popover-foreground: oklch(0.94 0.009 155);
+  --primary: oklch(0.67 0.13 174);
+  --primary-foreground: oklch(0.16 0.024 185);
+  --secondary: oklch(0.285 0.019 185);
+  --secondary-foreground: oklch(0.94 0.009 155);
+  --muted: oklch(0.285 0.019 185);
+  --muted-foreground: oklch(0.72 0.02 165);
+  --accent: oklch(0.33 0.032 174);
+  --accent-foreground: oklch(0.955 0.011 155);
+  --destructive: oklch(0.68 0.19 25);
   --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.623 0.214 259.815);
-  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.439 0 0);
+  --input: oklch(1 0 0 / 14%);
+  --ring: oklch(0.67 0.13 174);
+  --chart-1: oklch(0.68 0.13 174);
+  --chart-2: oklch(0.68 0.13 220);
+  --chart-3: oklch(0.75 0.15 78);
+  --chart-4: oklch(0.68 0.16 333);
+  --chart-5: oklch(0.67 0.13 262);
+  --sidebar: oklch(0.16 0.019 185);
+  --sidebar-foreground: oklch(0.93 0.01 155);
+  --sidebar-primary: oklch(0.67 0.13 174);
+  --sidebar-primary-foreground: oklch(0.16 0.024 185);
+  --sidebar-accent: oklch(0.27 0.028 178);
+  --sidebar-accent-foreground: oklch(0.955 0.011 155);
+  --sidebar-border: oklch(1 0 0 / 9%);
+  --sidebar-ring: oklch(0.67 0.13 174);
+}
+
+.dark[data-palette="blue"] {
+  --background: oklch(0.178 0.012 245);
+  --foreground: oklch(0.948 0.006 230);
+  --card: oklch(0.226 0.014 245);
+  --card-foreground: oklch(0.948 0.006 230);
+  --popover: oklch(0.226 0.014 245);
+  --popover-foreground: oklch(0.948 0.006 230);
+  --primary: oklch(0.66 0.16 252);
+  --primary-foreground: oklch(0.168 0.015 250);
+  --secondary: oklch(0.285 0.014 245);
+  --secondary-foreground: oklch(0.94 0.006 230);
+  --muted: oklch(0.285 0.014 245);
+  --muted-foreground: oklch(0.72 0.015 238);
+  --accent: oklch(0.32 0.022 225);
+  --accent-foreground: oklch(0.955 0.006 230);
+  --destructive: oklch(0.68 0.19 25);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 14%);
+  --ring: oklch(0.66 0.16 252);
+  --chart-1: oklch(0.69 0.15 252);
+  --chart-2: oklch(0.68 0.12 178);
+  --chart-3: oklch(0.75 0.15 82);
+  --chart-4: oklch(0.68 0.16 333);
+  --chart-5: oklch(0.67 0.13 285);
+  --sidebar: oklch(0.158 0.012 248);
+  --sidebar-foreground: oklch(0.93 0.006 230);
+  --sidebar-primary: oklch(0.66 0.16 252);
+  --sidebar-primary-foreground: oklch(0.168 0.015 250);
+  --sidebar-accent: oklch(0.255 0.017 245);
+  --sidebar-accent-foreground: oklch(0.955 0.006 230);
+  --sidebar-border: oklch(1 0 0 / 9%);
+  --sidebar-ring: oklch(0.66 0.16 252);
+}
+
+.dark[data-palette="gray"] {
+  --background: oklch(0.178 0.012 245);
+  --foreground: oklch(0.948 0.006 230);
+  --card: oklch(0.226 0.014 245);
+  --card-foreground: oklch(0.948 0.006 230);
+  --popover: oklch(0.226 0.014 245);
+  --popover-foreground: oklch(0.948 0.006 230);
+  --primary: oklch(0.66 0.16 252);
+  --primary-foreground: oklch(0.168 0.015 250);
+  --secondary: oklch(0.285 0.014 245);
+  --secondary-foreground: oklch(0.94 0.006 230);
+  --muted: oklch(0.285 0.014 245);
+  --muted-foreground: oklch(0.72 0.015 238);
+  --accent: oklch(0.32 0.022 225);
+  --accent-foreground: oklch(0.955 0.006 230);
+  --destructive: oklch(0.68 0.19 25);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 14%);
+  --ring: oklch(0.66 0.16 252);
+  --chart-1: oklch(0.69 0.15 252);
+  --chart-2: oklch(0.68 0.12 178);
+  --chart-3: oklch(0.75 0.15 82);
+  --chart-4: oklch(0.68 0.16 333);
+  --chart-5: oklch(0.67 0.13 285);
+  --sidebar: oklch(0.158 0.012 248);
+  --sidebar-foreground: oklch(0.93 0.006 230);
+  --sidebar-primary: oklch(0.66 0.16 252);
+  --sidebar-primary-foreground: oklch(0.168 0.015 250);
+  --sidebar-accent: oklch(0.255 0.017 245);
+  --sidebar-accent-foreground: oklch(0.955 0.006 230);
+  --sidebar-border: oklch(1 0 0 / 9%);
+  --sidebar-ring: oklch(0.66 0.16 252);
 }
 
 @layer base {
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index b09b535..7d85c58 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -22,6 +22,15 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 })
 
+const paletteScript = `
+try {
+  var palette = window.localStorage.getItem("dashboard_palette");
+  document.documentElement.dataset.palette = palette === "blue" || palette === "gray" ? palette : "green";
+} catch (_) {
+  document.documentElement.dataset.palette = "green";
+}
+`
+
 export const metadata: Metadata = {
   title: "AI 客服后台管理系统",
   description: "AI 客服后台管理系统",
@@ -37,6 +46,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <script dangerouslySetInnerHTML={{ __html: paletteScript }} />
         <ThemeProvider>
           <AuthProvider>
             <ConfirmProvider>
diff --git a/web/components/dashboard-page.tsx b/web/components/dashboard-page.tsx
index af1b77f..b48e639 100644
--- a/web/components/dashboard-page.tsx
+++ b/web/components/dashboard-page.tsx
@@ -29,7 +29,7 @@ export function DashboardToolbar({
   return (
     <div
       className={cn(
-        "flex flex-col gap-3 rounded-lg border bg-card p-3 lg:flex-row lg:items-center lg:justify-between",
+        "flex flex-col gap-3 rounded-lg border border-border/70 bg-card/95 p-3 shadow-[0_1px_2px_rgba(15,23,42,0.04)] lg:flex-row lg:items-center lg:justify-between dark:shadow-none",
         className
       )}
     >
@@ -54,7 +54,7 @@ export function DashboardTableShell({
 }) {
   return (
     <div className={cn("space-y-4", className)}>
-      <div className="overflow-hidden rounded-lg border bg-card text-card-foreground">
+      <div className="overflow-hidden rounded-lg border border-border/70 bg-card text-card-foreground shadow-[0_1px_2px_rgba(15,23,42,0.035)] dark:shadow-none">
         {children}
       </div>
       {pagination ? <div>{pagination}</div> : null}
diff --git a/web/components/palette-toggle.tsx b/web/components/palette-toggle.tsx
new file mode 100644
index 0000000..5f897a6
--- /dev/null
+++ b/web/components/palette-toggle.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { DropletsIcon, PaletteIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+type PaletteMode = "blue" | "green" | "gray"
+
+const PALETTE_STORAGE_KEY = "dashboard_palette"
+const DEFAULT_PALETTE: PaletteMode = "green"
+
+const paletteOptions: Array<{
+  value: PaletteMode
+  label: string
+  swatch: string
+}> = [
+  {
+    value: "green",
+    label: "温润服务绿",
+    swatch: "bg-teal-700",
+  },
+  {
+    value: "gray",
+    label: "中性精密灰",
+    swatch: "bg-slate-500",
+  },
+  {
+    value: "blue",
+    label: "清透科技蓝",
+    swatch: "bg-blue-600",
+  },
+]
+
+function readPalette(): PaletteMode {
+  if (typeof window === "undefined") {
+    return DEFAULT_PALETTE
+  }
+
+  const stored = window.localStorage.getItem(PALETTE_STORAGE_KEY)
+  return stored === "blue" || stored === "green" || stored === "gray"
+    ? stored
+    : DEFAULT_PALETTE
+}
+
+function applyPalette(value: PaletteMode) {
+  document.documentElement.dataset.palette = value
+  window.localStorage.setItem(PALETTE_STORAGE_KEY, value)
+}
+
+export function PaletteToggle() {
+  const [palette, setPalette] = useState<PaletteMode>(DEFAULT_PALETTE)
+
+  useEffect(() => {
+    const storedPalette = readPalette()
+    setPalette(storedPalette)
+    applyPalette(storedPalette)
+  }, [])
+
+  function handleChange(value: string) {
+    const nextPalette: PaletteMode =
+      value === "blue" || value === "gray" ? value : "green"
+    setPalette(nextPalette)
+    applyPalette(nextPalette)
+  }
+
+  const ActiveIcon = palette === "green" ? DropletsIcon : PaletteIcon
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={<Button variant="outline" size="sm" />}
+        aria-label="切换主题色"
+      >
+        <ActiveIcon />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-52 min-w-52">
+        <DropdownMenuRadioGroup value={palette} onValueChange={handleChange}>
+          {paletteOptions.map((option) => (
+            <DropdownMenuRadioItem key={option.value} value={option.value}>
+              <span className={`size-2.5 rounded-full ${option.swatch}`} />
+              <span className="flex-1">{option.label}</span>
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/web/components/site-header.tsx b/web/components/site-header.tsx
index 02ed92d..c3f18be 100644
--- a/web/components/site-header.tsx
+++ b/web/components/site-header.tsx
@@ -6,6 +6,7 @@ import { usePathname } from "next/navigation"
 import { RealtimeConnectionStatus } from "@/components/realtime-connection-status"
 import { getPageTitle } from "@/lib/navigation"
 import { useAgentConversationsStore } from "@/lib/stores/agent-conversations"
+import { PaletteToggle } from "@/components/palette-toggle"
 import { ThemeToggle } from "@/components/theme-toggle"
 import {
   Breadcrumb,
@@ -50,7 +51,7 @@ export function SiteHeader() {
   }, [isMobile, open])
 
   return (
-    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b border-border/70 bg-background/82 backdrop-blur supports-[backdrop-filter]:bg-background/72 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
       <div className="flex w-full items-center justify-between gap-3 px-4 lg:px-6">
         <div className="flex min-w-0 items-center gap-2">
           <SidebarTrigger className="-ml-1" />
@@ -73,7 +74,8 @@ export function SiteHeader() {
             </Breadcrumb>
           </div>
         </div>
-        <div className="flex items-center justify-end gap-3">
+        <div className="flex items-center justify-end gap-2">
+          <PaletteToggle />
           <ThemeToggle />
         </div>
       </div>