diff --git a/CHANGELOG.md b/CHANGELOG.md
index 10b19dacf8..6d288e3c8d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -225,6 +225,7 @@
 ### Client
 - Feat: 設定の検索を追加(実験的)
 - Enhance: 設定項目の再配置
+- Enhance: 「デバイスのダークモードと同期する」を有効にしている際のカラーモード切替設定の挙動を視覚的にわかりやすく
 
 ### Server
 - Fix: DBマイグレーション際にシステムアカウントのユーザーID判定が正しくない問題を修正
diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue
index ac795e312c..0d8bf17f9e 100644
--- a/packages/frontend/src/components/MkToast.vue
+++ b/packages/frontend/src/components/MkToast.vue
@@ -26,9 +26,12 @@ import { onMounted, ref } from 'vue';
 import * as os from '@/os.js';
 import { prefer } from '@/preferences.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>
 
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index a513ae4902..2459cb8862 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -214,9 +214,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(),
 	});
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index 45b97e19c4..2aab4b7b37 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/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">
 		<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>
@@ -350,13 +353,19 @@ definePage(() => ({
 		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 {