From 093540375df430bc7534dec050317cb418a33967 Mon Sep 17 00:00:00 2001
From: mattyatea <mattyacocacora0@gmail.com>
Date: Fri, 22 Sep 2023 20:07:39 +0900
Subject: [PATCH] fix: icon

---
 .../src/components/MkFollowButton.vue         |  502 +++--
 .../frontend/src/components/MkPostForm.vue    | 1845 +++++++++--------
 .../src/components/MkSwitch.button.vue        |  152 +-
 packages/frontend/src/components/MkSwitch.vue |   78 +-
 .../components/global/MkPageHeader.tabs.vue   |  116 +-
 packages/frontend/src/pages/admin/index.vue   |   20 +-
 .../src/ui/_common_/navbar-for-mobile.vue     |   24 +-
 packages/frontend/src/ui/_common_/navbar.vue  |  133 +-
 8 files changed, 1787 insertions(+), 1083 deletions(-)

diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index 15043fcd0b..11c36b8034 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -2,54 +2,108 @@
 SPDX-FileCopyrightText: syuilo and other misskey contributors
 SPDX-License-Identifier: AGPL-3.0-only
 -->
-
 <template>
-<button
-	class="_button"
-	:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]"
-	:disabled="wait"
-	@click="onClick"
->
-	<template v-if="!wait">
-		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full" :class="$style.text">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
-		</template>
-		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
-			<!-- つまりリモートフォローの場合。 -->
-			<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
-		</template>
-		<template v-else-if="isFollowing">
-			<span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
-		</template>
-		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full" :class="$style.text">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
-		</template>
-		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
-		</template>
-	</template>
-	<template v-else>
-		<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
-	</template>
-</button>
+  <button
+      class="_button"
+      :class="[$style.root, ,{ [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou,[$style.gamingDark]: gaming === 'dark' || isFollowing || hasPendingFollowRequestFromYou,[$style.gamingLight]: gaming === 'light' || isFollowing || hasPendingFollowRequestFromYou
+, [$style.full]: full, [$style.large]: large }]"
+      :disabled="wait"
+      @click="onClick"
+  >
+    <template v-if="!wait">
+      <template v-if="hasPendingFollowRequestFromYou && user.isLocked">
+        <span v-if="full"
+              :class="$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'} ">{{
+            i18n.ts.followRequestPending
+          }}</span><i class="ti ti-hourglass-empty"></i>
+      </template>
+      <template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
+        <!-- つまりリモートフォローの場合。 -->
+        <span v-if="full"
+              :class="$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ">{{
+            i18n.ts.processing
+          }}</span>
+        <MkLoading :em="true" :colored="false"/>
+      </template>
+      <template v-else-if="isFollowing">
+        <span v-if="full"
+              :class="$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' } ">{{
+            i18n.ts.unfollow
+          }}</span><i class="ti ti-minus"></i>
+      </template>
+      <template v-else-if="!isFollowing && user.isLocked">
+        <span v-if="full"
+              :class="$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ">{{
+            i18n.ts.followRequest
+          }}</span><i class="ti ti-plus"></i>
+      </template>
+      <template v-else-if="!isFollowing && !user.isLocked">
+        <span v-if="full"
+              :class="$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ">{{
+            i18n.ts.follow
+          }}</span><i class="ti ti-plus"></i>
+      </template>
+    </template>
+    <template v-else>
+      <span v-if="full"
+            :class="$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ">{{
+          i18n.ts.processing
+        }}</span>
+      <MkLoading :em="true" :colored="false"/>
+    </template>
+  </button>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted } from 'vue';
+import {computed, onBeforeUnmount, onMounted, ref, watch} from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
-import { useStream } from '@/stream.js';
-import { i18n } from '@/i18n.js';
-import { claimAchievement } from '@/scripts/achievements.js';
-import { $i } from '@/account.js';
+import {useStream} from '@/stream.js';
+import {i18n} from '@/i18n.js';
+import {claimAchievement} from '@/scripts/achievements.js';
+import {$i} from '@/account.js';
+import {defaultStore} from "@/store.js";
+
+let gaming = ref('');
+
+const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+if (darkMode.value && gamingMode.value == true) {
+  gaming.value = 'dark';
+} else if (!darkMode.value && gamingMode.value == true) {
+  gaming.value = 'light';
+} else {
+  gaming.value = '';
+}
+
+watch(darkMode, () => {
+  console.log(gaming)
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
+
+watch(gamingMode, () => {
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
 
 const props = withDefaults(defineProps<{
-	user: Misskey.entities.UserDetailed,
-	full?: boolean,
-	large?: boolean,
+  user: Misskey.entities.UserDetailed,
+  full?: boolean,
+  large?: boolean,
 }>(), {
-	full: false,
-	large: false,
+  full: false,
+  large: false,
 });
 
 let isFollowing = $ref(props.user.isFollowing);
@@ -58,151 +112,299 @@ let wait = $ref(false);
 const connection = useStream().useChannel('main');
 
 if (props.user.isFollowing == null) {
-	os.api('users/show', {
-		userId: props.user.id,
-	})
-		.then(onFollowChange);
+  os.api('users/show', {
+    userId: props.user.id,
+  })
+      .then(onFollowChange);
 }
 
 function onFollowChange(user: Misskey.entities.UserDetailed) {
-	if (user.id === props.user.id) {
-		isFollowing = user.isFollowing;
-		hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
-	}
+  if (user.id === props.user.id) {
+    isFollowing = user.isFollowing;
+    hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
+  }
 }
 
 async function onClick() {
-	wait = true;
+  wait = true;
 
-	try {
-		if (isFollowing) {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
-			});
+  try {
+    if (isFollowing) {
+      const {canceled} = await os.confirm({
+        type: 'warning',
+        text: i18n.t('unfollowConfirm', {name: props.user.name || props.user.username}),
+      });
 
-			if (canceled) return;
+      if (canceled) return;
 
-			await os.api('following/delete', {
-				userId: props.user.id,
-			});
-		} else {
-			if (hasPendingFollowRequestFromYou) {
-				await os.api('following/requests/cancel', {
-					userId: props.user.id,
-				});
-				hasPendingFollowRequestFromYou = false;
-			} else {
-				await os.api('following/create', {
-					userId: props.user.id,
-				});
-				hasPendingFollowRequestFromYou = true;
+      await os.api('following/delete', {
+        userId: props.user.id,
+      });
+    } else {
+      if (hasPendingFollowRequestFromYou) {
+        await os.api('following/requests/cancel', {
+          userId: props.user.id,
+        });
+        hasPendingFollowRequestFromYou = false;
+      } else {
+        await os.api('following/create', {
+          userId: props.user.id,
+        });
+        hasPendingFollowRequestFromYou = true;
 
-				claimAchievement('following1');
+        claimAchievement('following1');
 
-				if ($i.followingCount >= 10) {
-					claimAchievement('following10');
-				}
-				if ($i.followingCount >= 50) {
-					claimAchievement('following50');
-				}
-				if ($i.followingCount >= 100) {
-					claimAchievement('following100');
-				}
-				if ($i.followingCount >= 300) {
-					claimAchievement('following300');
-				}
-			}
-		}
-	} catch (err) {
-		console.error(err);
-	} finally {
-		wait = false;
-	}
+        if ($i.followingCount >= 10) {
+          claimAchievement('following10');
+        }
+        if ($i.followingCount >= 50) {
+          claimAchievement('following50');
+        }
+        if ($i.followingCount >= 100) {
+          claimAchievement('following100');
+        }
+        if ($i.followingCount >= 300) {
+          claimAchievement('following300');
+        }
+      }
+    }
+  } catch (err) {
+    console.error(err);
+  } finally {
+    wait = false;
+  }
 }
 
 onMounted(() => {
-	connection.on('follow', onFollowChange);
-	connection.on('unfollow', onFollowChange);
+  connection.on('follow', onFollowChange);
+  connection.on('unfollow', onFollowChange);
 });
 
 onBeforeUnmount(() => {
-	connection.dispose();
+  connection.dispose();
 });
 </script>
 
 <style lang="scss" module>
 .root {
-	position: relative;
-	display: inline-block;
-	font-weight: bold;
-	color: var(--fgOnWhite);
-	border: solid 1px var(--accent);
-	padding: 0;
-	height: 31px;
-	font-size: 16px;
-	border-radius: 32px;
-	background: #fff;
+  position: relative;
+  display: inline-block;
+  font-weight: bold;
+  color: var(--fgOnWhite);
+  border: solid 1px;
+  padding: 0;
+  height: 31px;
+  font-size: 16px;
+  border-radius: 32px;
+  background: #fff;
 
-	&.full {
-		padding: 0 8px 0 12px;
-		font-size: 14px;
-	}
+  &.full {
+    padding: 0 8px 0 12px;
+    font-size: 14px;
+  }
 
-	&.large {
-		font-size: 16px;
-		height: 38px;
-		padding: 0 12px 0 16px;
-	}
+  &.large {
+    font-size: 16px;
+    height: 38px;
+    padding: 0 12px 0 16px;
+  }
 
-	&:not(.full) {
-		width: 31px;
-	}
+  &:not(.full) {
+    width: 31px;
+  }
 
-	&:focus-visible {
-		&:after {
-			content: "";
-			pointer-events: none;
-			position: absolute;
-			top: -5px;
-			right: -5px;
-			bottom: -5px;
-			left: -5px;
-			border: 2px solid var(--focus);
-			border-radius: 32px;
-		}
-	}
+  &:focus-visible {
+    &:after {
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      top: -5px;
+      right: -5px;
+      bottom: -5px;
+      left: -5px;
+      border: 2px solid var(--focus);
+      border-radius: 32px;
+    }
+  }
 
-	&:hover {
-		//background: mix($primary, #fff, 20);
-	}
+  &:hover {
+    //background: mix($primary, #fff, 20);
+  }
 
-	&:active {
-		//background: mix($primary, #fff, 40);
-	}
+  &:active {
+    //background: mix($primary, #fff, 40);
+  }
 
-	&.active {
-		color: var(--fgOnAccent);
-		background: var(--accent);
+  &.active {
+    color: var(--fgOnAccent);
+    background: var(--accent);
 
-		&:hover {
-			background: var(--accentLighten);
-			border-color: var(--accentLighten);
-		}
+    &:hover {
+      background: var(--accentLighten);
+      border-color: var(--accentLighten);
+    }
 
-		&:active {
-			background: var(--accentDarken);
-			border-color: var(--accentDarken);
-		}
-	}
+    &:active {
+      background: var(--accentDarken);
+      border-color: var(--accentDarken);
+    }
 
-	&.wait {
-		cursor: wait !important;
-		opacity: 0.7;
-	}
+    &.gamingDark:hover {
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    }
+
+    &.gamingDark:active {
+      color: white;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      border-color: white;
+    }
+
+    &.gamingLight:hover {
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      border-color: white;
+    }
+
+    &.gamingLight:active {
+      color: white;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      border-color: white;
+    }
+
+    &.gamingDark {
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    }
+
+    &.gamingLight {
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+
+    }
+
+  }
+
+  &.wait {
+    cursor: wait !important;
+    opacity: 0.7;
+  }
 }
 
 .text {
-	margin-right: 6px;
+  margin-right: 6px;
+
+  &.gamingDark {
+    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+    background-size: 1800% 1800%;
+    -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  &.gamingLight {
+    background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+    background-size: 1800% 1800% !important;
+    -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+}
+
+@-webkit-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@-moz-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@-webkit-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@-moz-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
 }
 </style>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 2b4dcc8ed4..a3c0596402 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -4,156 +4,223 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div
-	:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
-	@dragover.stop="onDragover"
-	@dragenter="onDragenter"
-	@dragleave="onDragleave"
-	@drop.stop="onDrop"
->
-	<header :class="$style.header">
-		<div :class="$style.headerLeft">
-			<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
-			<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
-				<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
-			</button>
-		</div>
-		<div :class="$style.headerRight">
-			<template v-if="!(channel != null && fixed)">
-				<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility">
-					<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
-					<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
-					<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
-					<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
-					<span :class="$style.headerRightButtonText">{{ i18n.ts._visibility[visibility] }}</span>
-				</button>
-				<button v-else class="_button" :class="[$style.headerRightItem, $style.visibility]" disabled>
-					<span><i class="ti ti-device-tv"></i></span>
-					<span :class="$style.headerRightButtonText">{{ channel.name }}</span>
-				</button>
-			</template>
-			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="[$style.headerRightItem, { [$style.danger]: localOnly }]" :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
-				<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
-				<span v-else><i class="ti ti-rocket-off"></i></span>
-			</button>
-			<button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" class="_button" :class="[$style.headerRightItem, { [$style.danger]: reactionAcceptance === 'likeOnly' }]" @click="toggleReactionAcceptance">
-				<span v-if="reactionAcceptance === 'likeOnly'"><i class="ti ti-heart"></i></span>
-				<span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ti ti-heart-plus"></i></span>
-				<span v-else><i class="ti ti-icons"></i></span>
-			</button>
-			<button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
-				<div :class="$style.submitInner">
-					<template v-if="posted"></template>
-					<template v-else-if="posting"><MkEllipsis/></template>
-					<template v-else>{{ submitText }}</template>
-					<i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
-				</div>
-			</button>
-		</div>
-	</header>
-	<MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
-	<MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
-	<div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
-	<div v-if="visibility === 'specified'" :class="$style.toSpecified">
-		<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
-		<div :class="$style.visibleUsers">
+  <div
+      :class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
+      @dragover.stop="onDragover"
+      @dragenter="onDragenter"
+      @dragleave="onDragleave"
+      @drop.stop="onDrop"
+  >
+    <header :class="$style.header">
+      <div :class="$style.headerLeft">
+        <button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
+        <button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button"
+                @click="openAccountMenu">
+          <MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
+        </button>
+      </div>
+      <div :class="$style.headerRight">
+        <template v-if="!(channel != null && fixed)">
+          <button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility"
+                  :class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility">
+            <span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
+            <span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
+            <span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
+            <span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
+            <span :class="$style.headerRightButtonText">{{ i18n.ts._visibility[visibility] }}</span>
+          </button>
+          <button v-else class="_button" :class="[$style.headerRightItem, $style.visibility]" disabled>
+            <span><i class="ti ti-device-tv"></i></span>
+            <span :class="$style.headerRightButtonText">{{ channel.name }}</span>
+          </button>
+        </template>
+        <button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button"
+                :class="[$style.headerRightItem, { [$style.danger]: localOnly }]"
+                :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
+          <span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
+          <span v-else><i class="ti ti-rocket-off"></i></span>
+        </button>
+        <button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" class="_button"
+                :class="[$style.headerRightItem, { [$style.danger]: reactionAcceptance === 'likeOnly' }]"
+                @click="toggleReactionAcceptance">
+          <span v-if="reactionAcceptance === 'likeOnly'"><i class="ti ti-heart"></i></span>
+          <span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ti ti-heart-plus"></i></span>
+          <span v-else><i class="ti ti-icons"></i></span>
+        </button>
+        <button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit
+                @click="post">
+          <div
+              :class="[$style.submitInner , {  [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]">
+            <template v-if="posted"></template>
+            <template v-else-if="posting">
+              <MkEllipsis/>
+            </template>
+            <template v-else>{{ submitText }}</template>
+            <i style="margin-left: 6px;"
+               :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
+          </div>
+        </button>
+      </div>
+    </header>
+    <MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
+    <MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
+    <div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}
+      <button @click="quoteId = null"><i class="ti ti-x"></i></button>
+    </div>
+    <div v-if="visibility === 'specified'" :class="$style.toSpecified">
+      <span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
+      <div :class="$style.visibleUsers">
 			<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
 				<MkAcct :user="u"/>
 				<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
 			</span>
-			<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
-		</div>
-	</div>
-	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
-	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
-		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
-		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
-	</div>
-	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-	<XPostFormAttaches v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName" @replaceFile="replaceFile"/>
-	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
-	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
-	<div v-if="showingOptions" style="padding: 8px 16px;">
-	</div>
-	<footer :class="$style.footer">
-		<div :class="$style.footerLeft">
-			<button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
-			<button v-tooltip="i18n.ts.poll" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
-			<button v-tooltip="i18n.ts.useCw" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
-			<button v-tooltip="i18n.ts.mention" class="_button" :class="$style.footerButton" @click="insertMention"><i class="ti ti-at"></i></button>
-			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
-			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
-			<button v-tooltip="i18n.ts.emoji" :class="['_button', $style.footerButton]" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
-		</div>
-		<div :class="$style.footerRight">
-			<button v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.footerButton, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
-			<!--<button v-tooltip="i18n.ts.more" class="_button" :class="$style.footerButton" @click="showingOptions = !showingOptions"><i class="ti ti-dots"></i></button>-->
-		</div>
-	</footer>
-	<datalist id="hashtags">
-		<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
-	</datalist>
-</div>
+        <button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i
+            class="ti ti-plus ti-fw"></i></button>
+      </div>
+    </div>
+    <MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">
+      {{ i18n.ts.notSpecifiedMentionWarning }} -
+      <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button>
+    </MkInfo>
+    <input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation"
+           @keydown="onKeydown">
+    <div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
+      <textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted"
+                :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste"
+                @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+      <div v-if="maxTextLength - textLength < 100"
+           :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">
+        {{ maxTextLength - textLength }}
+      </div>
+    </div>
+    <input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags"
+           :placeholder="i18n.ts.hashtags" list="hashtags">
+    <XPostFormAttaches v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive"
+                       @changeName="updateFileName" @replaceFile="replaceFile"/>
+    <MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
+    <MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
+    <div v-if="showingOptions" style="padding: 8px 16px;">
+    </div>
+    <footer :class="$style.footer">
+      <div :class="$style.footerLeft">
+        <button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i
+            class="ti ti-photo-plus"></i></button>
+        <button v-tooltip="i18n.ts.poll" class="_button"
+                :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i
+            class="ti ti-chart-arrows"></i></button>
+        <button v-tooltip="i18n.ts.useCw" class="_button"
+                :class="[$style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i
+            class="ti ti-eye-off"></i></button>
+        <button v-tooltip="i18n.ts.mention" class="_button" :class="$style.footerButton" @click="insertMention"><i
+            class="ti ti-at"></i></button>
+        <button v-tooltip="i18n.ts.hashtags" class="_button"
+                :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]"
+                @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
+        <button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button"
+                :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
+        <button v-tooltip="i18n.ts.emoji" :class="['_button', $style.footerButton]" @click="insertEmoji"><i
+            class="ti ti-mood-happy"></i></button>
+      </div>
+      <div :class="$style.footerRight">
+        <button v-tooltip="i18n.ts.previewNoteText" class="_button"
+                :class="[$style.footerButton, { [$style.previewButtonActive]: showPreview }]"
+                @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
+        <!--<button v-tooltip="i18n.ts.more" class="_button" :class="$style.footerButton" @click="showingOptions = !showingOptions"><i class="ti ti-dots"></i></button>-->
+      </div>
+    </footer>
+    <datalist id="hashtags">
+      <option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
+    </datalist>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
+import {inject, watch, nextTick, onMounted, defineAsyncComponent, computed, ref} from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
-import { toASCII } from 'punycode/';
+import {toASCII} from 'punycode/';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import MkNotePreview from '@/components/MkNotePreview.vue';
 import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
 import MkPollEditor from '@/components/MkPollEditor.vue';
-import { host, url } from '@/config.js';
-import { erase, unique } from '@/scripts/array.js';
-import { extractMentions } from '@/scripts/extract-mentions.js';
-import { formatTimeString } from '@/scripts/format-time-string.js';
-import { Autocomplete } from '@/scripts/autocomplete.js';
+import {host, url} from '@/config.js';
+import {erase, unique} from '@/scripts/array.js';
+import {extractMentions} from '@/scripts/extract-mentions.js';
+import {formatTimeString} from '@/scripts/format-time-string.js';
+import {Autocomplete} from '@/scripts/autocomplete.js';
 import * as os from '@/os.js';
-import { selectFiles } from '@/scripts/select-file.js';
-import { defaultStore, notePostInterruptors, postFormActions } from '@/store.js';
+import {selectFiles} from '@/scripts/select-file.js';
+import {defaultStore, notePostInterruptors, postFormActions} from '@/store.js';
 import MkInfo from '@/components/MkInfo.vue';
-import { i18n } from '@/i18n.js';
-import { instance } from '@/instance.js';
-import { $i, notesCount, incNotesCount, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account.js';
-import { uploadFile } from '@/scripts/upload.js';
-import { deepClone } from '@/scripts/clone.js';
+import {i18n} from '@/i18n.js';
+import {instance} from '@/instance.js';
+import {$i, notesCount, incNotesCount, getAccounts, openAccountMenu as openAccountMenu_} from '@/account.js';
+import {uploadFile} from '@/scripts/upload.js';
+import {deepClone} from '@/scripts/clone.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
-import { miLocalStorage } from '@/local-storage.js';
-import { claimAchievement } from '@/scripts/achievements.js';
+import {miLocalStorage} from '@/local-storage.js';
+import {claimAchievement} from '@/scripts/achievements.js';
 
 const modal = inject('modal');
 
 const props = withDefaults(defineProps<{
-	reply?: Misskey.entities.Note;
-	renote?: Misskey.entities.Note;
-	channel?: Misskey.entities.Channel; // TODO
-	mention?: Misskey.entities.User;
-	specified?: Misskey.entities.User;
-	initialText?: string;
-	initialVisibility?: (typeof Misskey.noteVisibilities)[number];
-	initialFiles?: Misskey.entities.DriveFile[];
-	initialLocalOnly?: boolean;
-	initialVisibleUsers?: Misskey.entities.User[];
-	initialNote?: Misskey.entities.Note;
-	instant?: boolean;
-	fixed?: boolean;
-	autofocus?: boolean;
-	freezeAfterPosted?: boolean;
+  reply?: Misskey.entities.Note;
+  renote?: Misskey.entities.Note;
+  channel?: Misskey.entities.Channel; // TODO
+  mention?: Misskey.entities.User;
+  specified?: Misskey.entities.User;
+  initialText?: string;
+  initialVisibility?: (typeof Misskey.noteVisibilities)[number];
+  initialFiles?: Misskey.entities.DriveFile[];
+  initialLocalOnly?: boolean;
+  initialVisibleUsers?: Misskey.entities.User[];
+  initialNote?: Misskey.entities.Note;
+  instant?: boolean;
+  fixed?: boolean;
+  autofocus?: boolean;
+  freezeAfterPosted?: boolean;
 }>(), {
-	initialVisibleUsers: () => [],
-	autofocus: true,
+  initialVisibleUsers: () => [],
+  autofocus: true,
 });
-
+const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+let gaming: any;
+gaming = ref();
 const emit = defineEmits<{
-	(ev: 'posted'): void;
-	(ev: 'cancel'): void;
-	(ev: 'esc'): void;
+  (ev: 'posted'): void;
+  (ev: 'cancel'): void;
+  (ev: 'esc'): void;
 }>();
+if (darkMode.value && gamingMode.value == true) {
+  gaming.value = 'dark';
+} else if (!darkMode.value && gamingMode.value == true) {
+  gaming.value = 'light';
+} else {
+  gaming.value = '';
+}
 
+watch(darkMode, () => {
+  console.log(gaming)
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
+
+watch(gamingMode, () => {
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
 const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
 const cwInputEl = $shallowRef<HTMLInputElement | null>(null);
 const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null);
@@ -164,10 +231,10 @@ let posted = $ref(false);
 let text = $ref(props.initialText ?? '');
 let files = $ref(props.initialFiles ?? []);
 let poll = $ref<{
-	choices: string[];
-	multiple: boolean;
-	expiresAt: string | null;
-	expiredAfter: string | null;
+  choices: string[];
+  multiple: boolean;
+  expiresAt: string | null;
+  expiredAfter: string | null;
 } | null>(null);
 let useCw = $ref(false);
 let showPreview = $ref(defaultStore.state.showPreview);
@@ -177,7 +244,7 @@ let localOnly = $ref<boolean>(props.initialLocalOnly ?? defaultStore.state.remem
 let visibility = $ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof Misskey.noteVisibilities[number]);
 let visibleUsers = $ref([]);
 if (props.initialVisibleUsers) {
-	props.initialVisibleUsers.forEach(pushVisibleUser);
+  props.initialVisibleUsers.forEach(pushVisibleUser);
 }
 let reactionAcceptance = $ref(defaultStore.state.reactionAcceptance);
 let autocomplete = $ref(null);
@@ -189,1057 +256,1145 @@ let imeText = $ref('');
 let showingOptions = $ref(false);
 
 const draftKey = $computed((): string => {
-	let key = props.channel ? `channel:${props.channel.id}` : '';
+  let key = props.channel ? `channel:${props.channel.id}` : '';
 
-	if (props.renote) {
-		key += `renote:${props.renote.id}`;
-	} else if (props.reply) {
-		key += `reply:${props.reply.id}`;
-	} else {
-		key += `note:${$i.id}`;
-	}
+  if (props.renote) {
+    key += `renote:${props.renote.id}`;
+  } else if (props.reply) {
+    key += `reply:${props.reply.id}`;
+  } else {
+    key += `note:${$i.id}`;
+  }
 
-	return key;
+  return key;
 });
 
 const placeholder = $computed((): string => {
-	if (props.renote) {
-		return i18n.ts._postForm.quotePlaceholder;
-	} else if (props.reply) {
-		return i18n.ts._postForm.replyPlaceholder;
-	} else if (props.channel) {
-		return i18n.ts._postForm.channelPlaceholder;
-	} else {
-		const xs = [
-			i18n.ts._postForm._placeholders.a,
-			i18n.ts._postForm._placeholders.b,
-			i18n.ts._postForm._placeholders.c,
-			i18n.ts._postForm._placeholders.d,
-			i18n.ts._postForm._placeholders.e,
-			i18n.ts._postForm._placeholders.f,
-		];
-		return xs[Math.floor(Math.random() * xs.length)];
-	}
+  if (props.renote) {
+    return i18n.ts._postForm.quotePlaceholder;
+  } else if (props.reply) {
+    return i18n.ts._postForm.replyPlaceholder;
+  } else if (props.channel) {
+    return i18n.ts._postForm.channelPlaceholder;
+  } else {
+    const xs = [
+      i18n.ts._postForm._placeholders.a,
+      i18n.ts._postForm._placeholders.b,
+      i18n.ts._postForm._placeholders.c,
+      i18n.ts._postForm._placeholders.d,
+      i18n.ts._postForm._placeholders.e,
+      i18n.ts._postForm._placeholders.f,
+    ];
+    return xs[Math.floor(Math.random() * xs.length)];
+  }
 });
 
 const submitText = $computed((): string => {
-	return props.renote
-		? i18n.ts.quote
-		: props.reply
-			? i18n.ts.reply
-			: i18n.ts.note;
+  return props.renote
+      ? i18n.ts.quote
+      : props.reply
+          ? i18n.ts.reply
+          : i18n.ts.note;
 });
 
 const textLength = $computed((): number => {
-	return (text + imeText).trim().length;
+  return (text + imeText).trim().length;
 });
 
 const maxTextLength = $computed((): number => {
-	return instance ? instance.maxNoteTextLength : 1000;
+  return instance ? instance.maxNoteTextLength : 1000;
 });
 
 const canPost = $computed((): boolean => {
-	return !posting && !posted &&
-		(1 <= textLength || 1 <= files.length || !!poll || !!props.renote) &&
-		(textLength <= maxTextLength) &&
-		(!poll || poll.choices.length >= 2);
+  return !posting && !posted &&
+      (1 <= textLength || 1 <= files.length || !!poll || !!props.renote) &&
+      (textLength <= maxTextLength) &&
+      (!poll || poll.choices.length >= 2);
 });
 
 const withHashtags = $computed(defaultStore.makeGetterSetter('postFormWithHashtags'));
 const hashtags = $computed(defaultStore.makeGetterSetter('postFormHashtags'));
 
 watch($$(text), () => {
-	checkMissingMention();
-}, { immediate: true });
+  checkMissingMention();
+}, {immediate: true});
 
 watch($$(visibility), () => {
-	checkMissingMention();
-}, { immediate: true });
+  checkMissingMention();
+}, {immediate: true});
 
 watch($$(visibleUsers), () => {
-	checkMissingMention();
+  checkMissingMention();
 }, {
-	deep: true,
+  deep: true,
 });
 
 if (props.mention) {
-	text = props.mention.host ? `@${props.mention.username}@${toASCII(props.mention.host)}` : `@${props.mention.username}`;
-	text += ' ';
+  text = props.mention.host ? `@${props.mention.username}@${toASCII(props.mention.host)}` : `@${props.mention.username}`;
+  text += ' ';
 }
 
 if (props.reply && (props.reply.user.username !== $i.username || (props.reply.user.host != null && props.reply.user.host !== host))) {
-	text = `@${props.reply.user.username}${props.reply.user.host != null ? '@' + toASCII(props.reply.user.host) : ''} `;
+  text = `@${props.reply.user.username}${props.reply.user.host != null ? '@' + toASCII(props.reply.user.host) : ''} `;
 }
 
 if (props.reply && props.reply.text != null) {
-	const ast = mfm.parse(props.reply.text);
-	const otherHost = props.reply.user.host;
+  const ast = mfm.parse(props.reply.text);
+  const otherHost = props.reply.user.host;
 
-	for (const x of extractMentions(ast)) {
-		const mention = x.host ?
-			`@${x.username}@${toASCII(x.host)}` :
-			(otherHost == null || otherHost === host) ?
-				`@${x.username}` :
-				`@${x.username}@${toASCII(otherHost)}`;
+  for (const x of extractMentions(ast)) {
+    const mention = x.host ?
+        `@${x.username}@${toASCII(x.host)}` :
+        (otherHost == null || otherHost === host) ?
+            `@${x.username}` :
+            `@${x.username}@${toASCII(otherHost)}`;
 
-		// 自分は除外
-		if ($i.username === x.username && (x.host == null || x.host === host)) continue;
+    // 自分は除外
+    if ($i.username === x.username && (x.host == null || x.host === host)) continue;
 
-		// 重複は除外
-		if (text.includes(`${mention} `)) continue;
+    // 重複は除外
+    if (text.includes(`${mention} `)) continue;
 
-		text += `${mention} `;
-	}
+    text += `${mention} `;
+  }
 }
 
 if (props.channel) {
-	visibility = 'public';
-	localOnly = true; // TODO: チャンネルが連合するようになった折には消す
+  visibility = 'public';
+  localOnly = true; // TODO: チャンネルが連合するようになった折には消す
 }
 
 // 公開以外へのリプライ時は元の公開範囲を引き継ぐ
 if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visibility)) {
-	if (props.reply.visibility === 'home' && visibility === 'followers') {
-		visibility = 'followers';
-	} else if (['home', 'followers'].includes(props.reply.visibility) && visibility === 'specified') {
-		visibility = 'specified';
-	} else {
-		visibility = props.reply.visibility;
-	}
+  if (props.reply.visibility === 'home' && visibility === 'followers') {
+    visibility = 'followers';
+  } else if (['home', 'followers'].includes(props.reply.visibility) && visibility === 'specified') {
+    visibility = 'specified';
+  } else {
+    visibility = props.reply.visibility;
+  }
 
-	if (visibility === 'specified') {
-		if (props.reply.visibleUserIds) {
-			os.api('users/show', {
-				userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId),
-			}).then(users => {
-				users.forEach(pushVisibleUser);
-			});
-		}
+  if (visibility === 'specified') {
+    if (props.reply.visibleUserIds) {
+      os.api('users/show', {
+        userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId),
+      }).then(users => {
+        users.forEach(pushVisibleUser);
+      });
+    }
 
-		if (props.reply.userId !== $i.id) {
-			os.api('users/show', { userId: props.reply.userId }).then(user => {
-				pushVisibleUser(user);
-			});
-		}
-	}
+    if (props.reply.userId !== $i.id) {
+      os.api('users/show', {userId: props.reply.userId}).then(user => {
+        pushVisibleUser(user);
+      });
+    }
+  }
 }
 
 if (props.specified) {
-	visibility = 'specified';
-	pushVisibleUser(props.specified);
+  visibility = 'specified';
+  pushVisibleUser(props.specified);
 }
 
 // keep cw when reply
 if (defaultStore.state.keepCw && props.reply && props.reply.cw) {
-	useCw = true;
-	cw = props.reply.cw;
+  useCw = true;
+  cw = props.reply.cw;
 }
 
 function watchForDraft() {
-	watch($$(text), () => saveDraft());
-	watch($$(useCw), () => saveDraft());
-	watch($$(cw), () => saveDraft());
-	watch($$(poll), () => saveDraft());
-	watch($$(files), () => saveDraft(), { deep: true });
-	watch($$(visibility), () => saveDraft());
-	watch($$(localOnly), () => saveDraft());
+  watch($$(text), () => saveDraft());
+  watch($$(useCw), () => saveDraft());
+  watch($$(cw), () => saveDraft());
+  watch($$(poll), () => saveDraft());
+  watch($$(files), () => saveDraft(), {deep: true});
+  watch($$(visibility), () => saveDraft());
+  watch($$(localOnly), () => saveDraft());
 }
 
 function checkMissingMention() {
-	if (visibility === 'specified') {
-		const ast = mfm.parse(text);
+  if (visibility === 'specified') {
+    const ast = mfm.parse(text);
 
-		for (const x of extractMentions(ast)) {
-			if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
-				hasNotSpecifiedMentions = true;
-				return;
-			}
-		}
-		hasNotSpecifiedMentions = false;
-	}
+    for (const x of extractMentions(ast)) {
+      if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
+        hasNotSpecifiedMentions = true;
+        return;
+      }
+    }
+    hasNotSpecifiedMentions = false;
+  }
 }
 
 function addMissingMention() {
-	const ast = mfm.parse(text);
+  const ast = mfm.parse(text);
 
-	for (const x of extractMentions(ast)) {
-		if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
-			os.api('users/show', { username: x.username, host: x.host }).then(user => {
-				visibleUsers.push(user);
-			});
-		}
-	}
+  for (const x of extractMentions(ast)) {
+    if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
+      os.api('users/show', {username: x.username, host: x.host}).then(user => {
+        visibleUsers.push(user);
+      });
+    }
+  }
 }
 
 function togglePoll() {
-	if (poll) {
-		poll = null;
-	} else {
-		poll = {
-			choices: ['', ''],
-			multiple: false,
-			expiresAt: null,
-			expiredAfter: null,
-		};
-	}
+  if (poll) {
+    poll = null;
+  } else {
+    poll = {
+      choices: ['', ''],
+      multiple: false,
+      expiresAt: null,
+      expiredAfter: null,
+    };
+  }
 }
 
 function addTag(tag: string) {
-	insertTextAtCursor(textareaEl, ` #${tag} `);
+  insertTextAtCursor(textareaEl, ` #${tag} `);
 }
 
 function focus() {
-	if (textareaEl) {
-		textareaEl.focus();
-		textareaEl.setSelectionRange(textareaEl.value.length, textareaEl.value.length);
-	}
+  if (textareaEl) {
+    textareaEl.focus();
+    textareaEl.setSelectionRange(textareaEl.value.length, textareaEl.value.length);
+  }
 }
 
 function chooseFileFrom(ev) {
-	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
-		for (const file of files_) {
-			files.push(file);
-		}
-	});
+  selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
+    for (const file of files_) {
+      files.push(file);
+    }
+  });
 }
 
 function detachFile(id) {
-	files = files.filter(x => x.id !== id);
+  files = files.filter(x => x.id !== id);
 }
 
 function updateFileSensitive(file, sensitive) {
-	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
+  files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
 }
 
 function updateFileName(file, name) {
-	files[files.findIndex(x => x.id === file.id)].name = name;
+  files[files.findIndex(x => x.id === file.id)].name = name;
 }
 
 function replaceFile(file: Misskey.entities.DriveFile, newFile: Misskey.entities.DriveFile): void {
-	files[files.findIndex(x => x.id === file.id)] = newFile;
+  files[files.findIndex(x => x.id === file.id)] = newFile;
 }
 
 function upload(file: File, name?: string): void {
-	uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
-		files.push(res);
-	});
+  uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
+    files.push(res);
+  });
 }
 
 function setVisibility() {
-	if (props.channel) {
-		visibility = 'public';
-		localOnly = true; // TODO: チャンネルが連合するようになった折には消す
-		return;
-	}
+  if (props.channel) {
+    visibility = 'public';
+    localOnly = true; // TODO: チャンネルが連合するようになった折には消す
+    return;
+  }
 
-	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
-		currentVisibility: visibility,
-		localOnly: localOnly,
-		src: visibilityButton,
-	}, {
-		changeVisibility: v => {
-			visibility = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('visibility', visibility);
-			}
-		},
-	}, 'closed');
+  os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
+    currentVisibility: visibility,
+    localOnly: localOnly,
+    src: visibilityButton,
+  }, {
+    changeVisibility: v => {
+      visibility = v;
+      if (defaultStore.state.rememberNoteVisibility) {
+        defaultStore.set('visibility', visibility);
+      }
+    },
+  }, 'closed');
 }
 
 async function toggleLocalOnly() {
-	if (props.channel) {
-		visibility = 'public';
-		localOnly = true; // TODO: チャンネルが連合するようになった折には消す
-		return;
-	}
+  if (props.channel) {
+    visibility = 'public';
+    localOnly = true; // TODO: チャンネルが連合するようになった折には消す
+    return;
+  }
 
-	const neverShowInfo = miLocalStorage.getItem('neverShowLocalOnlyInfo');
+  const neverShowInfo = miLocalStorage.getItem('neverShowLocalOnlyInfo');
 
-	if (!localOnly && neverShowInfo !== 'true') {
-		const confirm = await os.actions({
-			type: 'question',
-			title: i18n.ts.disableFederationConfirm,
-			text: i18n.ts.disableFederationConfirmWarn,
-			actions: [
-				{
-					value: 'yes' as const,
-					text: i18n.ts.disableFederationOk,
-					primary: true,
-				},
-				{
-					value: 'neverShow' as const,
-					text: `${i18n.ts.disableFederationOk} (${i18n.ts.neverShow})`,
-					danger: true,
-				},
-				{
-					value: 'no' as const,
-					text: i18n.ts.cancel,
-				},
-			],
-		});
-		if (confirm.canceled) return;
-		if (confirm.result === 'no') return;
+  if (!localOnly && neverShowInfo !== 'true') {
+    const confirm = await os.actions({
+      type: 'question',
+      title: i18n.ts.disableFederationConfirm,
+      text: i18n.ts.disableFederationConfirmWarn,
+      actions: [
+        {
+          value: 'yes' as const,
+          text: i18n.ts.disableFederationOk,
+          primary: true,
+        },
+        {
+          value: 'neverShow' as const,
+          text: `${i18n.ts.disableFederationOk} (${i18n.ts.neverShow})`,
+          danger: true,
+        },
+        {
+          value: 'no' as const,
+          text: i18n.ts.cancel,
+        },
+      ],
+    });
+    if (confirm.canceled) return;
+    if (confirm.result === 'no') return;
 
-		if (confirm.result === 'neverShow') {
-			miLocalStorage.setItem('neverShowLocalOnlyInfo', 'true');
-		}
-	}
+    if (confirm.result === 'neverShow') {
+      miLocalStorage.setItem('neverShowLocalOnlyInfo', 'true');
+    }
+  }
 
-	localOnly = !localOnly;
+  localOnly = !localOnly;
 }
 
 async function toggleReactionAcceptance() {
-	const select = await os.select({
-		title: i18n.ts.reactionAcceptance,
-		items: [
-			{ value: null, text: i18n.ts.all },
-			{ value: 'likeOnlyForRemote' as const, text: i18n.ts.likeOnlyForRemote },
-			{ value: 'nonSensitiveOnly' as const, text: i18n.ts.nonSensitiveOnly },
-			{ value: 'nonSensitiveOnlyForLocalLikeOnlyForRemote' as const, text: i18n.ts.nonSensitiveOnlyForLocalLikeOnlyForRemote },
-			{ value: 'likeOnly' as const, text: i18n.ts.likeOnly },
-		],
-		default: reactionAcceptance,
-	});
-	if (select.canceled) return;
-	reactionAcceptance = select.result;
+  const select = await os.select({
+    title: i18n.ts.reactionAcceptance,
+    items: [
+      {value: null, text: i18n.ts.all},
+      {value: 'likeOnlyForRemote' as const, text: i18n.ts.likeOnlyForRemote},
+      {value: 'nonSensitiveOnly' as const, text: i18n.ts.nonSensitiveOnly},
+      {value: 'nonSensitiveOnlyForLocalLikeOnlyForRemote' as const, text: i18n.ts.nonSensitiveOnlyForLocalLikeOnlyForRemote},
+      {value: 'likeOnly' as const, text: i18n.ts.likeOnly},
+    ],
+    default: reactionAcceptance,
+  });
+  if (select.canceled) return;
+  reactionAcceptance = select.result;
 }
 
 function pushVisibleUser(user) {
-	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
-		visibleUsers.push(user);
-	}
+  if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
+    visibleUsers.push(user);
+  }
 }
 
 function addVisibleUser() {
-	os.selectUser().then(user => {
-		pushVisibleUser(user);
+  os.selectUser().then(user => {
+    pushVisibleUser(user);
 
-		if (!text.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
-			text = `@${Misskey.acct.toString(user)} ${text}`;
-		}
-	});
+    if (!text.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
+      text = `@${Misskey.acct.toString(user)} ${text}`;
+    }
+  });
 }
 
 function removeVisibleUser(user) {
-	visibleUsers = erase(user, visibleUsers);
+  visibleUsers = erase(user, visibleUsers);
 }
 
 function clear() {
-	text = '';
-	files = [];
-	poll = null;
-	quoteId = null;
+  text = '';
+  files = [];
+  poll = null;
+  quoteId = null;
 }
 
 function onKeydown(ev: KeyboardEvent) {
-	if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost) post();
-	if (ev.key === 'Escape') emit('esc');
+  if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost) post();
+  if (ev.key === 'Escape') emit('esc');
 }
 
 function onCompositionUpdate(ev: CompositionEvent) {
-	imeText = ev.data;
+  imeText = ev.data;
 }
 
 function onCompositionEnd(ev: CompositionEvent) {
-	imeText = '';
+  imeText = '';
 }
 
 async function onPaste(ev: ClipboardEvent) {
-	for (const { item, i } of Array.from(ev.clipboardData.items, (item, i) => ({ item, i }))) {
-		if (item.kind === 'file') {
-			const file = item.getAsFile();
-			const lio = file.name.lastIndexOf('.');
-			const ext = lio >= 0 ? file.name.slice(lio) : '';
-			const formatted = `${formatTimeString(new Date(file.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
-			upload(file, formatted);
-		}
-	}
+  for (const {item, i} of Array.from(ev.clipboardData.items, (item, i) => ({item, i}))) {
+    if (item.kind === 'file') {
+      const file = item.getAsFile();
+      const lio = file.name.lastIndexOf('.');
+      const ext = lio >= 0 ? file.name.slice(lio) : '';
+      const formatted = `${formatTimeString(new Date(file.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
+      upload(file, formatted);
+    }
+  }
 
-	const paste = ev.clipboardData.getData('text');
+  const paste = ev.clipboardData.getData('text');
 
-	if (!props.renote && !quoteId && paste.startsWith(url + '/notes/')) {
-		ev.preventDefault();
+  if (!props.renote && !quoteId && paste.startsWith(url + '/notes/')) {
+    ev.preventDefault();
 
-		os.confirm({
-			type: 'info',
-			text: i18n.ts.quoteQuestion,
-		}).then(({ canceled }) => {
-			if (canceled) {
-				insertTextAtCursor(textareaEl, paste);
-				return;
-			}
+    os.confirm({
+      type: 'info',
+      text: i18n.ts.quoteQuestion,
+    }).then(({canceled}) => {
+      if (canceled) {
+        insertTextAtCursor(textareaEl, paste);
+        return;
+      }
 
-			quoteId = paste.substring(url.length).match(/^\/notes\/(.+?)\/?$/)[1];
-		});
-	}
+      quoteId = paste.substring(url.length).match(/^\/notes\/(.+?)\/?$/)[1];
+    });
+  }
 }
 
 function onDragover(ev) {
-	if (!ev.dataTransfer.items[0]) return;
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	if (isFile || isDriveFile) {
-		ev.preventDefault();
-		draghover = true;
-		switch (ev.dataTransfer.effectAllowed) {
-			case 'all':
-			case 'uninitialized':
-			case 'copy':
-			case 'copyLink':
-			case 'copyMove':
-				ev.dataTransfer.dropEffect = 'copy';
-				break;
-			case 'linkMove':
-			case 'move':
-				ev.dataTransfer.dropEffect = 'move';
-				break;
-			default:
-				ev.dataTransfer.dropEffect = 'none';
-				break;
-		}
-	}
+  if (!ev.dataTransfer.items[0]) return;
+  const isFile = ev.dataTransfer.items[0].kind === 'file';
+  const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
+  if (isFile || isDriveFile) {
+    ev.preventDefault();
+    draghover = true;
+    switch (ev.dataTransfer.effectAllowed) {
+      case 'all':
+      case 'uninitialized':
+      case 'copy':
+      case 'copyLink':
+      case 'copyMove':
+        ev.dataTransfer.dropEffect = 'copy';
+        break;
+      case 'linkMove':
+      case 'move':
+        ev.dataTransfer.dropEffect = 'move';
+        break;
+      default:
+        ev.dataTransfer.dropEffect = 'none';
+        break;
+    }
+  }
 }
 
 function onDragenter(ev) {
-	draghover = true;
+  draghover = true;
 }
 
 function onDragleave(ev) {
-	draghover = false;
+  draghover = false;
 }
 
 function onDrop(ev): void {
-	draghover = false;
+  draghover = false;
 
-	// ファイルだったら
-	if (ev.dataTransfer.files.length > 0) {
-		ev.preventDefault();
-		for (const x of Array.from(ev.dataTransfer.files)) upload(x);
-		return;
-	}
+  // ファイルだったら
+  if (ev.dataTransfer.files.length > 0) {
+    ev.preventDefault();
+    for (const x of Array.from(ev.dataTransfer.files)) upload(x);
+    return;
+  }
 
-	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
-		const file = JSON.parse(driveFile);
-		files.push(file);
-		ev.preventDefault();
-	}
-	//#endregion
+  //#region ドライブのファイル
+  const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+  if (driveFile != null && driveFile !== '') {
+    const file = JSON.parse(driveFile);
+    files.push(file);
+    ev.preventDefault();
+  }
+  //#endregion
 }
 
 function saveDraft() {
-	if (props.instant) return;
+  if (props.instant) return;
 
-	const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
+  const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
 
-	draftData[draftKey] = {
-		updatedAt: new Date(),
-		data: {
-			text: text,
-			useCw: useCw,
-			cw: cw,
-			visibility: visibility,
-			localOnly: localOnly,
-			files: files,
-			poll: poll,
-		},
-	};
+  draftData[draftKey] = {
+    updatedAt: new Date(),
+    data: {
+      text: text,
+      useCw: useCw,
+      cw: cw,
+      visibility: visibility,
+      localOnly: localOnly,
+      files: files,
+      poll: poll,
+    },
+  };
 
-	miLocalStorage.setItem('drafts', JSON.stringify(draftData));
+  miLocalStorage.setItem('drafts', JSON.stringify(draftData));
 }
 
 function deleteDraft() {
-	const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
+  const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
 
-	delete draftData[draftKey];
+  delete draftData[draftKey];
 
-	miLocalStorage.setItem('drafts', JSON.stringify(draftData));
+  miLocalStorage.setItem('drafts', JSON.stringify(draftData));
 }
 
 async function post(ev?: MouseEvent) {
-	if (ev) {
-		const el = ev.currentTarget ?? ev.target;
-		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		os.popup(MkRippleEffect, { x, y }, {}, 'end');
-	}
+  if (ev) {
+    const el = ev.currentTarget ?? ev.target;
+    const rect = el.getBoundingClientRect();
+    const x = rect.left + (el.offsetWidth / 2);
+    const y = rect.top + (el.offsetHeight / 2);
+    os.popup(MkRippleEffect, {x, y}, {}, 'end');
+  }
 
-	const annoying =
-		text.includes('$[x2') ||
-		text.includes('$[x3') ||
-		text.includes('$[x4') ||
-		text.includes('$[scale') ||
-		text.includes('$[position');
+  const annoying =
+      text.includes('$[x2') ||
+      text.includes('$[x3') ||
+      text.includes('$[x4') ||
+      text.includes('$[scale') ||
+      text.includes('$[position');
 
-	if (annoying && visibility === 'public') {
-		const { canceled, result } = await os.actions({
-			type: 'warning',
-			text: i18n.ts.thisPostMayBeAnnoying,
-			actions: [{
-				value: 'home',
-				text: i18n.ts.thisPostMayBeAnnoyingHome,
-				primary: true,
-			}, {
-				value: 'cancel',
-				text: i18n.ts.thisPostMayBeAnnoyingCancel,
-			}, {
-				value: 'ignore',
-				text: i18n.ts.thisPostMayBeAnnoyingIgnore,
-			}],
-		});
+  if (annoying && visibility === 'public') {
+    const {canceled, result} = await os.actions({
+      type: 'warning',
+      text: i18n.ts.thisPostMayBeAnnoying,
+      actions: [{
+        value: 'home',
+        text: i18n.ts.thisPostMayBeAnnoyingHome,
+        primary: true,
+      }, {
+        value: 'cancel',
+        text: i18n.ts.thisPostMayBeAnnoyingCancel,
+      }, {
+        value: 'ignore',
+        text: i18n.ts.thisPostMayBeAnnoyingIgnore,
+      }],
+    });
 
-		if (canceled) return;
-		if (result === 'cancel') return;
-		if (result === 'home') {
-			visibility = 'home';
-		}
-	}
+    if (canceled) return;
+    if (result === 'cancel') return;
+    if (result === 'home') {
+      visibility = 'home';
+    }
+  }
 
-	let postData = {
-		text: text === '' ? undefined : text,
-		fileIds: files.length > 0 ? files.map(f => f.id) : undefined,
-		replyId: props.reply ? props.reply.id : undefined,
-		renoteId: props.renote ? props.renote.id : quoteId ? quoteId : undefined,
-		channelId: props.channel ? props.channel.id : undefined,
-		poll: poll,
-		cw: useCw ? cw ?? '' : undefined,
-		localOnly: localOnly,
-		visibility: visibility,
-		visibleUserIds: visibility === 'specified' ? visibleUsers.map(u => u.id) : undefined,
-		reactionAcceptance,
-	};
+  let postData = {
+    text: text === '' ? undefined : text,
+    fileIds: files.length > 0 ? files.map(f => f.id) : undefined,
+    replyId: props.reply ? props.reply.id : undefined,
+    renoteId: props.renote ? props.renote.id : quoteId ? quoteId : undefined,
+    channelId: props.channel ? props.channel.id : undefined,
+    poll: poll,
+    cw: useCw ? cw ?? '' : undefined,
+    localOnly: localOnly,
+    visibility: visibility,
+    visibleUserIds: visibility === 'specified' ? visibleUsers.map(u => u.id) : undefined,
+    reactionAcceptance,
+  };
 
-	if (withHashtags && hashtags && hashtags.trim() !== '') {
-		const hashtags_ = hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
-		postData.text = postData.text ? `${postData.text} ${hashtags_}` : hashtags_;
-	}
+  if (withHashtags && hashtags && hashtags.trim() !== '') {
+    const hashtags_ = hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
+    postData.text = postData.text ? `${postData.text} ${hashtags_}` : hashtags_;
+  }
 
-	// plugin
-	if (notePostInterruptors.length > 0) {
-		for (const interruptor of notePostInterruptors) {
-			postData = await interruptor.handler(deepClone(postData));
-		}
-	}
+  // plugin
+  if (notePostInterruptors.length > 0) {
+    for (const interruptor of notePostInterruptors) {
+      postData = await interruptor.handler(deepClone(postData));
+    }
+  }
 
-	let token = undefined;
+  let token = undefined;
 
-	if (postAccount) {
-		const storedAccounts = await getAccounts();
-		token = storedAccounts.find(x => x.id === postAccount.id)?.token;
-	}
+  if (postAccount) {
+    const storedAccounts = await getAccounts();
+    token = storedAccounts.find(x => x.id === postAccount.id)?.token;
+  }
 
-	posting = true;
-	os.api('notes/create', postData, token).then(() => {
-		if (props.freezeAfterPosted) {
-			posted = true;
-		} else {
-			clear();
-		}
-		nextTick(() => {
-			deleteDraft();
-			emit('posted');
-			if (postData.text && postData.text !== '') {
-				const hashtags_ = mfm.parse(postData.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
-				const history = JSON.parse(miLocalStorage.getItem('hashtags') ?? '[]') as string[];
-				miLocalStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
-			}
-			posting = false;
-			postAccount = null;
+  posting = true;
+  os.api('notes/create', postData, token).then(() => {
+    if (props.freezeAfterPosted) {
+      posted = true;
+    } else {
+      clear();
+    }
+    nextTick(() => {
+      deleteDraft();
+      emit('posted');
+      if (postData.text && postData.text !== '') {
+        const hashtags_ = mfm.parse(postData.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
+        const history = JSON.parse(miLocalStorage.getItem('hashtags') ?? '[]') as string[];
+        miLocalStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
+      }
+      posting = false;
+      postAccount = null;
 
-			incNotesCount();
-			if (notesCount === 1) {
-				claimAchievement('notes1');
-			}
+      incNotesCount();
+      if (notesCount === 1) {
+        claimAchievement('notes1');
+      }
 
-			const text = postData.text ?? '';
-			const lowerCase = text.toLowerCase();
-			if ((lowerCase.includes('love') || lowerCase.includes('❤')) && lowerCase.includes('misskey')) {
-				claimAchievement('iLoveMisskey');
-			}
-			if ([
-				'https://youtu.be/Efrlqw8ytg4',
-				'https://www.youtube.com/watch?v=Efrlqw8ytg4',
-				'https://m.youtube.com/watch?v=Efrlqw8ytg4',
+      const text = postData.text ?? '';
+      const lowerCase = text.toLowerCase();
+      if ((lowerCase.includes('love') || lowerCase.includes('❤')) && lowerCase.includes('misskey')) {
+        claimAchievement('iLoveMisskey');
+      }
+      if ([
+        'https://youtu.be/Efrlqw8ytg4',
+        'https://www.youtube.com/watch?v=Efrlqw8ytg4',
+        'https://m.youtube.com/watch?v=Efrlqw8ytg4',
 
-				'https://youtu.be/XVCwzwxdHuA',
-				'https://www.youtube.com/watch?v=XVCwzwxdHuA',
-				'https://m.youtube.com/watch?v=XVCwzwxdHuA',
+        'https://youtu.be/XVCwzwxdHuA',
+        'https://www.youtube.com/watch?v=XVCwzwxdHuA',
+        'https://m.youtube.com/watch?v=XVCwzwxdHuA',
 
-				'https://open.spotify.com/track/3Cuj0mZrlLoXx9nydNi7RB',
-				'https://open.spotify.com/track/7anfcaNPQWlWCwyCHmZqNy',
-				'https://open.spotify.com/track/5Odr16TvEN4my22K9nbH7l',
-				'https://open.spotify.com/album/5bOlxyl4igOrp2DwVQxBco',
-			].some(url => text.includes(url))) {
-				claimAchievement('brainDiver');
-			}
+        'https://open.spotify.com/track/3Cuj0mZrlLoXx9nydNi7RB',
+        'https://open.spotify.com/track/7anfcaNPQWlWCwyCHmZqNy',
+        'https://open.spotify.com/track/5Odr16TvEN4my22K9nbH7l',
+        'https://open.spotify.com/album/5bOlxyl4igOrp2DwVQxBco',
+      ].some(url => text.includes(url))) {
+        claimAchievement('brainDiver');
+      }
 
-			if (props.renote && (props.renote.userId === $i.id) && text.length > 0) {
-				claimAchievement('selfQuote');
-			}
+      if (props.renote && (props.renote.userId === $i.id) && text.length > 0) {
+        claimAchievement('selfQuote');
+      }
 
-			const date = new Date();
-			const h = date.getHours();
-			const m = date.getMinutes();
-			const s = date.getSeconds();
-			if (h >= 0 && h <= 3) {
-				claimAchievement('postedAtLateNight');
-			}
-			if (m === 0 && s === 0) {
-				claimAchievement('postedAt0min0sec');
-			}
-		});
-	}).catch(err => {
-		posting = false;
-		os.alert({
-			type: 'error',
-			text: err.message + '\n' + (err as any).id,
-		});
-	});
+      const date = new Date();
+      const h = date.getHours();
+      const m = date.getMinutes();
+      const s = date.getSeconds();
+      if (h >= 0 && h <= 3) {
+        claimAchievement('postedAtLateNight');
+      }
+      if (m === 0 && s === 0) {
+        claimAchievement('postedAt0min0sec');
+      }
+    });
+  }).catch(err => {
+    posting = false;
+    os.alert({
+      type: 'error',
+      text: err.message + '\n' + (err as any).id,
+    });
+  });
 }
 
 function cancel() {
-	emit('cancel');
+  emit('cancel');
 }
 
 function insertMention() {
-	os.selectUser().then(user => {
-		insertTextAtCursor(textareaEl, '@' + Misskey.acct.toString(user) + ' ');
-	});
+  os.selectUser().then(user => {
+    insertTextAtCursor(textareaEl, '@' + Misskey.acct.toString(user) + ' ');
+  });
 }
 
 async function insertEmoji(ev: MouseEvent) {
-	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textareaEl);
+  os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textareaEl);
 }
 
 function showActions(ev) {
-	os.popupMenu(postFormActions.map(action => ({
-		text: action.title,
-		action: () => {
-			action.handler({
-				text: text,
-			}, (key, value) => {
-				if (key === 'text') { text = value; }
-			});
-		},
-	})), ev.currentTarget ?? ev.target);
+  os.popupMenu(postFormActions.map(action => ({
+    text: action.title,
+    action: () => {
+      action.handler({
+        text: text,
+      }, (key, value) => {
+        if (key === 'text') {
+          text = value;
+        }
+      });
+    },
+  })), ev.currentTarget ?? ev.target);
 }
 
 let postAccount = $ref<Misskey.entities.UserDetailed | null>(null);
 
 function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: false,
-		includeCurrentAccount: true,
-		active: postAccount != null ? postAccount.id : $i.id,
-		onChoose: (account) => {
-			if (account.id === $i.id) {
-				postAccount = null;
-			} else {
-				postAccount = account;
-			}
-		},
-	}, ev);
+  openAccountMenu_({
+    withExtraOperation: false,
+    includeCurrentAccount: true,
+    active: postAccount != null ? postAccount.id : $i.id,
+    onChoose: (account) => {
+      if (account.id === $i.id) {
+        postAccount = null;
+      } else {
+        postAccount = account;
+      }
+    },
+  }, ev);
 }
 
 onMounted(() => {
-	if (props.autofocus) {
-		focus();
+  if (props.autofocus) {
+    focus();
 
-		nextTick(() => {
-			focus();
-		});
-	}
+    nextTick(() => {
+      focus();
+    });
+  }
 
-	// TODO: detach when unmount
-	new Autocomplete(textareaEl, $$(text));
-	new Autocomplete(cwInputEl, $$(cw));
-	new Autocomplete(hashtagsInputEl, $$(hashtags));
+  // TODO: detach when unmount
+  new Autocomplete(textareaEl, $$(text));
+  new Autocomplete(cwInputEl, $$(cw));
+  new Autocomplete(hashtagsInputEl, $$(hashtags));
 
-	nextTick(() => {
-		// 書きかけの投稿を復元
-		if (!props.instant && !props.mention && !props.specified) {
-			const draft = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}')[draftKey];
-			if (draft) {
-				text = draft.data.text;
-				useCw = draft.data.useCw;
-				cw = draft.data.cw;
-				visibility = draft.data.visibility;
-				localOnly = draft.data.localOnly;
-				files = (draft.data.files || []).filter(draftFile => draftFile);
-				if (draft.data.poll) {
-					poll = draft.data.poll;
-				}
-			}
-		}
+  nextTick(() => {
+    // 書きかけの投稿を復元
+    if (!props.instant && !props.mention && !props.specified) {
+      const draft = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}')[draftKey];
+      if (draft) {
+        text = draft.data.text;
+        useCw = draft.data.useCw;
+        cw = draft.data.cw;
+        visibility = draft.data.visibility;
+        localOnly = draft.data.localOnly;
+        files = (draft.data.files || []).filter(draftFile => draftFile);
+        if (draft.data.poll) {
+          poll = draft.data.poll;
+        }
+      }
+    }
 
-		// 削除して編集
-		if (props.initialNote) {
-			const init = props.initialNote;
-			text = init.text ? init.text : '';
-			files = init.files;
-			cw = init.cw;
-			useCw = init.cw != null;
-			if (init.poll) {
-				poll = {
-					choices: init.poll.choices.map(x => x.text),
-					multiple: init.poll.multiple,
-					expiresAt: init.poll.expiresAt,
-					expiredAfter: init.poll.expiredAfter,
-				};
-			}
-			visibility = init.visibility;
-			localOnly = init.localOnly;
-			quoteId = init.renote ? init.renote.id : null;
-		}
+    // 削除して編集
+    if (props.initialNote) {
+      const init = props.initialNote;
+      text = init.text ? init.text : '';
+      files = init.files;
+      cw = init.cw;
+      useCw = init.cw != null;
+      if (init.poll) {
+        poll = {
+          choices: init.poll.choices.map(x => x.text),
+          multiple: init.poll.multiple,
+          expiresAt: init.poll.expiresAt,
+          expiredAfter: init.poll.expiredAfter,
+        };
+      }
+      visibility = init.visibility;
+      localOnly = init.localOnly;
+      quoteId = init.renote ? init.renote.id : null;
+    }
 
-		nextTick(() => watchForDraft());
-	});
+    nextTick(() => watchForDraft());
+  });
 });
 
 defineExpose({
-	clear,
+  clear,
 });
 </script>
 
 <style lang="scss" module>
 .root {
-	position: relative;
-	container-type: inline-size;
+  position: relative;
+  container-type: inline-size;
 
-	&.modal {
-		width: 100%;
-		max-width: 520px;
-	}
+  &.modal {
+    width: 100%;
+    max-width: 520px;
+  }
 }
 
 //#region header
 .header {
-	z-index: 1000;
-	min-height: 50px;
-	display: flex;
-	flex-wrap: nowrap;
-	gap: 4px;
+  z-index: 1000;
+  min-height: 50px;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 4px;
 }
 
 .headerLeft {
-	display: flex;
-	flex: 0 1 100px;
+  display: flex;
+  flex: 0 1 100px;
 }
 
 .cancel {
-	padding: 0;
-	font-size: 1em;
-	height: 100%;
-	flex: 0 1 50px;
+  padding: 0;
+  font-size: 1em;
+  height: 100%;
+  flex: 0 1 50px;
 }
 
 .account {
-	height: 100%;
-	display: inline-flex;
-	vertical-align: bottom;
-	flex: 0 1 50px;
+  height: 100%;
+  display: inline-flex;
+  vertical-align: bottom;
+  flex: 0 1 50px;
 }
 
 .avatar {
-	width: 28px;
-	height: 28px;
-	margin: auto;
+  width: 28px;
+  height: 28px;
+  margin: auto;
 }
 
 .headerRight {
-	display: flex;
-	min-height: 48px;
-	font-size: 0.9em;
-	flex-wrap: nowrap;
-	align-items: center;
-	margin-left: auto;
-	gap: 4px;
-	overflow: clip;
-	padding-left: 4px;
+  display: flex;
+  min-height: 48px;
+  font-size: 0.9em;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-left: auto;
+  gap: 4px;
+  overflow: clip;
+  padding-left: 4px;
 }
 
 .submit {
-	margin: 12px 12px 12px 6px;
-	vertical-align: bottom;
+  margin: 12px 12px 12px 6px;
+  vertical-align: bottom;
 
-	&:disabled {
-		opacity: 0.7;
-	}
+  &:disabled {
+    opacity: 0.7;
+  }
 
-	&.posting {
-		cursor: wait;
-	}
+  &.posting {
+    cursor: wait;
+  }
 
-	&:not(:disabled):hover {
-		> .inner {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
-	}
+  &:not(:disabled):hover {
+    > .inner {
+      background: linear-gradient(90deg, var(--X8), var(--X8));
+    }
+  }
 
-	&:not(:disabled):active {
-		> .inner {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
-	}
+  &:not(:disabled):active {
+    > .inner {
+      background: linear-gradient(90deg, var(--X8), var(--X8));
+    }
+  }
 }
 
 .submitInner {
-	padding: 0 12px;
-	line-height: 34px;
-	font-weight: bold;
-	border-radius: 6px;
-	min-width: 90px;
-	box-sizing: border-box;
-	color: var(--fgOnAccent);
-	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+  padding: 0 12px;
+  line-height: 34px;
+  font-weight: bold;
+  border-radius: 6px;
+  min-width: 90px;
+  box-sizing: border-box;
+  color: var(--fgOnAccent);
+  background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+
+  &.gamingLight {
+
+    background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+    background-size: 1800% 1800% !important;
+    -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+  }
+  &.gamingDark{
+    color: white;
+    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+    background-size: 1800% 1800%;
+
+    -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
+    -moz-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
+    animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
+  }
 }
 
 .headerRightItem {
-	margin: 0;
-	padding: 8px;
-	border-radius: 6px;
+  margin: 0;
+  padding: 8px;
+  border-radius: 6px;
 
-	&:hover {
-		background: var(--X5);
-	}
+  &:hover {
+    background: var(--X5);
+  }
 
-	&:disabled {
-		background: none;
-	}
+  &:disabled {
+    background: none;
+  }
 
-	&.danger {
-		color: #ff2a2a;
-	}
+  &.danger {
+    color: #ff2a2a;
+  }
 }
 
 .headerRightButtonText {
-	padding-left: 6px;
+  padding-left: 6px;
 }
 
 .visibility {
-	overflow: clip;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  overflow: clip;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
-	&:enabled {
-		> .headerRightButtonText {
-			opacity: 0.8;
-		}
-	}
+  &:enabled {
+    > .headerRightButtonText {
+      opacity: 0.8;
+    }
+  }
 }
+
 //#endregion
 
 .preview {
-	padding: 16px 20px 0 20px;
-	max-height: 150px;
-	overflow: auto;
+  padding: 16px 20px 0 20px;
+  max-height: 150px;
+  overflow: auto;
 }
 
 .targetNote {
-	padding: 0 20px 16px 20px;
+  padding: 0 20px 16px 20px;
 }
 
 .withQuote {
-	margin: 0 0 8px 0;
-	color: var(--accent);
+  margin: 0 0 8px 0;
+  color: var(--accent);
 }
 
 .toSpecified {
-	padding: 6px 24px;
-	margin-bottom: 8px;
-	overflow: auto;
-	white-space: nowrap;
+  padding: 6px 24px;
+  margin-bottom: 8px;
+  overflow: auto;
+  white-space: nowrap;
 }
 
 .visibleUsers {
-	display: inline;
-	top: -1px;
-	font-size: 14px;
+  display: inline;
+  top: -1px;
+  font-size: 14px;
 }
 
 .visibleUser {
-	margin-right: 14px;
-	padding: 8px 0 8px 8px;
-	border-radius: 8px;
-	background: var(--X4);
+  margin-right: 14px;
+  padding: 8px 0 8px 8px;
+  border-radius: 8px;
+  background: var(--X4);
 }
 
 .hasNotSpecifiedMentions {
-	margin: 0 20px 16px 20px;
+  margin: 0 20px 16px 20px;
 }
 
 .cw,
 .hashtags,
 .text {
-	display: block;
-	box-sizing: border-box;
-	padding: 0 24px;
-	margin: 0;
-	width: 100%;
-	font-size: 16px;
-	border: none;
-	border-radius: 0;
-	background: transparent;
-	color: var(--fg);
-	font-family: inherit;
+  display: block;
+  box-sizing: border-box;
+  padding: 0 24px;
+  margin: 0;
+  width: 100%;
+  font-size: 16px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--fg);
+  font-family: inherit;
 
-	&:focus {
-		outline: none;
-	}
+  &:focus {
+    outline: none;
+  }
 
-	&:disabled {
-		opacity: 0.5;
-	}
+  &:disabled {
+    opacity: 0.5;
+  }
 }
 
 .cw {
-	z-index: 1;
-	padding-bottom: 8px;
-	border-bottom: solid 0.5px var(--divider);
+  z-index: 1;
+  padding-bottom: 8px;
+  border-bottom: solid 0.5px var(--divider);
 }
 
 .hashtags {
-	z-index: 1;
-	padding-top: 8px;
-	padding-bottom: 8px;
-	border-top: solid 0.5px var(--divider);
+  z-index: 1;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-top: solid 0.5px var(--divider);
 }
 
 .textOuter {
-	width: 100%;
-	position: relative;
+  width: 100%;
+  position: relative;
 
-	&.withCw {
-		padding-top: 8px;
-	}
+  &.withCw {
+    padding-top: 8px;
+  }
 }
 
 .text {
-	max-width: 100%;
-	min-width: 100%;
-	width: 100%;
-	min-height: 90px;
-	height: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  width: 100%;
+  min-height: 90px;
+  height: 100%;
 }
 
 .textCount {
-	position: absolute;
-	top: 0;
-	right: 2px;
-	padding: 4px 6px;
-	font-size: .9em;
-	color: var(--warn);
-	border-radius: 6px;
-	min-width: 1.6em;
-	text-align: center;
+  position: absolute;
+  top: 0;
+  right: 2px;
+  padding: 4px 6px;
+  font-size: .9em;
+  color: var(--warn);
+  border-radius: 6px;
+  min-width: 1.6em;
+  text-align: center;
 
-	&.textOver {
-		color: #ff2a2a;
-	}
+  &.textOver {
+    color: #ff2a2a;
+  }
 }
 
 .footer {
-	display: flex;
-	padding: 0 16px 16px 16px;
-	font-size: 1em;
+  display: flex;
+  padding: 0 16px 16px 16px;
+  font-size: 1em;
 }
 
 .footerLeft {
-	flex: 1;
-	display: grid;
-	grid-auto-flow: row;
-	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
-	grid-auto-rows: 40px;
+  flex: 1;
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+  grid-auto-rows: 40px;
 }
 
 .footerRight {
-	flex: 0;
-	margin-left: auto;
-	display: grid;
-	grid-auto-flow: row;
-	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
-	grid-auto-rows: 40px;
-	direction: rtl;
+  flex: 0;
+  margin-left: auto;
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+  grid-auto-rows: 40px;
+  direction: rtl;
 }
 
 .footerButton {
-	display: inline-block;
-	padding: 0;
-	margin: 0;
-	font-size: 1em;
-	width: auto;
-	height: 100%;
-	border-radius: 6px;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  font-size: 1em;
+  width: auto;
+  height: 100%;
+  border-radius: 6px;
 
-	&:hover {
-		background: var(--X5);
-	}
+  &:hover {
+    background: var(--X5);
+  }
 
-	&.footerButtonActive {
-		color: var(--accent);
-	}
+  &.footerButtonActive {
+    color: var(--accent);
+  }
 }
 
 .previewButtonActive {
-	color: var(--accent);
+  color: var(--accent);
 }
 
 @container (max-width: 500px) {
-	.headerRight {
-		font-size: .9em;
-	}
+  .headerRight {
+    font-size: .9em;
+  }
 
-	.headerRightButtonText {
-		display: none;
-	}
+  .headerRightButtonText {
+    display: none;
+  }
 
-	.visibility {
-		overflow: initial;
-	}
+  .visibility {
+    overflow: initial;
+  }
 
-	.submit {
-		margin: 8px 8px 8px 4px;
-	}
+  .submit {
+    margin: 8px 8px 8px 4px;
+  }
 
-	.toSpecified {
-		padding: 6px 16px;
-	}
+  .toSpecified {
+    padding: 6px 16px;
+  }
 
-	.preview {
-		padding: 16px 14px 0 14px;
-	}
-	.cw,
-	.hashtags,
-	.text {
-		padding: 0 16px;
-	}
+  .preview {
+    padding: 16px 14px 0 14px;
+  }
 
-	.text {
-		min-height: 80px;
-	}
+  .cw,
+  .hashtags,
+  .text {
+    padding: 0 16px;
+  }
 
-	.footer {
-		padding: 0 8px 8px 8px;
-	}
+  .text {
+    min-height: 80px;
+  }
+
+  .footer {
+    padding: 0 8px 8px 8px;
+  }
 }
 
 @container (max-width: 350px) {
-	.footer {
-		font-size: 0.9em;
-	}
+  .footer {
+    font-size: 0.9em;
+  }
 
-	.footerLeft {
-		grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
-	}
+  .footerLeft {
+    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
+  }
 
-	.footerRight {
-		grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
-	}
+  .footerRight {
+    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
+  }
 
-	.headerRight {
-		gap: 0;
-	}
+  .headerRight {
+    gap: 0;
+  }
+  @-webkit-keyframes AnimationLight {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  @-moz-keyframes AnimationLight {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  @keyframes AnimationLight {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  @-webkit-keyframes AnimationDark {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  @-moz-keyframes AnimationDark {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  @keyframes AnimationDark {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
 }
 </style>
diff --git a/packages/frontend/src/components/MkSwitch.button.vue b/packages/frontend/src/components/MkSwitch.button.vue
index a7e91acc39..9cbcb82bcb 100644
--- a/packages/frontend/src/components/MkSwitch.button.vue
+++ b/packages/frontend/src/components/MkSwitch.button.vue
@@ -9,19 +9,55 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:class="{
 		[$style.button]: true,
 		[$style.buttonChecked]: checked,
-		[$style.buttonDisabled]: props.disabled
+		[$style.buttonDisabled]: props.disabled,
+		[$style.gamingDark]: gaming === 'dark' && checked,
+		[$style.gamingLight]: gaming === 'light' && checked
 	}"
 	data-cy-switch-toggle
 	@click.prevent.stop="toggle"
 >
-	<div :class="{ [$style.knob]: true, [$style.knobChecked]: checked }"></div>
+	<div
+		:class="{ [$style.knob]: true, [$style.knobChecked]: checked,	[$style.gamingDark]: gaming === 'dark' && checked,[$style.gamingLight]: gaming === 'light' && checked}"></div>
 </span>
 </template>
 
 <script lang="ts" setup>
-import { toRefs, Ref } from 'vue';
-import { i18n } from '@/i18n.js';
+import {toRefs, Ref, ref, computed, watch} from 'vue';
+import {i18n} from '@/i18n.js';
+import {defaultStore} from "@/store.js";
 
+let gaming = ref('');
+
+const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+if (darkMode.value && gamingMode.value == true) {
+	gaming.value = 'dark';
+} else if (!darkMode.value && gamingMode.value == true) {
+	gaming.value = 'light';
+} else {
+	gaming.value = '';
+}
+
+watch(darkMode, () => {
+	console.log(gaming)
+	if (darkMode.value && gamingMode.value == true) {
+		gaming.value = 'dark';
+	} else if (!darkMode.value && gamingMode.value == true) {
+		gaming.value = 'light';
+	} else {
+		gaming.value = '';
+	}
+})
+
+watch(gamingMode, () => {
+	if (darkMode.value && gamingMode.value == true) {
+		gaming.value = 'dark';
+	} else if (!darkMode.value && gamingMode.value == true) {
+		gaming.value = 'light';
+	} else {
+		gaming.value = '';
+	}
+})
 const props = withDefaults(defineProps<{
 	checked: boolean | Ref<boolean>;
 	disabled?: boolean;
@@ -56,13 +92,40 @@ const toggle = () => {
 	cursor: pointer;
 	transition: inherit;
 	user-select: none;
+
+	&.gamingLight {
+		border-image: conic-gradient(#e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd) 1;
+		border: solid 1px;
+	}
+
+	&.gamingDark {
+		border-image: conic-gradient(#c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4) 1;
+		border: solid 1px;
+	}
 }
 
 .buttonChecked {
 	background-color: var(--switchOnBg) !important;
 	border-color: var(--switchOnBg) !important;
+
+	&.gamingLight {
+		background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+		background-size: 1800% 1800% !important;
+		-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+		-moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+		animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+	}
+
+	&.gamingDark {
+		background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+		background-size: 1800% 1800% !important;
+		-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+		-moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+		animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+	}
 }
 
+
 .buttonDisabled {
 	cursor: not-allowed;
 }
@@ -78,11 +141,92 @@ const toggle = () => {
 	&:not(.knobChecked) {
 		left: 3px;
 		background: var(--switchOffFg);
+
 	}
 }
 
 .knobChecked {
 	left: 12px;
 	background: var(--switchOnFg);
+
+	&.gamingDark {
+		background: white !important;
+	}
+
+	&.gamingLight {
+		background: white !important;
+	}
+}
+
+@-webkit-keyframes AnimationLight {
+	0% {
+		background-position: 0% 50%
+	}
+	50% {
+		background-position: 100% 50%
+	}
+	100% {
+		background-position: 0% 50%
+	}
+}
+
+@-moz-keyframes AnimationLight {
+	0% {
+		background-position: 0% 50%
+	}
+	50% {
+		background-position: 100% 50%
+	}
+	100% {
+		background-position: 0% 50%
+	}
+}
+
+@keyframes AnimationLight {
+	0% {
+		background-position: 0% 50%
+	}
+	50% {
+		background-position: 100% 50%
+	}
+	100% {
+		background-position: 0% 50%
+	}
+}
+
+@-webkit-keyframes AnimationDark {
+	0% {
+		background-position: 0% 50%
+	}
+	50% {
+		background-position: 100% 50%
+	}
+	100% {
+		background-position: 0% 50%
+	}
+}
+
+@-moz-keyframes AnimationDark {
+	0% {
+		background-position: 0% 50%
+	}
+	50% {
+		background-position: 100% 50%
+	}
+	100% {
+		background-position: 0% 50%
+	}
+}
+
+@keyframes AnimationDark {
+	0% {
+		background-position: 0% 50%
+	}
+	50% {
+		background-position: 100% 50%
+	}
+	100% {
+		background-position: 0% 50%
+	}
 }
 </style>
diff --git a/packages/frontend/src/components/MkSwitch.vue b/packages/frontend/src/components/MkSwitch.vue
index 8e946e7437..4a14121c70 100644
--- a/packages/frontend/src/components/MkSwitch.vue
+++ b/packages/frontend/src/components/MkSwitch.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, { [$style.disabled]: disabled, [$style.checked]: checked }]">
+<div :class="[$style.root, { [$style.disabled]: disabled && gaming === '', [$style.checked]: checked && gaming === '' , [$style.gamingdarkDisabled]: disabled && gaming === 'dark', [$style.gamingLightDisabled]: disabled && gaming === 'light'}]">
 	<input
 		ref="input"
 		type="checkbox"
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@keydown.enter="toggle"
 	>
 	<XButton :checked="checked" :disabled="disabled" @toggle="toggle"/>
-	<span :class="$style.body">
+	<span :class="$style.body,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}">
 		<!-- TODO: 無名slotの方は廃止 -->
 		<span :class="$style.label">
 			<span @click="toggle">
@@ -27,8 +27,42 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { toRefs, Ref } from 'vue';
+import {toRefs, Ref, ref, computed, watch} from 'vue';
 import XButton from '@/components/MkSwitch.button.vue';
+import {defaultStore} from "@/store.js";
+let gaming = ref('');
+const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+
+// gaming.valueに新しい値を代入する
+if (darkMode.value && gamingMode.value == true) {
+  gaming.value = 'dark';
+} else if (!darkMode.value && gamingMode.value == true) {
+  gaming.value = 'light';
+} else {
+  gaming.value = '';
+}
+
+watch(darkMode, () => {
+  console.log(gaming)
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
+
+watch(gamingMode, () => {
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
 
 const props = defineProps<{
 	modelValue: boolean | Ref<boolean>;
@@ -65,6 +99,26 @@ const toggle = () => {
 		cursor: not-allowed;
 	}
 
+  &.gamingDarkDisabled{
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+    background-size: 1800% 1800% !important;
+    -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    -moz-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+
+  }
+  &.gamingLightDisabled{
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+    background-size: 1800% 1800%;
+    -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+
+  }
 	//&.checked {
 	//}
 }
@@ -82,6 +136,22 @@ const toggle = () => {
 	display: block;
 	transition: inherit;
 	color: var(--fg);
+  &.gamingDark {
+    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+    background-size: 1800% 1800%;
+    -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+
+  }
+  &.gamingLight{
+    background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+    background-size: 1800% 1800% !important;
+    -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+
+  }
 }
 
 .label {
@@ -106,4 +176,6 @@ const toggle = () => {
 	font-size: 85%;
 	vertical-align: top;
 }
+
+
 </style>
diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.vue b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
index e62967963f..52dcc05548 100644
--- a/packages/frontend/src/components/global/MkPageHeader.tabs.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<div
 		ref="tabHighlightEl"
-		:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"
+		:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value , [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
 	></div>
 </div>
 </template>
@@ -53,9 +53,40 @@ export type Tab = {
 </script>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, watch, nextTick, shallowRef } from 'vue';
+import {onMounted, onUnmounted, watch, nextTick, shallowRef, ref, computed} from 'vue';
 import { defaultStore } from '@/store.js';
+let gaming = ref('');
 
+const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+if (darkMode.value && gamingMode.value == true) {
+  gaming.value = 'dark';
+} else if (!darkMode.value && gamingMode.value == true) {
+  gaming.value = 'light';
+} else {
+  gaming.value = '';
+}
+
+watch(darkMode, () => {
+  console.log(gaming)
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
+
+watch(gamingMode, () => {
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
 const props = withDefaults(defineProps<{
 	tabs?: Tab[];
 	tab?: string;
@@ -245,9 +276,88 @@ onUnmounted(() => {
 	border-radius: 999px;
 	transition: none;
 	pointer-events: none;
-
+  &.gamingLight{
+    background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+    background-size: 1800% 1800% !important;
+    -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+  }
+  &.gamingDark{
+    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+    background-size: 1800% 1800%;
+    -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+  }
 	&.animate {
 		transition: width 0.15s ease, left 0.15s ease;
 	}
 }
+@-webkit-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@-moz-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@-webkit-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@-moz-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
 </style>
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index ab4e7620dd..833d87bc71 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer :contentMax="700" :marginMin="16">
 			<div class="lxpfedzu">
 				<div class="banner">
-					<img :src="instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
+					<img :src="iconUrl" alt="" class="icon"/>
 				</div>
 
 				<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo>
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onActivated, onMounted, onUnmounted, provide, watch } from 'vue';
+import {computed, onActivated, onMounted, onUnmounted, provide, ref, watch} from 'vue';
 import { i18n } from '@/i18n.js';
 import MkSuperMenu from '@/components/MkSuperMenu.vue';
 import MkInfo from '@/components/MkInfo.vue';
@@ -37,6 +37,7 @@ import * as os from '@/os.js';
 import { lookupUser } from '@/scripts/lookup-user.js';
 import { useRouter } from '@/router.js';
 import { definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
+import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from "@/store.js";
 
 const isEmpty = (x: string | null) => x == null || x === '';
 
@@ -61,7 +62,20 @@ let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha
 let noEmailServer = !instance.enableEmail;
 let thereIsUnresolvedAbuseReport = $ref(false);
 let currentPage = $computed(() => router.currentRef.value.child);
-
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+let iconUrl = ref();
+if (darkMode.value) {
+  iconUrl.value = iconDark;
+} else {
+  iconUrl.value = iconLight;
+}
+watch(darkMode, () => {
+  if (darkMode.value) {
+    iconUrl.value = iconDark;
+  } else {
+    iconUrl.value = iconLight;
+  }
+})
 os.api('admin/abuse-user-reports', {
 	state: 'unresolved',
 	limit: 1,
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index e8cdcef741..d6105416bb 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -375,20 +375,20 @@ function more() {
   }
   &.gamingLight:hover, &.gamingLight.active {
     text-decoration: none;
-    color: black;
+    color: white;
 
     &.gamingLight:before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-      width: 52px;
-      aspect-ratio: 1/1;
-      border-radius: 100%;
+			content: "";
+			display: block;
+			height: 100%;
+			aspect-ratio: 1;
+			margin: auto;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			border-radius: 999px;
       background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
       background-size: 1800% 1800% !important;
       -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index aecf0c1b92..e99abf79ec 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -283,6 +283,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingLight:before {
+			color: white;
       content: "";
       display: block;
       width: calc(100% - 38px);
@@ -302,6 +303,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingLight:hover, &.gamingLight.active {
+			color: white;
       &.gamingLight:before {
         background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
         background-size: 1800% 1800% !important;
@@ -312,6 +314,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingDark:before {
+			color: white;
       content: "";
       display: block;
       width: calc(100% - 38px);
@@ -331,6 +334,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingDark:hover, &.gamingDark.active {
+			color: white;
       &.gamingDark:before {
         background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
         background-size: 1800% 1800% !important;
@@ -470,7 +474,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingLight:hover {
-      color: black;
+      color: white;
       background-size: 1800% 1800% !important;
       text-decoration: none;
       -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
@@ -479,7 +483,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingLight:active {
-      color: black;
+      color: white;
       background-size: 1800% 1800% !important;
       -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
       -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
@@ -487,7 +491,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingLight:hover, &.gamingLight.active {
-      color: black;
+      color: white;
       &.gamingLight:before {
         content: "";
         display: block;
@@ -618,6 +622,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingLight:hover, &.gamingLight.active {
+
       &.gamingLight:before {
         background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
         background-size: 1800% 1800% !important;
@@ -628,6 +633,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingDark:before {
+      color: white;
       content: "";
       display: block;
       position: absolute;
@@ -647,6 +653,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingDark:hover, &.gamingDark.active {
+      color: white;
       &.gamingDark:before {
         background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
         background-size: 1800% 1800% !important;
@@ -793,71 +800,71 @@ function more(ev: MouseEvent) {
     animation: blink 1s infinite;
   }
 
-  @-webkit-keyframes AnimationLight {
-    0% {
-      background-position: 0% 50%
-    }
-    50% {
-      background-position: 100% 50%
-    }
-    100% {
-      background-position: 0% 50%
-    }
+
+}
+@-webkit-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
   }
-  @-moz-keyframes AnimationLight {
-    0% {
-      background-position: 0% 50%
-    }
-    50% {
-      background-position: 100% 50%
-    }
-    100% {
-      background-position: 0% 50%
-    }
+  50% {
+    background-position: 100% 50%
   }
-  @keyframes AnimationLight {
-    0% {
-      background-position: 0% 50%
-    }
-    50% {
-      background-position: 100% 50%
-    }
-    100% {
-      background-position: 0% 50%
-    }
+  100% {
+    background-position: 0% 50%
   }
-  @-webkit-keyframes AnimationDark {
-    0% {
-      background-position: 0% 50%
-    }
-    50% {
-      background-position: 100% 50%
-    }
-    100% {
-      background-position: 0% 50%
-    }
+}
+@-moz-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
   }
-  @-moz-keyframes AnimationDark {
-    0% {
-      background-position: 0% 50%
-    }
-    50% {
-      background-position: 100% 50%
-    }
-    100% {
-      background-position: 0% 50%
-    }
+  50% {
+    background-position: 100% 50%
   }
-  @keyframes AnimationDark {
-    0% {
-      background-position: 0% 50%
-    }
-    50% {
-      background-position: 100% 50%
-    }
-    100% {
-      background-position: 0% 50%
-    }
+  100% {
+    background-position: 0% 50%
+  }
+}  @keyframes AnimationLight {
+     0% {
+       background-position: 0% 50%
+     }
+     50% {
+       background-position: 100% 50%
+     }
+     100% {
+       background-position: 0% 50%
+     }
+   }
+@-webkit-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@-moz-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
   }
 }
 </style>