enhance(frontend): デバイスのダークモードと同期するオプションが有効なときにテーマを手動で切り替えようとした際の警告を表示

3 files changed, 79 insertions, 72 deletions

diff --git a/locales/index.d.ts b/locales/index.d.ts
index cecda4d44e..21da0c171a 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1327,6 +1327,10 @@ export interface Locale extends ILocale {
      */
     "syncDeviceDarkMode": string;
     /**
+     * 「{x}」がオンになっています。同期をオフにして手動でモードを切り替えますか？
+     */
+    "switchDarkModeManuallyWhenSyncEnabledConfirm": ParameterizedString<"x">;
+    /**
      * ドライブ
      */
     "drive": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index e059fc99ee..b81529790f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -327,6 +327,7 @@ dark: "ダーク"
 lightThemes: "明るいテーマ"
 darkThemes: "暗いテーマ"
 syncDeviceDarkMode: "デバイスのダークモードと同期する"
+switchDarkModeManuallyWhenSyncEnabledConfirm: "「{x}」がオンになっています。同期をオフにして手動でモードを切り替えますか？"
 drive: "ドライブ"
 fileName: "ファイル名"
 selectFile: "ファイルを選択"
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index 45b97e19c4..f3a6458109 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -9,8 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-adaptive-border class="rfqxtzch _panel">
 			<div class="toggle">
 				<div class="toggleWrapper">
-					<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
-					<label for="dn" class="toggle">
+					<div class="toggle" :class="store.r.darkMode.value ? 'checked' : null" @click="toggleDarkMode()">
 						<span class="before">{{ i18n.ts.light }}</span>
 						<span class="after">{{ i18n.ts.dark }}</span>
 						<span class="toggle__handler">
@@ -24,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<span class="star star--4"></span>
 						<span class="star star--5"></span>
 						<span class="star star--6"></span>
-					</label>
+					</div>
 				</div>
 			</div>
 			<div class="sync">
@@ -37,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 
 		<div class="_gaps">
-			<template v-if="!darkMode">
+			<template v-if="!store.r.darkMode.value">
 				<SearchMarker :keywords="['light', 'theme']">
 					<MkFolder :defaultOpen="true" :max-height="500">
 						<template #icon><i class="ti ti-sun"></i></template>
@@ -205,6 +204,7 @@ import JSON5 from 'json5';
 import defaultLightTheme from '@@/themes/l-light.json5';
 import defaultDarkTheme from '@@/themes/d-green-lime.json5';
 import type { Theme } from '@/theme.js';
+import * as os from '@/os.js';
 import MkSwitch from '@/components/MkSwitch.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
@@ -257,7 +257,6 @@ const lightThemeId = computed({
 	},
 });
 
-const darkMode = computed(store.makeGetterSetter('darkMode'));
 const syncDeviceDarkMode = prefer.model('syncDeviceDarkMode');
 const themesCount = installedThemes.value.length;
 
@@ -267,6 +266,21 @@ watch(syncDeviceDarkMode, () => {
 	}
 });
 
+async function toggleDarkMode() {
+	const value = !store.r.darkMode.value;
+	if (syncDeviceDarkMode.value) {
+		const { canceled } = await os.confirm({
+			text: i18n.tsx.switchDarkModeManuallyWhenSyncEnabledConfirm({ x: i18n.ts.syncDeviceDarkMode }),
+		});
+		if (canceled) return;
+
+		syncDeviceDarkMode.value = false;
+		store.set('darkMode', value);
+	} else {
+		store.set('darkMode', value);
+	}
+}
+
 const themesSyncEnabled = ref(prefer.isSyncEnabled('themes'));
 
 function changeThemesSyncEnabled(value: boolean) {
@@ -365,16 +379,6 @@ definePage(() => ({
 			overflow: clip;
 			padding: 0 100px;
 			vertical-align: bottom;
-
-			input {
-				position: absolute;
-				left: -99em;
-			}
-		}
-
-		.dn:focus-visible ~ .toggle {
-			outline: 2px solid var(--MI_THEME-focus);
-			outline-offset: 2px;
 		}
 
 		.toggle {
@@ -403,6 +407,61 @@ definePage(() => ({
 				right: -68px;
 				color: var(--MI_THEME-fg);
 			}
+
+			&.checked {
+				background-color: #749DD6;
+
+				> .before {
+					color: var(--MI_THEME-fg);
+				}
+
+				> .after {
+					color: var(--MI_THEME-accent);
+				}
+
+				.toggle__handler {
+					background-color: #FFE5B5;
+					transform: translate3d(40px, 0, 0) rotate(0);
+
+					.crater { opacity: 1; }
+				}
+
+				.star--1 {
+					width: 2px;
+					height: 2px;
+				}
+
+				.star--2 {
+					width: 4px;
+					height: 4px;
+					transform: translate3d(-5px, 0, 0);
+				}
+
+				.star--3 {
+					width: 2px;
+					height: 2px;
+					transform: translate3d(-7px, 0, 0);
+				}
+
+				.star--4,
+				.star--5,
+				.star--6 {
+					opacity: 1;
+					transform: translate3d(0,0,0);
+				}
+
+				.star--4 {
+					transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+				}
+
+				.star--5 {
+					transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+				}
+
+				.star--6 {
+					transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+				}
+			}
 		}
 
 		.toggle__handler {
@@ -513,63 +572,6 @@ definePage(() => ({
 			height: 2px;
 			transform: translate3d(3px,0,0);
 		}
-
-		input:checked {
-			+ .toggle {
-				background-color: #749DD6;
-
-				> .before {
-					color: var(--MI_THEME-fg);
-				}
-
-				> .after {
-					color: var(--MI_THEME-accent);
-				}
-
-				.toggle__handler {
-					background-color: #FFE5B5;
-					transform: translate3d(40px, 0, 0) rotate(0);
-
-					.crater { opacity: 1; }
-				}
-
-				.star--1 {
-					width: 2px;
-					height: 2px;
-				}
-
-				.star--2 {
-					width: 4px;
-					height: 4px;
-					transform: translate3d(-5px, 0, 0);
-				}
-
-				.star--3 {
-					width: 2px;
-					height: 2px;
-					transform: translate3d(-7px, 0, 0);
-				}
-
-				.star--4,
-				.star--5,
-				.star--6 {
-					opacity: 1;
-					transform: translate3d(0,0,0);
-				}
-
-				.star--4 {
-					transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-				}
-
-				.star--5 {
-					transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-				}
-
-				.star--6 {
-					transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-				}
-			}
-		}
 	}
 
 	> .sync {