Add Frontend 增加一层渐变背景色

frontend/src/styles/globals.css

@@ -102,6 +102,49 @@
   --sidebar-ring: rgba(226, 0, 116, 0.45);
 }
 
+/* Dim mode — Indigo Dusk: deep navy-purple mid-tone between dark and light */
+.dim {
+  --t-bg: #1e1b2e;
+  --t-bg-card: #252237;
+  --t-bg-hover: #2d2945;
+  --t-bg-elevated: #292541;
+  --t-border: #3a3650;
+  --t-border-light: #504c6e;
+  --t-text: #f0eeff;
+  --t-text2: #b8b4d8;
+  --t-text3: #7a7698;
+  --t-green: #00c4a0;
+  --t-orange: #ff8820;
+  --t-accent-glow: rgba(226,0,116,0.14);
+  --t-pattern-opacity: 0.04;
+  --background: var(--t-bg);
+  --foreground: var(--t-text);
+  --card: var(--t-bg-card);
+  --card-foreground: var(--t-text);
+  --popover: var(--t-bg-card);
+  --popover-foreground: var(--t-text);
+  --primary: #e20074;
+  --primary-foreground: #ffffff;
+  --secondary: var(--t-bg-hover);
+  --secondary-foreground: var(--t-text);
+  --muted: var(--t-bg-hover);
+  --muted-foreground: var(--t-text3);
+  --accent: rgba(226, 0, 116, 0.12);
+  --accent-foreground: #f04090;
+  --destructive: #ff4444;
+  --border: var(--t-border);
+  --input: var(--t-border-light);
+  --ring: rgba(226, 0, 116, 0.40);
+  --sidebar: var(--t-bg-card);
+  --sidebar-foreground: var(--t-text);
+  --sidebar-primary: #e20074;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: var(--t-bg-hover);
+  --sidebar-accent-foreground: var(--t-text);
+  --sidebar-border: var(--t-border);
+  --sidebar-ring: rgba(226, 0, 116, 0.40);
+}
+
 /* Base styles */
 * {
   box-sizing: border-box;
@@ -130,6 +173,13 @@ body.dark-mode {
   background: #0a0a12;
 }
 
+/* Dim mode body */
+.dim body,
+body.dim-mode {
+  color: #f0eeff;
+  background: #1e1b2e;
+}
+
 /* Selection */
 ::selection {
   background: rgba(226, 0, 116, 0.3);
@@ -200,17 +250,22 @@ button, input {
   background: linear-gradient(180deg, #12121f, #0a0a12);
 }
 
+/* Card gradient for dim mode */
+.dim .t-card-gradient {
+  background: linear-gradient(180deg, #e8e5f4, #f0eef8);
+}
+
 /* Card gradient for light mode */
-:not(.dark) .t-card-gradient {
+:not(.dark):not(.dim) .t-card-gradient {
   background: linear-gradient(180deg, #ffffff, #fafafa);
 }
 
 /* Light mode shadow for cards */
-:not(.dark) .t-card-shadow {
+:not(.dark):not(.dim) .t-card-shadow {
   box-shadow: 0 2px 8px rgba(226,0,116,0.04);
 }
 
-:not(.dark) .t-card-shadow-lg {
+:not(.dark):not(.dim) .t-card-shadow-lg {
   box-shadow: 0 4px 16px rgba(226,0,116,0.08);
 }