- 
+
+
-
+
+
diff --git a/packages/webui/src/components/pages/settings-page.tsx b/packages/webui/src/components/pages/settings-page.tsx
index e3d92240..a98a1753 100644
--- a/packages/webui/src/components/pages/settings-page.tsx
+++ b/packages/webui/src/components/pages/settings-page.tsx
@@ -2078,7 +2078,7 @@ function AboutPanel() {
diff --git a/packages/webui/src/contexts/ThemeContext.tsx b/packages/webui/src/contexts/ThemeContext.tsx
index 0b8a2106..3813a910 100644
--- a/packages/webui/src/contexts/ThemeContext.tsx
+++ b/packages/webui/src/contexts/ThemeContext.tsx
@@ -46,7 +46,8 @@ export type AppearancePatch = Partial> & {
// ─── Frontend catalogues (the server stores only ids; the visuals live here) ───
-export type AccentColor = 'sky' | 'blue' | 'violet' | 'rose' | 'emerald' | 'amber' | 'orange';
+export type AccentColor =
+ 'lavender' | 'sky' | 'blue' | 'violet' | 'rose' | 'emerald' | 'amber' | 'orange';
export interface AccentSpec {
id: AccentColor;
@@ -57,6 +58,13 @@ export interface AccentSpec {
}
export const ACCENTS: AccentSpec[] = [
+ {
+ id: 'lavender',
+ label: '薰衣草',
+ swatch: '#8561bd',
+ light: { primary: 'oklch(57% 0.14 300)', ring: 'oklch(57% 0.14 300)' },
+ dark: { primary: 'oklch(78% 0.115 300)', ring: 'oklch(78% 0.115 300)' },
+ },
{
id: 'sky',
label: '天蓝',
@@ -198,15 +206,15 @@ export const UI_SCALE = { min: 0.9, max: 1.2, step: 0.05 } as const;
export const DEFAULT_APPEARANCE: UiAppearance = {
mode: 'system',
accentMode: 'preset',
- accentPreset: 'sky',
- accentCustom: '#38bdf8',
+ accentPreset: 'lavender',
+ accentCustom: '#8561bd',
accentScope: 'global',
darkIntensity: 'soft',
palette: 'default',
sidebarStyle: 'follow',
background: {
type: 'none',
- color: '#0ea5e9',
+ color: '#b99ae6',
gradient: 'none',
imageOpacity: 0.15,
imageBlur: 0,
@@ -327,7 +335,7 @@ function accentVarsCss(a: UiAppearance): string {
const surf = a.palette === 'default';
if (a.accentMode === 'custom') {
- const hex = safeHex(a.accentCustom, '#38bdf8');
+ const hex = safeHex(a.accentCustom, DEFAULT_APPEARANCE.accentCustom);
const lightFg = readableForeground(hex);
// Dark mode: lighten the accent for contrast on dark surfaces, and pick
// the foreground from the *lightened* colour (a light accent needs dark text).
@@ -590,7 +598,7 @@ export const PALETTE_OPTIONS: PaletteSpec[] = [
{
id: 'default',
label: '默认',
- preview: { bg: '#f1f5f9', surface: '#ffffff', dots: ['#0ea5e9', '#10b981', '#f43f5e'] },
+ preview: { bg: '#f1f5f9', surface: '#ffffff', dots: ['#8561bd', '#10b981', '#f43f5e'] },
},
{
id: 'catppuccin-latte',
diff --git a/packages/webui/src/index.css b/packages/webui/src/index.css
index 16e4ebfa..d5b6d5d8 100644
--- a/packages/webui/src/index.css
+++ b/packages/webui/src/index.css
@@ -4,7 +4,7 @@
@custom-variant dark (&:where(.dark, .dark *));
/* ──────────────────────────────────────────────
- Theme tokens (sky-blue accent)
+ Theme tokens (mascot lavender accent)
────────────────────────────────────────────── */
:root {
--radius: 0.75rem;
@@ -18,8 +18,8 @@
--popover: oklch(100% 0 0);
--popover-foreground: oklch(20% 0.03 250);
- /* sky-500 */
- --primary: oklch(68.5% 0.155 230);
+ /* A deeper lavender keeps light-mode button labels readable. */
+ --primary: oklch(57% 0.14 300);
--primary-foreground: oklch(99% 0.005 240);
--secondary: oklch(96% 0.012 240);
@@ -28,8 +28,8 @@
--muted: oklch(96% 0.012 240);
--muted-foreground: oklch(50% 0.02 250);
- --accent: oklch(94% 0.03 230);
- --accent-foreground: oklch(35% 0.07 230);
+ --accent: oklch(94% 0.03 300);
+ --accent-foreground: oklch(35% 0.07 300);
--destructive: oklch(60% 0.22 27);
--destructive-foreground: oklch(99% 0.005 240);
@@ -49,16 +49,16 @@
--border: oklch(92% 0.01 240);
--input: oklch(94% 0.012 240);
- --ring: oklch(68.5% 0.155 230);
+ --ring: oklch(57% 0.14 300);
--sidebar: oklch(94% 0.008 240);
--sidebar-foreground: oklch(25% 0.03 250);
- --sidebar-primary: oklch(68.5% 0.155 230);
+ --sidebar-primary: oklch(57% 0.14 300);
--sidebar-primary-foreground: oklch(99% 0.005 240);
- --sidebar-accent: oklch(90% 0.025 230);
- --sidebar-accent-foreground: oklch(35% 0.08 230);
+ --sidebar-accent: oklch(90% 0.025 300);
+ --sidebar-accent-foreground: oklch(35% 0.08 300);
--sidebar-border: oklch(92% 0.01 240);
- --sidebar-ring: oklch(68.5% 0.155 230);
+ --sidebar-ring: oklch(57% 0.14 300);
--media-outline: oklch(0% 0 0 / 0.1);
/* Cards need depth without turning every surface into a hard outlined box.
@@ -79,7 +79,7 @@
--popover: oklch(20% 0.025 250);
--popover-foreground: oklch(96% 0.01 240);
- --primary: oklch(75% 0.14 230);
+ --primary: oklch(78% 0.115 300);
--primary-foreground: oklch(15% 0.02 250);
--secondary: oklch(25% 0.025 250);
@@ -88,8 +88,8 @@
--muted: oklch(24% 0.02 250);
--muted-foreground: oklch(68% 0.02 240);
- --accent: oklch(28% 0.05 230);
- --accent-foreground: oklch(85% 0.1 230);
+ --accent: oklch(28% 0.05 300);
+ --accent-foreground: oklch(85% 0.1 300);
--destructive: oklch(62% 0.2 27);
--destructive-foreground: oklch(98% 0.005 240);
@@ -106,16 +106,16 @@
--border: oklch(28% 0.02 250);
--input: oklch(26% 0.02 250);
- --ring: oklch(75% 0.14 230);
+ --ring: oklch(78% 0.115 300);
--sidebar: oklch(12% 0.018 250);
--sidebar-foreground: oklch(92% 0.01 240);
- --sidebar-primary: oklch(75% 0.14 230);
+ --sidebar-primary: oklch(78% 0.115 300);
--sidebar-primary-foreground: oklch(15% 0.02 250);
- --sidebar-accent: oklch(28% 0.05 230);
- --sidebar-accent-foreground: oklch(85% 0.1 230);
+ --sidebar-accent: oklch(28% 0.05 300);
+ --sidebar-accent-foreground: oklch(85% 0.1 300);
--sidebar-border: oklch(26% 0.02 250);
- --sidebar-ring: oklch(75% 0.14 230);
+ --sidebar-ring: oklch(78% 0.115 300);
--media-outline: oklch(100% 0 0 / 0.12);
--shadow-card: