fix(frontend): タブ間同期が行われるとテーマが切り替わり続ける問題を修正 (#16094)

2 files changed, 7 insertions, 14 deletions

diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 12879e63b3..6a9aa08b30 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -101,27 +101,15 @@ html._themeChanging_ {
 }
 
 html::view-transition-new(theme-changing) {
-	z-index: 4000001;
-	animation: themeChangingNew 0.5s ease;
-	animation-fill-mode: forwards;
+	z-index: 4000000;
 }
 
 html::view-transition-old(theme-changing) {
-	z-index: 4000000;
+	z-index: 4000001;
 	animation: themeChangingOld 0.5s ease;
 	animation-fill-mode: forwards;
 }
 
-@keyframes themeChangingNew {
-	0% {
-		opacity: 0;
-	}
-
-	100% {
-		opacity: 1;
-	}
-}
-
 @keyframes themeChangingOld {
 	0% {
 		opacity: 1;
diff --git a/packages/frontend/src/theme.ts b/packages/frontend/src/theme.ts
index 9562f69cf3..e48eb04103 100644
--- a/packages/frontend/src/theme.ts
+++ b/packages/frontend/src/theme.ts
@@ -15,6 +15,7 @@ import { globalEvents } from '@/events.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { $i } from '@/i.js';
 import { prefer } from '@/preferences.js';
+import { deepEqual } from '@/utility/deep-equal.js';
 
 export type Theme = {
 	id: string;
@@ -127,6 +128,7 @@ function applyThemeInternal(theme: Theme, persist: boolean) {
 }
 
 let timeout: number | null = null;
+let currentTheme: Theme | null = null;
 
 export function applyTheme(theme: Theme, persist = true) {
 	if (timeout) {
@@ -134,6 +136,9 @@ export function applyTheme(theme: Theme, persist = true) {
 		timeout = null;
 	}
 
+	if (deepEqual(currentTheme, theme)) return;
+	currentTheme = theme;
+
 	if (window.document.startViewTransition != null && prefer.s.animation) {
 		window.document.documentElement.classList.add('_themeChanging_');
 		window.document.startViewTransition(async () => {