diff --git a/src/renderer/src/connections/connections.css b/src/renderer/src/connections/connections.css
index 62476b3..8a2027c 100644
--- a/src/renderer/src/connections/connections.css
+++ b/src/renderer/src/connections/connections.css
@@ -346,7 +346,7 @@
}
.connections-local-item.is-active {
- background: rgba(63, 185, 80, 0.12);
+ background: color-mix(in srgb, var(--tab-accent, #3fb950) 12%, transparent);
}
.connections-local-name {
diff --git a/src/renderer/src/env.d.ts b/src/renderer/src/env.d.ts
index e8e6140..40cab1c 100644
--- a/src/renderer/src/env.d.ts
+++ b/src/renderer/src/env.d.ts
@@ -1,3 +1,5 @@
+///
+
import type { AppApi } from '../shared/api'
declare global {
diff --git a/src/renderer/src/global.css b/src/renderer/src/global.css
index 5551b7f..e2f001b 100644
--- a/src/renderer/src/global.css
+++ b/src/renderer/src/global.css
@@ -20,16 +20,16 @@ body,
font-size: 13px;
}
-/* App-wide slim dark scrollbars: the native Windows style renders light
+/* App-wide slim slate scrollbars: the native Windows style renders light
tracks + arrow buttons that look broken on the dark surface. */
* {
scrollbar-width: thin;
- scrollbar-color: rgba(121, 121, 121, 0.45) transparent;
+ scrollbar-color: rgba(125, 145, 170, 0.5) transparent;
}
*::-webkit-scrollbar {
- width: 10px;
- height: 10px;
+ width: 12px;
+ height: 12px;
}
*::-webkit-scrollbar-track {
@@ -37,12 +37,17 @@ body,
}
*::-webkit-scrollbar-thumb {
- background: rgba(121, 121, 121, 0.45);
- border-radius: 5px;
+ background: rgba(125, 145, 170, 0.5);
+ border: 3px solid transparent;
+ border-radius: 6px;
+ background-clip: padding-box;
+ min-height: 28px;
}
*::-webkit-scrollbar-thumb:hover {
- background: rgba(160, 160, 160, 0.6);
+ background: rgba(150, 172, 200, 0.7);
+ border: 3px solid transparent;
+ background-clip: padding-box;
}
*::-webkit-scrollbar-button,
@@ -80,6 +85,14 @@ button {
letter-spacing: 0.2px;
}
+.app-titlebar-icon {
+ width: 16px;
+ height: 16px;
+ margin-right: 7px;
+ border-radius: 4px;
+ pointer-events: none;
+}
+
.app-titlebar-title {
opacity: 0.75;
font-weight: 500;
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index d707d1f..a7fdabc 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -1,12 +1,14 @@
import ReactDOM from 'react-dom/client'
-import { useEffect } from 'react'
+import { useEffect, type ReactNode } from 'react'
import { App as AntdApp, ConfigProvider, theme as antdTheme } from 'antd'
import type { AppApi } from '@shared/api'
import { DEFAULT_SETTINGS } from '@shared/settings'
+import { getThemeById } from '@shared/theme'
import App from './App'
import { ErrorBoundary } from './ErrorBoundary'
import ZmodemOffers from './workspace/ZmodemOffers'
import { useSettingsStore } from './settings/store'
+import { mix } from './theme/chrome'
import './global.css'
// Dev convenience: allow opening the renderer in a plain browser (vite page)
@@ -148,13 +150,33 @@ function FontHotkeyListener(): null {
// antd
provides the context that App.useApp() consumers (workspace
// message/notification) rely on; without it they get empty stubs and crash.
// ErrorBoundary keeps any render crash from black-screening the whole window.
+
+/** antd surfaces (settings dialog, menus, popovers) follow the terminal theme:
+ * base/container/elevated backgrounds derive from the theme's background. */
+function ThemedConfigProvider({ children }: { children: ReactNode }): React.JSX.Element {
+ const themeId = useSettingsStore((s) => s.settings.terminal.themeId)
+ const customThemes = useSettingsStore((s) => s.settings.customThemes)
+ const colors = getThemeById(themeId, customThemes).colors
+ return (
+
+ {children}
+
+ )
+}
+
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-
+
@@ -162,5 +184,5 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-
+
)
diff --git a/src/renderer/src/settings/ThemeSettingsTab.tsx b/src/renderer/src/settings/ThemeSettingsTab.tsx
index 5ab1610..52941d6 100644
--- a/src/renderer/src/settings/ThemeSettingsTab.tsx
+++ b/src/renderer/src/settings/ThemeSettingsTab.tsx
@@ -1,5 +1,5 @@
import { useMemo } from 'react'
-import { Button, Popconfirm } from 'antd'
+import { Button, ColorPicker, Popconfirm } from 'antd'
import type { TerminalSettings } from '@shared/settings'
import { DEFAULT_SETTINGS } from '@shared/settings'
import type { TerminalTheme, ThemeColors } from '@shared/theme'
@@ -46,7 +46,26 @@ export function ThemeSettingsTab({
}
return (
-
+
+
+
+
标签强调色
+
活动标签边框、侧栏指示条与 SSH 徽章的强调颜色
+
+
+ void updateTerminal({ tabAccentColor: color.toHexString() })}
+ />
+
+
+
+
{themeCards.map((t) => {
const selected = t.id === activeTheme.id
const isCustom = t.builtin === false
@@ -116,6 +135,7 @@ export function ThemeSettingsTab({
+
新建主题
+