diff --git a/src/renderer/css/app.css b/src/renderer/css/app.css index 57d9a6d..9f758ce 100644 --- a/src/renderer/css/app.css +++ b/src/renderer/css/app.css @@ -98,7 +98,7 @@ body { } .btn-icon:hover { - background: rgba(255, 255, 255, 0.08); + background: var(--btn-hover, rgba(255, 255, 255, 0.08)); color: var(--text-bright); } @@ -130,7 +130,7 @@ body { } .win-btn:hover { - background: rgba(255, 255, 255, 0.08); + background: var(--btn-hover, rgba(255, 255, 255, 0.08)); color: var(--text-bright); } diff --git a/src/renderer/css/components.css b/src/renderer/css/components.css index b27dfc0..7aa254f 100644 --- a/src/renderer/css/components.css +++ b/src/renderer/css/components.css @@ -33,7 +33,7 @@ } .statusbar-item.clickable:hover { - background: rgba(255, 255, 255, 0.08); + background: var(--btn-hover, rgba(255, 255, 255, 0.08)); color: var(--text-bright); } @@ -118,7 +118,7 @@ .palette-item.selected, .palette-item:hover { background: var(--accent-color); - color: #0f141c; + color: var(--accent-text, #0f141c); font-weight: 600; } @@ -130,9 +130,10 @@ .palette-shortcut { font-size: 11px; - opacity: 0.7; + opacity: 0.85; font-family: var(--font-mono); - background: rgba(0, 0, 0, 0.2); + background: var(--kbd-bg, rgba(0, 0, 0, 0.2)); + color: inherit; padding: 2px 6px; border-radius: 3px; } @@ -211,6 +212,11 @@ border-color: var(--border-active); } +.setting-control select option { + background: var(--bg-titlebar); + color: var(--text-bright); +} + /* 终端内搜索条 */ .search-bar { position: absolute; diff --git a/src/renderer/css/tabs.css b/src/renderer/css/tabs.css index 893263e..cd65761 100644 --- a/src/renderer/css/tabs.css +++ b/src/renderer/css/tabs.css @@ -96,6 +96,6 @@ } .new-tab-btn:hover { - background: rgba(255, 255, 255, 0.08); + background: var(--btn-hover, rgba(255, 255, 255, 0.08)); color: var(--accent-color); } diff --git a/src/renderer/css/variables.css b/src/renderer/css/variables.css index 2f83f09..55dcc25 100644 --- a/src/renderer/css/variables.css +++ b/src/renderer/css/variables.css @@ -24,6 +24,10 @@ --terminal-font-size: 14px; --terminal-line-height: 1.25; + + --btn-hover: rgba(255, 255, 255, 0.08); + --kbd-bg: rgba(0, 0, 0, 0.2); + --accent-text: #0f141c; } /* Tokyo Night */ @@ -36,8 +40,11 @@ --border-active: #7aa2f7; --text-main: #c0caf5; --text-muted: #565f89; + --text-bright: #ffffff; --accent-color: #7aa2f7; --accent-glow: rgba(122, 162, 247, 0.3); + --btn-hover: rgba(255, 255, 255, 0.08); + --kbd-bg: rgba(0, 0, 0, 0.2); } /* Catppuccin Mocha */ @@ -50,8 +57,11 @@ --border-active: #cba6f7; --text-main: #cdd6f4; --text-muted: #6c7086; + --text-bright: #ffffff; --accent-color: #cba6f7; --accent-glow: rgba(203, 166, 247, 0.3); + --btn-hover: rgba(255, 255, 255, 0.08); + --kbd-bg: rgba(0, 0, 0, 0.2); } /* Dracula */ @@ -64,8 +74,11 @@ --border-active: #bd93f9; --text-main: #f8f8f2; --text-muted: #6272a4; + --text-bright: #ffffff; --accent-color: #ff79c6; --accent-glow: rgba(255, 121, 198, 0.3); + --btn-hover: rgba(255, 255, 255, 0.08); + --kbd-bg: rgba(0, 0, 0, 0.2); } /* One Dark */ @@ -78,8 +91,11 @@ --border-active: #61afef; --text-main: #abb2bf; --text-muted: #5c6370; + --text-bright: #ffffff; --accent-color: #61afef; --accent-glow: rgba(97, 175, 239, 0.3); + --btn-hover: rgba(255, 255, 255, 0.08); + --kbd-bg: rgba(0, 0, 0, 0.2); } /* Cyberpunk Neon */ @@ -92,6 +108,107 @@ --border-active: #00ffcc; --text-main: #e2f0fb; --text-muted: #4e6a88; + --text-bright: #ffffff; --accent-color: #ff007f; --accent-glow: rgba(255, 0, 127, 0.4); + --btn-hover: rgba(255, 255, 255, 0.08); + --kbd-bg: rgba(0, 0, 0, 0.2); + --accent-text: #ffffff; +} + +/* ==================== 高品质浅色主题系列 ==================== */ + +/* Catppuccin Latte */ +[data-theme="catppuccin-latte"] { + --bg-app: rgba(239, 241, 245, 0.94); + --bg-titlebar: rgba(230, 233, 239, 0.96); + --bg-tab-active: rgba(220, 224, 232, 0.98); + --bg-tab-inactive: rgba(239, 241, 245, 0.65); + --bg-tab-hover: rgba(230, 233, 239, 0.9); + --border-color: rgba(76, 79, 105, 0.15); + --border-active: #1e66f5; + --text-main: #4c4f69; + --text-muted: #7c7f93; + --text-bright: #1e1e2e; + --accent-color: #1e66f5; + --accent-glow: rgba(30, 102, 245, 0.25); + --btn-hover: rgba(0, 0, 0, 0.06); + --kbd-bg: rgba(0, 0, 0, 0.06); + --accent-text: #ffffff; +} + +/* GitHub Light */ +[data-theme="github-light"] { + --bg-app: rgba(255, 255, 255, 0.96); + --bg-titlebar: rgba(246, 248, 250, 0.98); + --bg-tab-active: rgba(255, 255, 255, 0.98); + --bg-tab-inactive: rgba(246, 248, 250, 0.7); + --bg-tab-hover: rgba(240, 242, 245, 0.9); + --border-color: rgba(31, 35, 40, 0.15); + --border-active: #0969da; + --text-main: #24292f; + --text-muted: #6e7781; + --text-bright: #1f2328; + --accent-color: #0969da; + --accent-glow: rgba(9, 105, 218, 0.25); + --btn-hover: rgba(0, 0, 0, 0.06); + --kbd-bg: rgba(0, 0, 0, 0.06); + --accent-text: #ffffff; +} + +/* Tokyo Night Day */ +[data-theme="tokyo-night-day"] { + --bg-app: rgba(225, 226, 231, 0.94); + --bg-titlebar: rgba(213, 214, 219, 0.96); + --bg-tab-active: rgba(235, 236, 240, 0.98); + --bg-tab-inactive: rgba(225, 226, 231, 0.65); + --bg-tab-hover: rgba(213, 214, 219, 0.9); + --border-color: rgba(55, 96, 191, 0.15); + --border-active: #2e7de9; + --text-main: #3760bf; + --text-muted: #6172b0; + --text-bright: #182848; + --accent-color: #2e7de9; + --accent-glow: rgba(46, 125, 233, 0.25); + --btn-hover: rgba(0, 0, 0, 0.06); + --kbd-bg: rgba(0, 0, 0, 0.06); + --accent-text: #ffffff; +} + +/* Solarized Light */ +[data-theme="solarized-light"] { + --bg-app: rgba(253, 246, 227, 0.94); + --bg-titlebar: rgba(238, 232, 213, 0.96); + --bg-tab-active: rgba(245, 239, 223, 0.98); + --bg-tab-inactive: rgba(253, 246, 227, 0.65); + --bg-tab-hover: rgba(238, 232, 213, 0.9); + --border-color: rgba(101, 123, 131, 0.18); + --border-active: #268bd2; + --text-main: #657b83; + --text-muted: #93a1a1; + --text-bright: #073642; + --accent-color: #268bd2; + --accent-glow: rgba(38, 139, 210, 0.25); + --btn-hover: rgba(0, 0, 0, 0.06); + --kbd-bg: rgba(0, 0, 0, 0.06); + --accent-text: #ffffff; +} + +/* One Light */ +[data-theme="one-light"] { + --bg-app: rgba(250, 250, 250, 0.95); + --bg-titlebar: rgba(240, 240, 240, 0.98); + --bg-tab-active: rgba(255, 255, 255, 0.98); + --bg-tab-inactive: rgba(240, 240, 240, 0.7); + --bg-tab-hover: rgba(230, 230, 230, 0.9); + --border-color: rgba(56, 58, 66, 0.15); + --border-active: #4078f2; + --text-main: #383a42; + --text-muted: #6f7179; + --text-bright: #202227; + --accent-color: #4078f2; + --accent-glow: rgba(64, 120, 242, 0.25); + --btn-hover: rgba(0, 0, 0, 0.06); + --kbd-bg: rgba(0, 0, 0, 0.06); + --accent-text: #ffffff; } diff --git a/src/renderer/js/theme-manager.js b/src/renderer/js/theme-manager.js index 59800da..1be6c82 100644 --- a/src/renderer/js/theme-manager.js +++ b/src/renderer/js/theme-manager.js @@ -140,6 +140,146 @@ export const THEMES = { brightWhite: '#ffffff', }, }, + 'catppuccin-latte': { + name: 'Catppuccin Latte (浅色)', + themeName: 'catppuccin-latte', + xterm: { + background: '#eff1f5', + foreground: '#4c4f69', + cursor: '#dc8a78', + cursorAccent: '#eff1f5', + selectionBackground: '#ccd0da', + selectionForeground: '#4c4f69', + black: '#5c5f77', + red: '#d20f39', + green: '#40a02b', + yellow: '#df8e1d', + blue: '#1e66f5', + magenta: '#ea76cb', + cyan: '#179299', + white: '#acb0be', + brightBlack: '#6c6f85', + brightRed: '#d20f39', + brightGreen: '#40a02b', + brightYellow: '#df8e1d', + brightBlue: '#1e66f5', + brightMagenta: '#ea76cb', + brightCyan: '#179299', + brightWhite: '#bcc0cc', + }, + }, + 'github-light': { + name: 'GitHub Light (浅色)', + themeName: 'github-light', + xterm: { + background: '#ffffff', + foreground: '#24292f', + cursor: '#0969da', + cursorAccent: '#ffffff', + selectionBackground: '#b6e3ff', + selectionForeground: '#24292f', + black: '#24292f', + red: '#cf222e', + green: '#1a7f37', + yellow: '#9a6700', + blue: '#0969da', + magenta: '#8250df', + cyan: '#1b7c83', + white: '#6e7781', + brightBlack: '#57606a', + brightRed: '#a40e26', + brightGreen: '#116329', + brightYellow: '#633c01', + brightBlue: '#0550ae', + brightMagenta: '#6639ba', + brightCyan: '#114c53', + brightWhite: '#8c959f', + }, + }, + 'tokyo-night-day': { + name: 'Tokyo Night Day (浅色)', + themeName: 'tokyo-night-day', + xterm: { + background: '#e1e2e7', + foreground: '#3760bf', + cursor: '#3760bf', + cursorAccent: '#e1e2e7', + selectionBackground: '#b7c1e3', + selectionForeground: '#3760bf', + black: '#e9e9ed', + red: '#f52a65', + green: '#587539', + yellow: '#8c6c3e', + blue: '#2e7de9', + magenta: '#9854f1', + cyan: '#007197', + white: '#6172b0', + brightBlack: '#a1a6c5', + brightRed: '#f52a65', + brightGreen: '#587539', + brightYellow: '#8c6c3e', + brightBlue: '#2e7de9', + brightMagenta: '#9854f1', + brightCyan: '#007197', + brightWhite: '#3760bf', + }, + }, + 'solarized-light': { + name: 'Solarized Light (浅色)', + themeName: 'solarized-light', + xterm: { + background: '#fdf6e3', + foreground: '#657b83', + cursor: '#586e75', + cursorAccent: '#fdf6e3', + selectionBackground: '#eee8d5', + selectionForeground: '#586e75', + black: '#073642', + red: '#dc322f', + green: '#859900', + yellow: '#b58900', + blue: '#268bd2', + magenta: '#d33682', + cyan: '#2aa198', + white: '#eee8d5', + brightBlack: '#002b36', + brightRed: '#cb4b16', + brightGreen: '#586e75', + brightYellow: '#657b83', + brightBlue: '#839496', + brightMagenta: '#6c71c4', + brightCyan: '#93a1a1', + brightWhite: '#fdf6e3', + }, + }, + 'one-light': { + name: 'One Light (浅色)', + themeName: 'one-light', + xterm: { + background: '#fafafa', + foreground: '#383a42', + cursor: '#526fff', + cursorAccent: '#fafafa', + selectionBackground: '#e5e5e6', + selectionForeground: '#383a42', + black: '#383a42', + red: '#e45649', + green: '#50a14f', + yellow: '#c18401', + blue: '#4078f2', + magenta: '#a626a4', + cyan: '#0184bc', + white: '#a0a1a7', + brightBlack: '#4f525d', + brightRed: '#e06c75', + brightGreen: '#98c379', + brightYellow: '#e5c07b', + brightBlue: '#61afef', + brightMagenta: '#c678dd', + brightCyan: '#56b6c2', + brightWhite: '#ffffff', + }, + }, }; class ThemeManager {