Merge a2b39a5e79 into 224bbd486f

CHANGELOG.md

@@ -224,6 +224,7 @@
 - Enhance: デッキのアンテナ・リスト選択画面からそれぞれを新規作成できるように
 - Enhance: ブラウザのコンテキストメニューを使用できるように
 - Enhance: 連合の「連合中」,「購読中」,「配信中」に対してブロックしているサーバー、配信停止しているサーバーを含めないように
+- Enhance: 「デバイスのダークモードと同期する」を有効にしている際のカラーモード切替設定の挙動を視覚的にわかりやすく
 - Fix: `/about#federation` ページなどで各インスタンスのチャートが表示されなくなっていた問題を修正
 - Fix: ユーザーページの追加情報のラベルを投稿者のサーバーの絵文字で表示する (#13968)
 - Fix: リバーシの対局を正しく共有できないことがある問題を修正

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

@@ -213,9 +213,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

@@ -6,9 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <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>
@@ -181,13 +184,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 {