feat(styles, useAppInit, DisplaySettings): 更新导航栏背景色和列表项样式,优化透明窗口设置
- 在 color.scss 中添加 Windows 版本的导航栏背景色。 - 修改 useAppInit 钩子以支持 Windows 和 Mac 的背景色设置。 - 更新 MainSidebar 的悬停样式以使用新的背景色。 - 在 DisplaySettings 中简化透明窗口设置的显示逻辑。
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user