feat: add 5 modern light themes (Catppuccin Latte, GitHub Light, Tokyo Night Day, Solarized Light, One Light)
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user