キーボードでカラーモードを変更した際にtoastを表示するように

locales/index.d.ts

@@ -4984,6 +4984,10 @@ export interface Locale extends ILocale {
      * お問い合わせ
      */
     "inquiry": string;
+    /**
+     * カラーモードを{mode}に変更しました。
+     */
+    "colorModeChangedToX": ParameterizedString<"mode">;
     "_delivery": {
         /**
          * 配信状態

locales/ja-JP.yml

@@ -1242,6 +1242,7 @@ keepOriginalFilenameDescription: "この設定をオフにすると、アップ
 noDescription: "説明文はありません"
 alwaysConfirmFollow: "フォローの際常に確認する"
 inquiry: "お問い合わせ"
+colorModeChangedToX: "カラーモードを{mode}に変更しました。"
 
 _delivery:
   status: "配信状態"

packages/frontend/src/boot/main-boot.ts

@@ -71,6 +71,7 @@ export async function mainBoot() {
 		'd': (): void => {
 			ColdDeviceStorage.set('syncDeviceDarkMode', false);
 			defaultStore.set('darkMode', !defaultStore.state.darkMode);
+			toast(i18n.tsx.colorModeChangedToX({ mode: defaultStore.state.darkMode ? i18n.ts.dark : i18n.ts.light }), 1500);
 		},
 		's': (): void => {
 			mainRouter.push('/search');

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

@@ -204,9 +204,10 @@ export function pageWindow(path: string) {
 	}, {}, 'closed');
 }
 
-export function toast(message: string) {
+export function toast(message: string, duration?: number) {
 	popup(MkToast, {
 		message,
+		duration,
 	}, {}, 'closed');
 }