diff --git a/CHANGELOG.md b/CHANGELOG.md index ea6dbdb961..e0b47ff5e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Feat: 設定の管理が強化されました - 自動でバックアップされるように - Enhance: プラグインの管理が強化されました +- Fix: テーマ切り替え時に一部の色が変わらない問題を修正 ### Server - Fix: プロフィール追加情報で無効なURLに入力された場合に照会エラーを出るのを修正 diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index a7cf70745e..d3c64bf85a 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -43,14 +43,14 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/directives/adaptive-border.ts b/packages/frontend/src/directives/adaptive-border.ts index af7deb5960..8072a1ffd9 100644 --- a/packages/frontend/src/directives/adaptive-border.ts +++ b/packages/frontend/src/directives/adaptive-border.ts @@ -5,17 +5,32 @@ import type { Directive } from 'vue'; import { getBgColor } from '@/utility/get-bg-color.js'; +import { globalEvents } from '@/events.js'; + +const handlerMap = new WeakMap(); export default { mounted(src, binding, vn) { - const parentBg = getBgColor(src.parentElement) ?? 'transparent'; + function calc() { + const parentBg = getBgColor(src.parentElement) ?? 'transparent'; - const myBg = window.getComputedStyle(src).backgroundColor; + const myBg = window.getComputedStyle(src).backgroundColor; - if (parentBg === myBg) { - src.style.borderColor = 'var(--MI_THEME-divider)'; - } else { - src.style.borderColor = myBg; + if (parentBg === myBg) { + src.style.borderColor = 'var(--MI_THEME-divider)'; + } else { + src.style.borderColor = myBg; + } } + + handlerMap.set(src, calc); + + calc(); + + globalEvents.on('themeChanged', calc); + }, + + unmounted(src, binding, vn) { + globalEvents.off('themeChanged', handlerMap.get(src)); }, } as Directive; diff --git a/packages/frontend/src/events.ts b/packages/frontend/src/events.ts index d476aec04a..a74018223c 100644 --- a/packages/frontend/src/events.ts +++ b/packages/frontend/src/events.ts @@ -7,6 +7,7 @@ import { EventEmitter } from 'eventemitter3'; import * as Misskey from 'misskey-js'; export const globalEvents = new EventEmitter<{ + themeChanging: () => void; themeChanged: () => void; clientNotification: (notification: Misskey.entities.Notification) => void; requestClearPageCache: () => void; diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue index 8ba35d65d5..d5dac40e86 100644 --- a/packages/frontend/src/pages/admin/_header_.vue +++ b/packages/frontend/src/pages/admin/_header_.vue @@ -35,8 +35,8 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/theme.ts b/packages/frontend/src/theme.ts index 0f44d777f9..ed2f1d3164 100644 --- a/packages/frontend/src/theme.ts +++ b/packages/frontend/src/theme.ts @@ -72,6 +72,9 @@ export function applyTheme(theme: Theme, persist = true) { timeout = window.setTimeout(() => { document.documentElement.classList.remove('_themeChanging_'); + + // 色計算など再度行えるようにクライアント全体に通知 + globalEvents.emit('themeChanged'); }, 1000); const colorScheme = theme.base === 'dark' ? 'dark' : 'light'; @@ -108,7 +111,7 @@ export function applyTheme(theme: Theme, persist = true) { } // 色計算など再度行えるようにクライアント全体に通知 - globalEvents.emit('themeChanged'); + globalEvents.emit('themeChanging'); } function compile(theme: Theme): Record {