enhance(frontend): カラーモードの設定画面を視覚的にわかりやすく

CHANGELOG.md

@@ -7,6 +7,7 @@
 ### Client
 - Feat: 設定の検索を追加(実験的)
 - Enhance: 設定項目の再配置
+- Enhance: 「デバイスのダークモードと同期する」を有効にしている際のカラーモード切替設定の挙動を視覚的にわかりやすく
 
 ### Server
 - Fix: DBマイグレーション際にシステムアカウントのユーザーID判定が正しくない問題を修正

packages/frontend/src/components/MkToast.vue

@@ -26,9 +26,12 @@ import { onMounted, ref } from 'vue';
 import * as os from '@/os.js';
 import { defaultStore } from '@/store.js';
 
-defineProps<{
+const props = withDefaults(defineProps<{
 	message: string;
-}>();
+	duration?: number;
+}>(), {
+	duration: 4000,
+});
 
 const emit = defineEmits<{
 	(ev: 'closed'): void;
@@ -40,7 +43,7 @@ const showing = ref(true);
 onMounted(() => {
 	window.setTimeout(() => {
 		showing.value = false;
-	}, 4000);
+	}, props.duration);
 });
 </script>
 

packages/frontend/src/os.ts

@@ -215,9 +215,10 @@ export function pageWindow(path: string) {
 	});
 }
 
-export function toast(message: string) {
+export function toast(message: string, duration?: number) {
 	const { dispose } = popup(MkToast, {
 		message,
+    duration,
 	}, {
 		closed: () => dispose(),
 	});

packages/frontend/src/pages/settings/theme.vue

@@ -7,9 +7,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <SearchMarker path="/settings/theme" :label="i18n.ts.theme" :keywords="['theme']" icon="ti ti-palette">
 	<div class="_gaps_m rsljpzjq">
 		<div v-adaptive-border class="rfqxtzch _panel">
-			<div class="toggle">
+			<div
+				class="toggle"
+				:class="{ disabled: syncDeviceDarkMode }"
+			>
 				<div class="toggleWrapper">
-					<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
+					<input id="dn" v-model="darkMode" type="checkbox" class="dn" :disabled="syncDeviceDarkMode"/>
 					<label for="dn" class="toggle">
 						<span class="before">{{ i18n.ts.light }}</span>
 						<span class="after">{{ i18n.ts.dark }}</span>
@@ -248,13 +251,19 @@ definePageMetadata(() => ({
 		position: relative;
 		padding: 26px 0;
 		text-align: center;
+		overflow: clip;
 
-		&.disabled {
-			opacity: 0.7;
-
-			&, * {
-				cursor: not-allowed !important;
-			}
+		&.disabled::after {
+			position: absolute;
+			z-index: 3;
+			content: '';
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background-color: var(--panel);
+			opacity: .5;
+			cursor: not-allowed;
 		}
 
 		> .toggleWrapper {