OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix menu dark theme detection

pull/6784/head
Chocobozzz 2024-12-11 16:24:27 +01:00
parent 1dc6109989
commit 0b145cfc9a
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
1 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
client/src/app/core/theme/theme.service.ts
View File

@ -188,35 +188,36 @@ export class ThemeService {
this.oldInjectedProperties = [] this.oldInjectedProperties = []
const globalDarkTheme = this.isDarkTheme({ const isGlobalDarkTheme = () => {
fg: computedStyle.getPropertyValue('--fg') || computedStyle.getPropertyValue('--mainForegroundColor'), return this.isDarkTheme({
bg: computedStyle.getPropertyValue('--bg') || computedStyle.getPropertyValue('--mainBackgroundColor'), fg: computedStyle.getPropertyValue('--fg') || computedStyle.getPropertyValue('--mainForegroundColor'),
isDarkVar: computedStyle.getPropertyValue('--is-dark') bg: computedStyle.getPropertyValue('--bg') || computedStyle.getPropertyValue('--mainBackgroundColor'),
}) isDarkVar: computedStyle.getPropertyValue('--is-dark')
})
}
const darkMenuTheme = this.isDarkTheme({ const isMenuDarkTheme = () => {
fg: computedStyle.getPropertyValue('--menu-fg'), return this.isDarkTheme({
bg: computedStyle.getPropertyValue('--menu-bg'), fg: computedStyle.getPropertyValue('--menu-fg'),
isDarkVar: computedStyle.getPropertyValue('--is-menu-dark') bg: computedStyle.getPropertyValue('--menu-bg'),
}) isDarkVar: computedStyle.getPropertyValue('--is-menu-dark')
})
}
if (globalDarkTheme) debugLogger('Detected dark theme') const toProcess = [
if (darkMenuTheme) debugLogger('Detected dark menu theme') { prefix: 'primary', invertIfDark: true, step: 5, darkTheme: isGlobalDarkTheme },
{ prefix: 'on-primary', invertIfDark: true, step: 0, darkTheme: isGlobalDarkTheme },
{ prefix: 'bg-secondary', invertIfDark: true, step: 5, darkTheme: isGlobalDarkTheme },
{ prefix: 'fg', invertIfDark: true, fallbacks: { '--fg-300': '--greyForegroundColor' }, step: 5, darkTheme: isGlobalDarkTheme },
const toProcess: { prefix: string, invertIfDark: boolean, step: number, darkTheme: boolean, fallbacks?: Record<string, string> }[] = [ { prefix: 'menu-fg', invertIfDark: true, step: 5, darkTheme: isMenuDarkTheme },
{ prefix: 'primary', invertIfDark: true, step: 5, darkTheme: globalDarkTheme }, { prefix: 'menu-bg', invertIfDark: true, step: 5, darkTheme: isMenuDarkTheme }
{ prefix: 'on-primary', invertIfDark: true, step: 0, darkTheme: globalDarkTheme }, ] as { prefix: string, invertIfDark: boolean, step: number, darkTheme: () => boolean, fallbacks?: Record<string, string> }[]
{ prefix: 'bg-secondary', invertIfDark: true, step: 5, darkTheme: globalDarkTheme },
{ prefix: 'fg', invertIfDark: true, fallbacks: { '--fg-300': '--greyForegroundColor' }, step: 5, darkTheme: globalDarkTheme },
{ prefix: 'menu-fg', invertIfDark: true, step: 5, darkTheme: darkMenuTheme },
{ prefix: 'menu-bg', invertIfDark: true, step: 5, darkTheme: darkMenuTheme }
]
for (const { prefix, invertIfDark, step, darkTheme, fallbacks = {} } of toProcess) { for (const { prefix, invertIfDark, step, darkTheme, fallbacks = {} } of toProcess) {
const mainColor = computedStyle.getPropertyValue('--' + prefix) const mainColor = computedStyle.getPropertyValue('--' + prefix)
const darkInverter = invertIfDark && darkTheme const darkInverter = invertIfDark && darkTheme()
? -1 ? -1
: 1 : 1
@ -267,7 +268,7 @@ export class ThemeService {
} }
} }
document.body.dataset.bsTheme = globalDarkTheme document.body.dataset.bsTheme = isGlobalDarkTheme()
? 'dark' ? 'dark'
: '' : ''
} }
@ -348,6 +349,7 @@ export class ThemeService {
private removeThemeFromLocalStorageIfNeeded (themes: ServerConfigTheme[]) { private removeThemeFromLocalStorageIfNeeded (themes: ServerConfigTheme[]) {
if (!this.themeFromLocalStorage) return if (!this.themeFromLocalStorage) return
if (this.internalThemes.includes(this.themeFromLocalStorage.name)) return
const loadedTheme = themes.find(t => t.name === this.themeFromLocalStorage.name) const loadedTheme = themes.find(t => t.name === this.themeFromLocalStorage.name)
if (!loadedTheme || loadedTheme.version !== this.themeFromLocalStorage.version) { if (!loadedTheme || loadedTheme.version !== this.themeFromLocalStorage.version) {