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 {