cabbage/local-mcp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui/theme): replace light theme with clean material design palette

Browse Source 
The previous light theme used warm/organic off-whites and muted tones
that felt muddy.  Replaced with a crisp material-inspired palette:
Surfaces
- bg-void   #f0f2f5  (cool-grey base)
- bg-base   #f5f7fa  (very light cool background)
- bg-raised #ffffff  (pure white cards)
- bg-hover  #e3e8f0  (clear interactive hover)
Typography
- text-primary   #1a202c  (near-black, high contrast)
- text-secondary #4a5568  (balanced mid-grey)
- text-muted     #8896a7  (clear but soft)
Accents (Material Design colour values)
- cyan  #0277bd  Blue 700 (replaces washed-out #007fa8)
- green #388e3c  Green 700
- amber #e65100  Deep Orange 900 (warmer, more material)
- red   #d32f2f  Red 700
Shadows
Dual-layer transparent shadows for better depth perception on light
backgrounds.
Also adds @keyframes fade-in-up used by the shortcuts add form.
This commit is contained in:
Brandon Zhang
2026-03-27 13:55:36 +08:00
parent 93bce1521b
commit 298ad54b5c
1 changed files with 39 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
static/css/base.css
View File

@@ -108,43 +108,49 @@
/* ── Light theme overrides ───────────────────────────────────────────────── */ /* ── Light theme overrides ───────────────────────────────────────────────── */
/* Applied when <html data-theme="light"> is set by theme.js */ /* Applied when <html data-theme="light"> is set by theme.js */
[data-theme="light"] { [data-theme="light"] {
--bg-void: #e8e8e3; /* Clean white/grey Material surfaces */
--bg-base: #f2f2ed; --bg-void: #f0f2f5;
--bg-base: #f5f7fa;
--bg-raised: #ffffff; --bg-raised: #ffffff;
--bg-overlay: #ebebe6; --bg-overlay: #eef1f5;
--bg-hover: #e2e2dc; --bg-hover: #e3e8f0;
--bg-active: #d8d8d2; --bg-active: #d6dde8;
--border-subtle: #d0d0ca; /* Crisp Material borders */
--border-muted: #c0c0b8; --border-subtle: #dde3ec;
--border-strong: #a8a8a0; --border-muted: #c5cdd9;
--border-strong: #a8b4c5;
--text-primary: #1a1f2e; /* High-contrast Material text */
--text-primary: #1a202c;
--text-secondary:#4a5568; --text-secondary:#4a5568;
--text-muted: #718096; --text-muted: #8896a7;
--text-disabled: #a0aec0; --text-disabled: #b2bfcc;
/* Slightly desaturated accents so they work on a light surface */ /* Material Blue 700 / 800 for accent */
--cyan: #007fa8; --cyan: #0277bd;
--cyan-dim: #005c7a; --cyan-dim: #01579b;
--cyan-glow: rgba(0, 127, 168, 0.14); --cyan-glow: rgba(2, 119, 189, 0.12);
--green: #166534; /* Material Green 700 */
--green-dim: #14532d; --green: #388e3c;
--green-glow: rgba(22, 101, 52, 0.12); --green-dim: #2e7d32;
--green-glow: rgba(56, 142, 60, 0.12);
--amber: #92400e; /* Material Amber 900 */
--amber-dim: #78350f; --amber: #e65100;
--amber-glow: rgba(146, 64, 14, 0.1); --amber-dim: #bf360c;
--amber-glow: rgba(230, 81, 0, 0.1);
--red: #b91c1c; /* Material Red 700 */
--red-dim: #7f1d1d; --red: #d32f2f;
--red-glow: rgba(185, 28, 28, 0.1); --red-dim: #b71c1c;
--red-glow: rgba(211, 47, 47, 0.1);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 16px rgba(0,0,0,0.1); --shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.06);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
--shadow-cyan: 0 0 20px rgba(0,127,168,0.1); --shadow-cyan: 0 0 16px rgba(2,119,189,0.1);
} }
/* ── Reset ──────────────────────────────────────────────────────────────── */ /* ── Reset ──────────────────────────────────────────────────────────────── */
@@ -190,3 +196,8 @@ body {
.muted { color: var(--text-muted); } .muted { color: var(--text-muted); }
.subtle { color: var(--text-secondary); } .subtle { color: var(--text-secondary); }
/* ── Utility animations ─────────────────────────────────────────────────── */
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}