feat(styles, useAppInit, DisplaySettings): 更新导航栏背景色和列表项样式,优化透明窗口设置

- 在 color.scss 中添加 Windows 版本的导航栏背景色。
- 修改 useAppInit 钩子以支持 Windows 和 Mac 的背景色设置。
- 更新 MainSidebar 的悬停样式以使用新的背景色。
- 在 DisplaySettings 中简化透明窗口设置的显示逻辑。
This commit is contained in:
Teo
2025-06-14 14:49:30 +08:00
parent 142b624001
commit 20a572aa46
4 changed files with 26 additions and 17 deletions
+13 -5
View File
@@ -54,6 +54,7 @@
--color-background-highlight-accent: rgba(255, 150, 50, 0.9);
--navbar-background-mac: rgba(20, 20, 20, 0.55);
--navbar-background-win: rgba(20, 20, 20, 0.75);
--navbar-background: #1f1f1f;
--navbar-height: 42px;
@@ -121,8 +122,8 @@
--color-reference-text: #000000;
--color-reference-background: #f1f7ff;
--color-list-item: rgba(255, 255, 255, 0.9);
--color-list-item-hover: rgba(255, 255, 255, 0.5);
--color-list-item: rgba(0, 0, 0, 0.05);
--color-list-item-hover: rgba(0, 0, 0, 0.03);
--modal-background: var(--color-white);
@@ -131,6 +132,7 @@
--color-background-highlight-accent: rgba(255, 150, 50, 0.5);
--navbar-background-mac: rgba(255, 255, 255, 0.55);
--navbar-background-win: rgba(255, 255, 255, 0.75);
--navbar-background: rgba(244, 244, 244);
--chat-background: transparent;
@@ -141,7 +143,13 @@
--border-width: 0.5px;
}
[transparent-window='false'] {
--color-list-item: var(--color-background-mute);
--color-list-item-hover: var(--color-background-soft);
[transparent-window='true'] {
&[theme-mode='light'] {
--color-list-item: rgba(255, 255, 255, 0.8);
--color-list-item-hover: rgba(255, 255, 255, 0.4);
}
&[theme-mode='dark'] {
--color-list-item: rgba(255, 255, 255, 0.1);
--color-list-item-hover: rgba(255, 255, 255, 0.05);
}
}
+6 -1
View File
@@ -1,3 +1,4 @@
import { isMac } from '@renderer/config/constant'
import { isLocalAi } from '@renderer/config/env'
import { useTheme } from '@renderer/context/ThemeProvider'
import db from '@renderer/databases'
@@ -67,7 +68,11 @@ export function useAppInit() {
return
}
window.root.style.background = !minappShow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
window.root.style.background = !minappShow
? isMac
? 'var(--navbar-background-mac)'
: 'var(--navbar-background-win)'
: 'var(--color-background)'
}, [minappShow, theme])
useEffect(() => {
@@ -355,7 +355,7 @@ const Icon = styled.div<{ theme: string }>`
height: 34px;
}
&:hover {
background-color: ${({ theme }) => (theme === 'dark' ? 'var(--color-black)' : 'var(--color-white)')};
background-color: var(--color-background-mute);
opacity: 0.8;
cursor: pointer;
.icon {
@@ -1,7 +1,7 @@
import { SyncOutlined } from '@ant-design/icons'
import CodeEditor from '@renderer/components/CodeEditor'
import { HStack } from '@renderer/components/Layout'
import { isMac, THEME_COLOR_PRESETS } from '@renderer/config/constant'
import { THEME_COLOR_PRESETS } from '@renderer/config/constant'
import { useTheme } from '@renderer/context/ThemeProvider'
import { useSettings } from '@renderer/hooks/useSettings'
import useUserTheme from '@renderer/hooks/useUserTheme'
@@ -199,15 +199,11 @@ const DisplaySettings: FC = () => {
/>
</HStack>
</SettingRow>
{isMac && (
<>
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.theme.window.style.transparent')}</SettingRowTitle>
<Switch checked={transparentWindow} onChange={setTransparentWindow} />
</SettingRow>
</>
)}
<SettingDivider />
<SettingRow>
<SettingRowTitle>{t('settings.theme.window.style.transparent')}</SettingRowTitle>
<Switch checked={transparentWindow} onChange={setTransparentWindow} />
</SettingRow>
</SettingGroup>
<SettingGroup theme={theme}>
<SettingTitle>{t('settings.display.zoom.title')}</SettingTitle>