diff --git a/src/renderer/src/assets/styles/color.scss b/src/renderer/src/assets/styles/color.scss index 829c58c146..2e90b5a1aa 100644 --- a/src/renderer/src/assets/styles/color.scss +++ b/src/renderer/src/assets/styles/color.scss @@ -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); + } } diff --git a/src/renderer/src/hooks/useAppInit.ts b/src/renderer/src/hooks/useAppInit.ts index d068197f91..3eea2e73c6 100644 --- a/src/renderer/src/hooks/useAppInit.ts +++ b/src/renderer/src/hooks/useAppInit.ts @@ -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(() => { diff --git a/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx b/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx index 5e3f313580..93782fa5db 100644 --- a/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx +++ b/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx @@ -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 { diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx index 74863ec0e7..ae57225b77 100644 --- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx +++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx @@ -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 = () => { /> - {isMac && ( - <> - - - {t('settings.theme.window.style.transparent')} - - - - )} + + + {t('settings.theme.window.style.transparent')} + + {t('settings.display.zoom.title')}