From 1520fa499da0bdefbb1a4e7ade98ff46e3db3506 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 12:48:51 +0000 Subject: [PATCH] Fix dark mode sync not applying theme correctly on page load When syncDeviceDarkMode is enabled and the device's dark mode preference changes between sessions, the theme would not be reapplied on page load if there was a cached theme. This caused a visual mismatch where the data-color-scheme attribute was correct but the actual theme CSS variables were from the wrong theme. The fix checks if the cached color scheme matches the current dark mode state and forces immediate theme application if they differ. Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> --- packages/frontend/src/boot/common.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts index 4becf32ab5..f0ee737f1b 100644 --- a/packages/frontend/src/boot/common.ts +++ b/packages/frontend/src/boot/common.ts @@ -166,6 +166,10 @@ export async function common(createVue: () => Promise>) { // NOTE: この処理は必ずクライアント更新チェック処理より後に来ること(テーマ再構築のため) // NOTE: この処理は必ずダークモード判定処理より後に来ること(初回のテーマ適用のため) // see: https://github.com/misskey-dev/misskey/issues/16562 + const cachedColorScheme = miLocalStorage.getItem('colorScheme'); + const currentColorScheme = store.s.darkMode ? 'dark' : 'light'; + const shouldApplyThemeImmediately = isSafeMode || miLocalStorage.getItem('theme') == null || cachedColorScheme !== currentColorScheme; + watch(store.r.darkMode, (darkMode) => { const theme = (() => { if (darkMode) { @@ -176,7 +180,7 @@ export async function common(createVue: () => Promise>) { })(); applyTheme(theme); - }, { immediate: isSafeMode || miLocalStorage.getItem('theme') == null }); + }, { immediate: shouldApplyThemeImmediately }); window.document.documentElement.dataset.colorScheme = store.s.darkMode ? 'dark' : 'light';