zzzjy/hatty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: add 5 modern light themes (Catppuccin Latte, GitHub Light, Tokyo Night Day, Solarized Light, One Light)

Browse Source
This commit is contained in:
zzzjy
2026-09-24 00:27:14 +08:00
parent e543ee6283
commit b351057f5f
5 changed files with 270 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/css/app.css
+2 -2
View File
@@ -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);
}
src/renderer/css/components.css
+10 -4
View File
@@ -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;
src/renderer/css/tabs.css
+1 -1
View File
@@ -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);
}
src/renderer/css/variables.css
+117
View File
@@ -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;
}