feat(frontend): セーフモード (#16245)

* feat(frontend): セーフモード

* Update Changelog

* Update Changelog

* fix

* fix

* Update Changelog

* Update Changelog

* PWAのショートカット経由でもセーフモードで起動できるように

* Update ClientServerService.ts

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

1 files changed, 37 insertions, 28 deletions

diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 992bde9bd1..ea41155ab0 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -5,7 +5,7 @@
 
 import { computed, watch, version as vueVersion } from 'vue';
 import { compareVersions } from 'compare-versions';
-import { version, lang, updateLocale, locale, apiUrl } from '@@/js/config.js';
+import { version, lang, updateLocale, locale, apiUrl, isSafeMode } from '@@/js/config.js';
 import defaultLightTheme from '@@/themes/l-light.json5';
 import defaultDarkTheme from '@@/themes/d-green-lime.json5';
 import type { App } from 'vue';
@@ -168,28 +168,35 @@ export async function common(createVue: () => Promise<App<Element>>) {
 
 	// NOTE: この処理は必ずクライアント更新チェック処理より後に来ること(テーマ再構築のため)
 	watch(store.r.darkMode, (darkMode) => {
-		applyTheme(darkMode
-			? (prefer.s.darkTheme ?? defaultDarkTheme)
-			: (prefer.s.lightTheme ?? defaultLightTheme),
-		);
-	}, { immediate: miLocalStorage.getItem('theme') == null });
+		const theme = (() => {
+			if (darkMode) {
+				return isSafeMode ? defaultDarkTheme : (prefer.s.darkTheme ?? defaultDarkTheme);
+			} else {
+				return isSafeMode ? defaultLightTheme : (prefer.s.lightTheme ?? defaultLightTheme);
+			}
+		})();
+
+		applyTheme(theme);
+	}, { immediate: isSafeMode || miLocalStorage.getItem('theme') == null });
 
 	window.document.documentElement.dataset.colorScheme = store.s.darkMode ? 'dark' : 'light';
 
-	const darkTheme = prefer.model('darkTheme');
-	const lightTheme = prefer.model('lightTheme');
+	if (!isSafeMode) {
+		const darkTheme = prefer.model('darkTheme');
+		const lightTheme = prefer.model('lightTheme');
 
-	watch(darkTheme, (theme) => {
-		if (store.s.darkMode) {
-			applyTheme(theme ?? defaultDarkTheme);
-		}
-	});
+		watch(darkTheme, (theme) => {
+			if (store.s.darkMode) {
+				applyTheme(theme ?? defaultDarkTheme);
+			}
+		});
 
-	watch(lightTheme, (theme) => {
-		if (!store.s.darkMode) {
-			applyTheme(theme ?? defaultLightTheme);
-		}
-	});
+		watch(lightTheme, (theme) => {
+			if (!store.s.darkMode) {
+				applyTheme(theme ?? defaultLightTheme);
+			}
+		});
+	}
 
 	//#region Sync dark mode
 	if (prefer.s.syncDeviceDarkMode) {
@@ -203,17 +210,19 @@ export async function common(createVue: () => Promise<App<Element>>) {
 	});
 	//#endregion
 
-	if (prefer.s.darkTheme && store.s.darkMode) {
-		if (miLocalStorage.getItem('themeId') !== prefer.s.darkTheme.id) applyTheme(prefer.s.darkTheme);
-	} else if (prefer.s.lightTheme && !store.s.darkMode) {
-		if (miLocalStorage.getItem('themeId') !== prefer.s.lightTheme.id) applyTheme(prefer.s.lightTheme);
-	}
+	if (!isSafeMode) {
+		if (prefer.s.darkTheme && store.s.darkMode) {
+			if (miLocalStorage.getItem('themeId') !== prefer.s.darkTheme.id) applyTheme(prefer.s.darkTheme);
+		} else if (prefer.s.lightTheme && !store.s.darkMode) {
+			if (miLocalStorage.getItem('themeId') !== prefer.s.lightTheme.id) applyTheme(prefer.s.lightTheme);
+		}
 
-	fetchInstanceMetaPromise.then(() => {
-		// TODO: instance.defaultLightTheme/instance.defaultDarkThemeが不正な形式だった場合のケア
-		if (prefer.s.lightTheme == null && instance.defaultLightTheme != null) prefer.commit('lightTheme', JSON.parse(instance.defaultLightTheme));
-		if (prefer.s.darkTheme == null && instance.defaultDarkTheme != null) prefer.commit('darkTheme', JSON.parse(instance.defaultDarkTheme));
-	});
+		fetchInstanceMetaPromise.then(() => {
+			// TODO: instance.defaultLightTheme/instance.defaultDarkThemeが不正な形式だった場合のケア
+			if (prefer.s.lightTheme == null && instance.defaultLightTheme != null) prefer.commit('lightTheme', JSON.parse(instance.defaultLightTheme));
+			if (prefer.s.darkTheme == null && instance.defaultDarkTheme != null) prefer.commit('darkTheme', JSON.parse(instance.defaultDarkTheme));
+		});
+	}
 
 	watch(prefer.r.overridedDeviceKind, (kind) => {
 		updateDeviceKind(kind);