From 9d431cc7ae28c466e61cb115e5cfe205d036efb1 Mon Sep 17 00:00:00 2001 From: Jason Date: Sun, 16 Nov 2025 10:44:15 +0800 Subject: [PATCH] style(ui): migrate color scheme to macOS native design system - Update primary blue from Linear style (#3498db) to macOS system blue (#0A84FF) - Align gray scale with macOS dark mode palette (#1C1C1E, #2C2C2E, etc.) - Adjust dark mode background to match macOS systemBackground (HSL 240 5% 12%) - Refine scrollbar colors to use native macOS gray tones - Remove transparent titleBarStyle for better stability --- src-tauri/tauri.conf.json | 3 +-- src/index.css | 35 ++++++++++++++++---------------- tailwind.config.js | 42 +++++++++++++++++++-------------------- 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 9008afb..a66f8d9 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -19,8 +19,7 @@ "minWidth": 800, "minHeight": 600, "resizable": true, - "fullscreen": false, - "titleBarStyle": "Transparent" + "fullscreen": false } ], "security": { diff --git a/src/index.css b/src/index.css index d8fbc42..929d4f4 100644 --- a/src/index.css +++ b/src/index.css @@ -14,8 +14,8 @@ --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; - /* 主色调:蓝色 (bg-blue-500) */ - --primary: 217 91% 60%; + /* 主色调:macOS 风格系统蓝 */ + --primary: 210 100% 56%; --primary-foreground: 0 0% 100%; /* 次要色:淡蓝灰 */ @@ -35,38 +35,39 @@ /* 边框和输入框 */ --border: 240 5.9% 90%; --input: 240 5.9% 90%; - --ring: 217 91% 60%; + --ring: 210 100% 56%; --radius: 0.5rem; } .dark { - --background: 240 10% 3.9%; + /* 背景与卡片:接近 macOS 深色 systemBackground / windowBackground */ + --background: 240 5% 12%; --foreground: 0 0% 98%; - --card: 240 10% 3.9%; + --card: 240 5% 16%; --card-foreground: 0 0% 98%; - --popover: 240 10% 3.9%; + --popover: 240 5% 16%; --popover-foreground: 0 0% 98%; - /* 暗色模式主色调:稍深的蓝色 (bg-blue-600) */ - --primary: 217 91% 55%; + /* 暗色模式主色调:macOS 风格系统蓝(略微降低亮度) */ + --primary: 210 100% 54%; --primary-foreground: 0 0% 100%; - --secondary: 240 3.7% 15.9%; + --secondary: 240 5% 18%; --secondary-foreground: 0 0% 98%; - --muted: 240 3.7% 15.9%; + --muted: 240 5% 18%; --muted-foreground: 240 5% 64.9%; - --accent: 240 3.7% 15.9%; + --accent: 240 5% 18%; --accent-foreground: 0 0% 98%; /* 暗色模式危险色 */ --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --ring: 217 91% 55%; + --border: 240 5% 24%; + --input: 240 5% 24%; + --ring: 210 100% 54%; } } @@ -102,20 +103,20 @@ html.dark { background-color: #f4f4f5; } html.dark ::-webkit-scrollbar-track { - background-color: #27272a; + background-color: #1c1c1e; } ::-webkit-scrollbar-thumb { background-color: #d4d4d8; border-radius: 0.25rem; } html.dark ::-webkit-scrollbar-thumb { - background-color: #52525b; + background-color: #3a3a3c; } ::-webkit-scrollbar-thumb:hover { background-color: #a1a1aa; } html.dark ::-webkit-scrollbar-thumb:hover { - background-color: #71717a; + background-color: #636366; } /* 焦点样式 */ diff --git a/tailwind.config.js b/tailwind.config.js index 3f36133..1e028c8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,27 +6,27 @@ export default { ], theme: { extend: { - colors: { - // 扩展蓝色系列以匹配 Linear 风格 - blue: { - 500: '#3498db', - 600: '#2980b9', - 400: '#5dade2', - }, - // 自定义灰色系列 - gray: { - 50: '#fafafa', // bg-primary - 100: '#f4f4f5', // bg-tertiary - 200: '#e4e4e7', // border - 300: '#d4d4d8', // border-hover - 400: '#a1a1aa', // text-tertiary - 500: '#71717a', // text-secondary - 600: '#52525b', // text-secondary-dark - 700: '#3f3f46', // bg-tertiary-dark - 800: '#27272a', // bg-secondary-dark - 900: '#18181b', // text-primary - 950: '#0a0a0b', // bg-primary-dark - }, + colors: { + // macOS 风格系统蓝 + blue: { + 400: '#409CFF', + 500: '#0A84FF', + 600: '#0060DF', + }, + // 自定义灰色系列(对齐 macOS 深色 System Gray) + gray: { + 50: '#fafafa', // bg-primary + 100: '#f4f4f5', // bg-tertiary + 200: '#e4e4e7', // border + 300: '#d4d4d8', // border-hover + 400: '#a1a1aa', // text-tertiary + 500: '#71717a', // text-secondary + 600: '#636366', // text-secondary-dark / systemGray2 + 700: '#48484A', // bg-tertiary-dark / separators + 800: '#3A3A3C', // bg-secondary-dark + 900: '#2C2C2E', // header / modal bg + 950: '#1C1C1E', // app main bg + }, // 状态颜色 green: { 500: '#10b981',