From 36423eb5b57168d96a96576bb65223279d35c933 Mon Sep 17 00:00:00 2001 From: L4stIdi0t <75753024+L4stIdi0t@users.noreply.github.com> Date: Thu, 11 Jun 2026 15:32:15 +0200 Subject: [PATCH] Feat: system theme live update (#6197) * fix: restore fixed render mode for logs tab * feat: react to system theme changes in real time When the 'System' theme is selected, listen for OS-level prefers-color-scheme changes and update the app theme immediately, without requiring a restart. * Apply suggestion from @IMB11 Signed-off-by: Calum H. --------- Signed-off-by: Calum H. Co-authored-by: Calum H. Co-authored-by: Calum H. --- apps/app-frontend/src/routes.js | 1 - apps/app-frontend/src/store/theme.ts | 19 +++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js index da93b48e8..5764e6fdd 100644 --- a/apps/app-frontend/src/routes.js +++ b/apps/app-frontend/src/routes.js @@ -248,7 +248,6 @@ export default new createRouter({ component: Instance.Logs, meta: { useRootContext: true, - // renderMode: 'fixed', breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Logs' }], }, }, diff --git a/apps/app-frontend/src/store/theme.ts b/apps/app-frontend/src/store/theme.ts index 7f704e6fb..1380e4213 100644 --- a/apps/app-frontend/src/store/theme.ts +++ b/apps/app-frontend/src/store/theme.ts @@ -1,5 +1,7 @@ import { defineStore } from 'pinia' +let systemThemeMq: MediaQueryList | null = null + export const DEFAULT_FEATURE_FLAGS = { project_background: false, page_path: false, @@ -53,21 +55,22 @@ export const useTheming = defineStore('themeStore', { this.setThemeClass() }, setThemeClass() { + const html = document.getElementsByTagName('html')[0] for (const theme of THEME_OPTIONS) { - document.getElementsByTagName('html')[0].classList.remove(`${theme}-mode`) + html.classList.remove(`${theme}-mode`) } + systemThemeMq?.removeEventListener('change', this.setThemeClass) + systemThemeMq = null + let theme = this.selectedTheme if (this.selectedTheme === 'system') { - const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)') - if (darkThemeMq.matches) { - theme = 'dark' - } else { - theme = 'light' - } + systemThemeMq = window.matchMedia('(prefers-color-scheme: dark)') + systemThemeMq.addEventListener('change', this.setThemeClass) + theme = systemThemeMq.matches ? 'dark' : 'light' } - document.getElementsByTagName('html')[0].classList.add(`${theme}-mode`) + html.classList.add(`${theme}-mode`) }, getFeatureFlag(key: FeatureFlag) { return this.featureFlags[key] ?? DEFAULT_FEATURE_FLAGS[key]