usbharu
/
misskey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
copilot-swe-agent[bot] 2025-10-21 12:48:51 +00:00
parent bee53055c3
commit 1520fa499d
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/boot/common.ts
View File

@ -166,6 +166,10 @@ export async function common(createVue: () => Promise<App<Element>>) {
// 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<App<Element>>) {
})();
applyTheme(theme);
}, { immediate: isSafeMode || miLocalStorage.getItem('theme') == null });
}, { immediate: shouldApplyThemeImmediately });
window.document.documentElement.dataset.colorScheme = store.s.darkMode ? 'dark' : 'light';