mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-18 10:45:48 +02:00
Code Releases Activity

enhance(frontend): テーマの適用管理を改善 (#17376)

Browse Source 
* wip

* add test

* use themeManager.currentCompiledTheme for obtaining theme variables / reduce getComputedStyle usage

* fix

* fix: better error handling on theme installation

* Update Changelog

* chore: remove frontend-shared builds as it is currently working as a stub package

* fix: broken lockfile

* fix

* fix lint

* fix
This commit is contained in:
かっこかり
2026-05-07 11:42:45 +09:00
committed by GitHub
parent a82ba0d775
commit b528ff9c59
46 changed files with 722 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@ import type { App } from 'vue';
import widgets from '@/widgets/index.js';
import directives from '@/directives/index.js';
import components from '@/components/index.js';
import { applyTheme } from '@/theme.js';
import { themeManager } from '@/theme.js';
import { isDeviceDarkmode } from '@/utility/is-device-darkmode.js';
import { i18n } from '@/i18n.js';
import { refreshCurrentAccount, login } from '@/accounts.js';
@@ -161,7 +161,7 @@ export async function common(createVue: () => Promise<App<Element>>) {
// NOTE: この処理は必ずクライアント更新チェック処理より後に来ること(テーマ再構築のため)
// NOTE: この処理は必ずダークモード判定処理より後に来ること(初回のテーマ適用のため)
// NOTE: この処理は必ずサーバーテーマ適用処理より後に来ること(二重applyTheme発火を防ぐため)
// NOTE: この処理は必ずサーバーテーマ適用処理より後に来ること(二重発火を防ぐため)
// see: https://github.com/misskey-dev/misskey/issues/16562
watch(store.r.darkMode, (darkMode) => {
const theme = (() => {
@@ -172,7 +172,7 @@ export async function common(createVue: () => Promise<App<Element>>) {
}
})();
applyTheme(theme);
themeManager.updateTheme(theme);
}, { immediate: true });
window.document.documentElement.dataset.colorScheme = store.s.darkMode ? 'dark' : 'light';
@@ -180,13 +180,13 @@ export async function common(createVue: () => Promise<App<Element>>) {
if (!isSafeMode) {
watch(prefer.r.darkTheme, (theme) => {
if (store.s.darkMode) {
applyTheme(theme ?? defaultDarkTheme);
themeManager.updateTheme(theme ?? defaultDarkTheme);
}
});
watch(prefer.r.lightTheme, (theme) => {
if (!store.s.darkMode) {
applyTheme(theme ?? defaultLightTheme);
themeManager.updateTheme(theme ?? defaultLightTheme);
}
});
}