Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-26 20:12:38 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(ThemeProvider, color.scss, useAppInit): integrate transparent window settings and update styles

Browse Source
This commit is contained in:
kangfenmao 2025-06-14 10:36:45 +08:00
parent 3775562956
commit 142b624001
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/renderer/src/assets/styles/color.scss
View File

@ -140,3 +140,8 @@
--border-width: 0.5px;
}
[transparent-window='false'] {
--color-list-item: var(--color-background-mute);
--color-list-item-hover: var(--color-background-soft);
}

5
src/renderer/src/context/ThemeProvider.tsx
View File

@ -23,7 +23,7 @@ interface ThemeProviderProps extends PropsWithChildren {
export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
// 用户设置的主题
const { theme: settedTheme, setTheme: setSettedTheme } = useSettings()
const { theme: settedTheme, setTheme: setSettedTheme, transparentWindow } = useSettings()
const [actualTheme, setActualTheme] = useState<ThemeMode>(
window.matchMedia('(prefers-color-scheme: dark)').matches ? ThemeMode.dark : ThemeMode.light
)
@ -42,6 +42,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
// Set initial theme and OS attributes on body
document.body.setAttribute('os', isMac ? 'mac' : 'windows')
document.body.setAttribute('theme-mode', actualTheme)
document.body.setAttribute('transparent-window', transparentWindow ? 'true' : 'false')
// if theme is old auto, then set theme to system
// we can delete this after next big release
@ -56,7 +57,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
document.body.setAttribute('theme-mode', actualTheme)
setActualTheme(actualTheme)
})
}, [actualTheme, initUserTheme, setSettedTheme, settedTheme])
}, [actualTheme, initUserTheme, setSettedTheme, settedTheme, transparentWindow])
useEffect(() => {
window.api.setTheme(settedTheme)

4
src/renderer/src/hooks/useAppInit.ts
View File

@ -62,14 +62,12 @@ export function useAppInit() {
}, [language])
useEffect(() => {
const transparentWindow = !minappShow
if (minappShow) {
window.root.style.background = 'var(--color-background)'
return
}
window.root.style.background = transparentWindow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
window.root.style.background = !minappShow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
}, [minappShow, theme])
useEffect(() => {