From bec8237cb34997980ca2a268623a83adcdf3af5f Mon Sep 17 00:00:00 2001
From: mattyatea <mattyacocacora0@gmail.com>
Date: Wed, 20 Sep 2023 09:02:50 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20prismisskey=E7=94=A8=E3=81=AB=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E7=94=BB=E5=83=8F=E3=81=AA=E3=81=A9=E3=82=92=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/about.vue         |  14 +-
 .../frontend/src/pages/settings/theme.vue     | 176 ++--
 packages/frontend/src/store.ts                |   7 +
 .../src/ui/_common_/navbar-for-mobile.vue     |  15 +-
 packages/frontend/src/ui/_common_/navbar.vue  | 794 +++++++++---------
 .../src/widgets/WidgetInstanceInfo.vue        |  13 +-
 6 files changed, 554 insertions(+), 465 deletions(-)

diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 0ff9463841..0cd6e32264 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
 		<div class="_gaps_m">
-			<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
+			<div :class="$style.banner" :style="{ backgroundImage: `url(${ bannerUrl })` }">
 				<div style="overflow: clip;">
 					<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
 					<div :class="$style.bannerName">
@@ -98,7 +98,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import {computed, ref, watch} from 'vue';
 import XEmojis from './about.emojis.vue';
 import XFederation from './about.federation.vue';
 import { version, host } from '@/config';
@@ -115,6 +115,7 @@ import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { claimAchievement } from '@/scripts/achievements';
 import { instance } from '@/instance';
+import {bannerDark, bannerLight, defaultStore} from "@/store";
 
 const props = withDefaults(defineProps<{
 	initialTab?: string;
@@ -130,7 +131,16 @@ watch($$(tab), () => {
 		claimAchievement('viewInstanceChart');
 	}
 });
+let bannerUrl = ref(defaultStore.state.bannerUrl);
 
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+watch(darkMode, () => {
+  if (darkMode.value){
+    bannerUrl.value = bannerDark;
+  }else{
+    bannerUrl.value = bannerLight;
+  }
+})
 const initStats = () => os.api('stats', {
 }).then((res) => {
 	stats = res;
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index 6517f24acb..c1a904708e 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -4,90 +4,107 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="_gaps_m rsljpzjq">
-	<div v-adaptive-border class="rfqxtzch _panel">
-		<div class="toggle">
-			<div class="toggleWrapper">
-				<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
-				<label for="dn" class="toggle">
-					<span class="before">{{ i18n.ts.light }}</span>
-					<span class="after">{{ i18n.ts.dark }}</span>
-					<span class="toggle__handler">
+	<div class="_gaps_m rsljpzjq">
+		<div v-adaptive-border class="rfqxtzch _panel">
+			<div class="toggle">
+				<div class="toggleWrapper">
+					<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
+					<label for="dn" class="toggle">
+						<span class="before">{{ i18n.ts.light }}</span>
+						<span class="after">{{ i18n.ts.dark }}</span>
+						<span class="toggle__handler">
 						<span class="crater crater--1"></span>
 						<span class="crater crater--2"></span>
 						<span class="crater crater--3"></span>
 					</span>
-					<span class="star star--1"></span>
-					<span class="star star--2"></span>
-					<span class="star star--3"></span>
-					<span class="star star--4"></span>
-					<span class="star star--5"></span>
-					<span class="star star--6"></span>
-				</label>
+						<span class="star star--1"></span>
+						<span class="star star--2"></span>
+						<span class="star star--3"></span>
+						<span class="star star--4"></span>
+						<span class="star star--5"></span>
+						<span class="star star--6"></span>
+					</label>
+				</div>
+			</div>
+			<div class="sync">
+				<MkSwitch v-model="syncDeviceDarkMode">{{ i18n.ts.syncDeviceDarkMode }}</MkSwitch>
 			</div>
 		</div>
-		<div class="sync">
-			<MkSwitch v-model="syncDeviceDarkMode">{{ i18n.ts.syncDeviceDarkMode }}</MkSwitch>
+
+		<div class="selects">
+			<MkSelect v-model="lightThemeId" large class="select">
+				<template #label>{{ i18n.ts.themeForLightMode }}</template>
+				<template #prefix><i class="ti ti-sun"></i></template>
+				<option v-if="instanceLightTheme" :key="'instance:' + instanceLightTheme.id" :value="instanceLightTheme.id">
+					{{ instanceLightTheme.name }}
+				</option>
+				<optgroup v-if="installedLightThemes.length > 0" :label="i18n.ts._theme.installedThemes">
+					<option v-for="x in installedLightThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._theme.builtinThemes">
+					<option v-for="x in builtinLightThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+			</MkSelect>
+			<MkSelect v-model="darkThemeId" large class="select">
+				<template #label>{{ i18n.ts.themeForDarkMode }}</template>
+				<template #prefix><i class="ti ti-moon"></i></template>
+				<option v-if="instanceDarkTheme" :key="'instance:' + instanceDarkTheme.id" :value="instanceDarkTheme.id">
+					{{ instanceDarkTheme.name }}
+				</option>
+				<optgroup v-if="installedDarkThemes.length > 0" :label="i18n.ts._theme.installedThemes">
+					<option v-for="x in installedDarkThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._theme.builtinThemes">
+					<option v-for="x in builtinDarkThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+			</MkSelect>
 		</div>
+
+		<FormSection>
+			<div class="_formLinksGrid">
+				<FormLink to="/settings/theme/manage">
+					<template #icon><i class="ti ti-tool"></i></template>
+					{{ i18n.ts._theme.manage }}
+					<template #suffix>{{ themesCount }}</template>
+				</FormLink>
+				<FormLink to="https://assets.misskey.io/theme/list" external>
+					<template #icon><i class="ti ti-world"></i></template>
+					{{ i18n.ts._theme.explore }}
+				</FormLink>
+				<FormLink to="/settings/theme/install">
+					<template #icon><i class="ti ti-download"></i></template>
+					{{ i18n.ts._theme.install }}
+				</FormLink>
+				<FormLink to="/theme-editor">
+					<template #icon><i class="ti ti-paint"></i></template>
+					{{ i18n.ts._theme.make }}
+				</FormLink>
+			</div>
+		</FormSection>
+
+		<MkButton v-if="wallpaper == null" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</MkButton>
+		<MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
 	</div>
-
-	<div class="selects">
-		<MkSelect v-model="lightThemeId" large class="select">
-			<template #label>{{ i18n.ts.themeForLightMode }}</template>
-			<template #prefix><i class="ti ti-sun"></i></template>
-			<option v-if="instanceLightTheme" :key="'instance:' + instanceLightTheme.id" :value="instanceLightTheme.id">{{ instanceLightTheme.name }}</option>
-			<optgroup v-if="installedLightThemes.length > 0" :label="i18n.ts._theme.installedThemes">
-				<option v-for="x in installedLightThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._theme.builtinThemes">
-				<option v-for="x in builtinLightThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-		</MkSelect>
-		<MkSelect v-model="darkThemeId" large class="select">
-			<template #label>{{ i18n.ts.themeForDarkMode }}</template>
-			<template #prefix><i class="ti ti-moon"></i></template>
-			<option v-if="instanceDarkTheme" :key="'instance:' + instanceDarkTheme.id" :value="instanceDarkTheme.id">{{ instanceDarkTheme.name }}</option>
-			<optgroup v-if="installedDarkThemes.length > 0" :label="i18n.ts._theme.installedThemes">
-				<option v-for="x in installedDarkThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._theme.builtinThemes">
-				<option v-for="x in builtinDarkThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-		</MkSelect>
-	</div>
-
-	<FormSection>
-		<div class="_formLinksGrid">
-			<FormLink to="/settings/theme/manage"><template #icon><i class="ti ti-tool"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
-			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="ti ti-world"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
-			<FormLink to="/settings/theme/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._theme.install }}</FormLink>
-			<FormLink to="/theme-editor"><template #icon><i class="ti ti-paint"></i></template>{{ i18n.ts._theme.make }}</FormLink>
-		</div>
-	</FormSection>
-
-	<MkButton v-if="wallpaper == null" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</MkButton>
-	<MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onActivated, ref, watch } from 'vue';
+import {computed, onActivated, ref, watch} from 'vue';
 import JSON5 from 'json5';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
 import MkButton from '@/components/MkButton.vue';
-import { getBuiltinThemesRef } from '@/scripts/theme';
-import { selectFile } from '@/scripts/select-file';
-import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { uniqueBy } from '@/scripts/array';
-import { fetchThemes, getThemes } from '@/theme-store';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { miLocalStorage } from '@/local-storage';
+import {getBuiltinThemesRef} from '@/scripts/theme';
+import {selectFile} from '@/scripts/select-file';
+import {isDeviceDarkmode} from '@/scripts/is-device-darkmode';
+import { ColdDeviceStorage, defaultStore , bannerDark,bannerLight} from '@/store';
+import {i18n} from '@/i18n';
+import {instance} from '@/instance';
+import {uniqueBy} from '@/scripts/array';
+import {fetchThemes, getThemes} from '@/theme-store';
+import {definePageMetadata} from '@/scripts/page-metadata';
+import {miLocalStorage} from '@/local-storage';
 
 const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
@@ -128,6 +145,15 @@ const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
 const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
 const wallpaper = ref(miLocalStorage.getItem('wallpaper'));
 const themesCount = installedThemes.value.length;
+watch(darkMode, () => {
+	if (darkMode.value) {
+		defaultStore.set('bannerUrl', bannerDark)
+	}else if(!darkMode.value) {
+    defaultStore.set('bannerUrl', bannerLight)
+	}else{
+    defaultStore.set('bannerUrl', bannerDark)
+  }
+})
 
 watch(syncDeviceDarkMode, () => {
 	if (syncDeviceDarkMode.value) {
@@ -237,9 +263,9 @@ definePageMetadata({
 			height: 50px - 6;
 			background-color: #FFCF96;
 			border-radius: 50px;
-			box-shadow: 0 2px 6px rgba(0,0,0,.3);
+			box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
 			transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
-			transform:  rotate(-45deg);
+			transform: rotate(-45deg);
 
 			.crater {
 				position: absolute;
@@ -315,7 +341,7 @@ definePageMetadata({
 			z-index: 0;
 			width: 2px;
 			height: 2px;
-			transform: translate3d(3px,0,0);
+			transform: translate3d(3px, 0, 0);
 		}
 
 		.star--5 {
@@ -324,7 +350,7 @@ definePageMetadata({
 			z-index: 0;
 			width: 3px;
 			height: 3px;
-			transform: translate3d(3px,0,0);
+			transform: translate3d(3px, 0, 0);
 		}
 
 		.star--6 {
@@ -333,7 +359,7 @@ definePageMetadata({
 			z-index: 0;
 			width: 2px;
 			height: 2px;
-			transform: translate3d(3px,0,0);
+			transform: translate3d(3px, 0, 0);
 		}
 
 		input:checked {
@@ -352,7 +378,9 @@ definePageMetadata({
 					background-color: #FFE5B5;
 					transform: translate3d(40px, 0, 0) rotate(0);
 
-					.crater { opacity: 1; }
+					.crater {
+						opacity: 1;
+					}
 				}
 
 				.star--1 {
@@ -376,7 +404,7 @@ definePageMetadata({
 				.star--5,
 				.star--6 {
 					opacity: 1;
-					transform: translate3d(0,0,0);
+					transform: translate3d(0, 0, 0);
 				}
 
 				.star--4 {
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 787a584f83..51f4d37754 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -40,6 +40,9 @@ export const noteActions: NoteAction[] = [];
 export const noteViewInterruptors: NoteViewInterruptor[] = [];
 export const notePostInterruptors: NotePostInterruptor[] = [];
 export const pageViewInterruptors: PageViewInterruptor[] = [];
+export const bannerDark='https://files.prismisskey.space/misskey/ac141052-7a16-4608-bc08-263566326a6d.jpg'
+export const bannerLight ='https://files.prismisskey.space/misskey/e8d13afc-2348-4b13-a64a-f55a19e8d7aa.jpg'
+
 
 // TODO: それぞれいちいちwhereとかdefaultというキーを付けなきゃいけないの冗長なのでなんとかする(ただ型定義が面倒になりそう)
 //       あと、現行の定義の仕方なら「whereが何であるかに関わらずキー名の重複不可」という制約を付けられるメリットもあるからそのメリットを引き継ぐ方法も考えないといけない
@@ -248,6 +251,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	bannerUrl:{
+		where: 'device',
+		default: bannerDark
+	},
 	instanceTicker: {
 		where: 'device',
 		default: 'remote' as 'none' | 'remote' | 'always',
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index f2783ebb77..4221d8781b 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.root">
 	<div :class="$style.top">
-		<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
+		<div :class="$style.banner" :style="{ backgroundImage: `url(${ bannerUrl })` }"></div>
 		<button class="_button" :class="$style.instance" @click="openInstanceMenu">
 			<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
 		</button>
@@ -46,15 +46,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, toRef } from 'vue';
+import {computed, defineAsyncComponent, ref, toRef, watch} from 'vue';
 import { openInstanceMenu } from './common';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
-import { defaultStore } from '@/store';
+import {bannerDark, bannerLight, defaultStore} from '@/store';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
+let bannerUrl = ref(defaultStore.state.bannerUrl);
 
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+watch(darkMode, () => {
+  if (darkMode.value){
+    bannerUrl.value = bannerDark;
+  }else{
+    bannerUrl.value = bannerLight;
+  }
+})
 const menu = toRef(defaultStore.state, 'menu');
 const otherMenuItemIndicated = computed(() => {
 	for (const def in navbarItemDef) {
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index d0162c8330..e711918e54 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -4,81 +4,106 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
-	<div :class="$style.body">
-		<div :class="$style.top">
-			<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
-			<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
-				<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
-			</button>
-		</div>
-		<div :class="$style.middle">
-			<MkA v-tooltip.noDelay.right="i18n.ts.timeline" :class="$style.item" :activeClass="$style.active" to="/" exact>
-				<i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.timeline }}</span>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" :class="$style.divider"></div>
-				<component
-					:is="navbarItemDef[item].to ? 'MkA' : 'button'"
-					v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
-					v-tooltip.noDelay.right="navbarItemDef[item].title"
-					class="_button"
-					:class="[$style.item, { [$style.active]: navbarItemDef[item].active }]"
-					:activeClass="$style.active"
-					:to="navbarItemDef[item].to"
-					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
-				>
-					<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
-					<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
-				</component>
-			</template>
-			<div :class="$style.divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item" :activeClass="$style.active" to="/admin">
-				<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
-			</MkA>
-			<button class="_button" :class="$style.item" @click="more">
-				<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
-			</button>
-			<MkA v-tooltip.noDelay.right="i18n.ts.settings" :class="$style.item" :activeClass="$style.active" to="/settings">
-				<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.settings }}</span>
-			</MkA>
-		</div>
-		<div :class="$style.bottom">
-			<button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form @click="os.post">
-				<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
-			</button>
-			<button v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="_button" :class="[$style.account]" @click="openAccountMenu">
-				<MkAvatar :user="$i" :class="$style.avatar"/><MkAcct class="_nowrap" :class="$style.acct" :user="$i"/>
-			</button>
-		</div>
-	</div>
-</div>
+  <div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
+    <div :class="$style.body">
+      <div :class="$style.top">
+        <div :class="$style.banner" :style="{ backgroundImage: `url(${ bannerUrl })` }"></div>
+        <button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance"
+                @click="openInstanceMenu">
+          <img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
+        </button>
+      </div>
+      <div :class="$style.middle">
+        <MkA v-tooltip.noDelay.right="i18n.ts.timeline" :class="$style.item" :activeClass="$style.active" to="/" exact>
+          <i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{
+            i18n.ts.timeline
+          }}</span>
+        </MkA>
+        <template v-for="item in menu">
+          <div v-if="item === '-'" :class="$style.divider"></div>
+          <component
+              :is="navbarItemDef[item].to ? 'MkA' : 'button'"
+              v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
+              v-tooltip.noDelay.right="navbarItemDef[item].title"
+              class="_button"
+              :class="[$style.item, { [$style.active]: navbarItemDef[item].active }]"
+              :activeClass="$style.active"
+              :to="navbarItemDef[item].to"
+              v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
+          >
+            <i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span
+              :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
+            <span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator"><i
+                class="_indicatorCircle"></i></span>
+          </component>
+        </template>
+        <div :class="$style.divider"></div>
+        <MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item"
+             :activeClass="$style.active" to="/admin">
+          <i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span
+            :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
+        </MkA>
+        <button class="_button" :class="$style.item" @click="more">
+          <i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{
+            i18n.ts.more
+          }}</span>
+          <span v-if="otherMenuItemIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
+        </button>
+        <MkA v-tooltip.noDelay.right="i18n.ts.settings" :class="$style.item" :activeClass="$style.active"
+             to="/settings">
+          <i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span
+            :class="$style.itemText">{{ i18n.ts.settings }}</span>
+        </MkA>
+      </div>
+      <div :class="$style.bottom">
+        <button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form
+                @click="os.post">
+          <i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{
+            i18n.ts.note
+          }}</span>
+        </button>
+        <button v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="_button"
+                :class="[$style.account]" @click="openAccountMenu">
+          <MkAvatar :user="$i" :class="$style.avatar"/>
+          <MkAcct class="_nowrap" :class="$style.acct" :user="$i"/>
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, watch } from 'vue';
-import { openInstanceMenu } from './common';
+import {computed, defineAsyncComponent, ref, watch} from 'vue';
+import {openInstanceMenu} from './common';
 import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
+import {navbarItemDef} from '@/navbar';
+import {$i, openAccountMenu as openAccountMenu_} from '@/account';
+import {bannerDark, bannerLight, defaultStore} from '@/store';
+import {i18n} from '@/i18n';
+import {instance} from '@/instance';
 
 const iconOnly = ref(false);
+let bannerUrl = ref(defaultStore.state.bannerUrl);
 
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+watch(darkMode, () => {
+  if (darkMode.value){
+    bannerUrl.value = bannerDark;
+  }else{
+    bannerUrl.value = bannerLight;
+  }
+})
 const menu = computed(() => defaultStore.state.menu);
 const otherMenuItemIndicated = computed(() => {
-	for (const def in navbarItemDef) {
-		if (menu.value.includes(def)) continue;
-		if (navbarItemDef[def].indicated) return true;
-	}
-	return false;
+  for (const def in navbarItemDef) {
+    if (menu.value.includes(def)) continue;
+    if (navbarItemDef[def].indicated) return true;
+  }
+  return false;
 });
 
 const calcViewState = () => {
-	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
+  iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
 };
 
 calcViewState();
@@ -86,393 +111,392 @@ calcViewState();
 window.addEventListener('resize', calcViewState);
 
 watch(defaultStore.reactiveState.menuDisplay, () => {
-	calcViewState();
+  calcViewState();
 });
 
 function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: true,
-	}, ev);
+  openAccountMenu_({
+    withExtraOperation: true,
+  }, ev);
 }
 
 function more(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-		src: ev.currentTarget ?? ev.target,
-	}, {
-	}, 'closed');
+  os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
+    src: ev.currentTarget ?? ev.target,
+  }, {}, 'closed');
 }
 </script>
 
 <style lang="scss" module>
 .root {
-	--nav-width: 250px;
-	--nav-icon-only-width: 72px;
+  --nav-width: 250px;
+  --nav-icon-only-width: 72px;
 
-	flex: 0 0 var(--nav-width);
-	width: var(--nav-width);
-	box-sizing: border-box;
+  flex: 0 0 var(--nav-width);
+  width: var(--nav-width);
+  box-sizing: border-box;
 }
 
 .body {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 1001;
-	width: var(--nav-icon-only-width);
-	height: 100dvh;
-	box-sizing: border-box;
-	overflow: auto;
-	overflow-x: clip;
-	overscroll-behavior: contain;
-	background: var(--navBg);
-	contain: strict;
-	display: flex;
-	flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  width: var(--nav-icon-only-width);
+  height: 100dvh;
+  box-sizing: border-box;
+  overflow: auto;
+  overflow-x: clip;
+  overscroll-behavior: contain;
+  background: var(--navBg);
+  contain: strict;
+  display: flex;
+  flex-direction: column;
 }
 
 .root:not(.iconOnly) {
-	.body {
-		width: var(--nav-width);
-	}
+  .body {
+    width: var(--nav-width);
+  }
 
-	.top {
-		position: sticky;
-		top: 0;
-		z-index: 1;
-		padding: 20px 0;
-		background: var(--X14);
-		-webkit-backdrop-filter: var(--blur, blur(8px));
-		backdrop-filter: var(--blur, blur(8px));
-	}
+  .top {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 20px 0;
+    background: var(--X14);
+    -webkit-backdrop-filter: var(--blur, blur(8px));
+    backdrop-filter: var(--blur, blur(8px));
+  }
 
-	.banner {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-size: cover;
-		background-position: center center;
-		-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-		mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-	}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center center;
+    -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.75) 100%);
+    mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.75) 100%);
+  }
 
-	.instance {
-		position: relative;
-		display: block;
-		text-align: center;
-		width: 100%;
-	}
+  .instance {
+    position: relative;
+    display: block;
+    text-align: center;
+    width: 100%;
+  }
 
-	.instanceIcon {
-		display: inline-block;
-		width: 38px;
-		aspect-ratio: 1;
-	}
+  .instanceIcon {
+    display: inline-block;
+    width: 38px;
+    aspect-ratio: 1;
+  }
 
-	.bottom {
-		position: sticky;
-		bottom: 0;
-		padding: 20px 0;
-		background: var(--X14);
-		-webkit-backdrop-filter: var(--blur, blur(8px));
-		backdrop-filter: var(--blur, blur(8px));
-	}
+  .bottom {
+    position: sticky;
+    bottom: 0;
+    padding: 20px 0;
+    background: var(--X14);
+    -webkit-backdrop-filter: var(--blur, blur(8px));
+    backdrop-filter: var(--blur, blur(8px));
+  }
 
-	.post {
-		position: relative;
-		display: block;
-		width: 100%;
-		height: 40px;
-		color: var(--fgOnAccent);
-		font-weight: bold;
-		text-align: left;
+  .post {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 40px;
+    color: var(--fgOnAccent);
+    font-weight: bold;
+    text-align: left;
 
-		&:before {
-			content: "";
-			display: block;
-			width: calc(100% - 38px);
-			height: 100%;
-			margin: auto;
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			border-radius: 999px;
-			background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-		}
+    &:before {
+      content: "";
+      display: block;
+      width: calc(100% - 38px);
+      height: 100%;
+      margin: auto;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 999px;
+      background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+    }
 
-		&:hover, &.active {
-			&:before {
-				background: var(--accentLighten);
-			}
-		}
-	}
+    &:hover, &.active {
+      &:before {
+        background: var(--accentLighten);
+      }
+    }
+  }
 
-	.postIcon {
-		position: relative;
-		margin-left: 30px;
-		margin-right: 8px;
-		width: 32px;
-	}
+  .postIcon {
+    position: relative;
+    margin-left: 30px;
+    margin-right: 8px;
+    width: 32px;
+  }
 
-	.postText {
-		position: relative;
-	}
+  .postText {
+    position: relative;
+  }
 
-	.account {
-		position: relative;
-		display: flex;
-		align-items: center;
-		padding-left: 30px;
-		width: 100%;
-		text-align: left;
-		box-sizing: border-box;
-		margin-top: 16px;
-	}
+  .account {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-left: 30px;
+    width: 100%;
+    text-align: left;
+    box-sizing: border-box;
+    margin-top: 16px;
+  }
 
-	.avatar {
-		display: block;
-		flex-shrink: 0;
-		position: relative;
-		width: 32px;
-		aspect-ratio: 1;
-		margin-right: 8px;
-	}
+  .avatar {
+    display: block;
+    flex-shrink: 0;
+    position: relative;
+    width: 32px;
+    aspect-ratio: 1;
+    margin-right: 8px;
+  }
 
-	.acct {
-		display: block;
-		flex-shrink: 1;
-		padding-right: 8px;
-	}
+  .acct {
+    display: block;
+    flex-shrink: 1;
+    padding-right: 8px;
+  }
 
-	.middle {
-		flex: 1;
-	}
+  .middle {
+    flex: 1;
+  }
 
-	.divider {
-		margin: 16px 16px;
-		border-top: solid 0.5px var(--divider);
-	}
+  .divider {
+    margin: 16px 16px;
+    border-top: solid 0.5px var(--divider);
+  }
 
-	.item {
-		position: relative;
-		display: block;
-		padding-left: 30px;
-		line-height: 2.85rem;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		width: 100%;
-		text-align: left;
-		box-sizing: border-box;
-		color: var(--navFg);
+  .item {
+    position: relative;
+    display: block;
+    padding-left: 30px;
+    line-height: 2.85rem;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+    text-align: left;
+    box-sizing: border-box;
+    color: var(--navFg);
 
-		&:hover {
-			text-decoration: none;
-			color: var(--navHoverFg);
-		}
+    &:hover {
+      text-decoration: none;
+      color: var(--navHoverFg);
+    }
 
-		&.active {
-			color: var(--navActive);
-		}
+    &.active {
+      color: var(--navActive);
+    }
 
-		&:hover, &.active {
-			color: var(--accent);
+    &:hover, &.active {
+      color: var(--accent);
 
-			&:before {
-				content: "";
-				display: block;
-				width: calc(100% - 34px);
-				height: 100%;
-				margin: auto;
-				position: absolute;
-				top: 0;
-				left: 0;
-				right: 0;
-				bottom: 0;
-				border-radius: 999px;
-				background: var(--accentedBg);
-			}
-		}
-	}
+      &:before {
+        content: "";
+        display: block;
+        width: calc(100% - 34px);
+        height: 100%;
+        margin: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 999px;
+        background: var(--accentedBg);
+      }
+    }
+  }
 
-	.itemIcon {
-		position: relative;
-		width: 32px;
-		margin-right: 8px;
-	}
+  .itemIcon {
+    position: relative;
+    width: 32px;
+    margin-right: 8px;
+  }
 
-	.itemIndicator {
-		position: absolute;
-		top: 0;
-		left: 20px;
-		color: var(--navIndicator);
-		font-size: 8px;
-		animation: blink 1s infinite;
-	}
+  .itemIndicator {
+    position: absolute;
+    top: 0;
+    left: 20px;
+    color: var(--navIndicator);
+    font-size: 8px;
+    animation: blink 1s infinite;
+  }
 
-	.itemText {
-		position: relative;
-		font-size: 0.9em;
-	}
+  .itemText {
+    position: relative;
+    font-size: 0.9em;
+  }
 }
 
 .root.iconOnly {
-	flex: 0 0 var(--nav-icon-only-width);
-	width: var(--nav-icon-only-width);
+  flex: 0 0 var(--nav-icon-only-width);
+  width: var(--nav-icon-only-width);
 
-	.body {
-		width: var(--nav-icon-only-width);
-	}
+  .body {
+    width: var(--nav-icon-only-width);
+  }
 
-	.top {
-		position: sticky;
-		top: 0;
-		z-index: 1;
-		padding: 20px 0;
-		background: var(--X14);
-		-webkit-backdrop-filter: var(--blur, blur(8px));
-		backdrop-filter: var(--blur, blur(8px));
-	}
+  .top {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 20px 0;
+    background: var(--X14);
+    -webkit-backdrop-filter: var(--blur, blur(8px));
+    backdrop-filter: var(--blur, blur(8px));
+  }
 
-	.instance {
-		display: block;
-		text-align: center;
-		width: 100%;
-	}
+  .instance {
+    display: block;
+    text-align: center;
+    width: 100%;
+  }
 
-	.instanceIcon {
-		display: inline-block;
-		width: 30px;
-		aspect-ratio: 1;
-	}
+  .instanceIcon {
+    display: inline-block;
+    width: 30px;
+    aspect-ratio: 1;
+  }
 
-	.bottom {
-		position: sticky;
-		bottom: 0;
-		padding: 20px 0;
-		background: var(--X14);
-		-webkit-backdrop-filter: var(--blur, blur(8px));
-		backdrop-filter: var(--blur, blur(8px));
-	}
+  .bottom {
+    position: sticky;
+    bottom: 0;
+    padding: 20px 0;
+    background: var(--X14);
+    -webkit-backdrop-filter: var(--blur, blur(8px));
+    backdrop-filter: var(--blur, blur(8px));
+  }
 
-	.post {
-		display: block;
-		position: relative;
-		width: 100%;
-		height: 52px;
-		margin-bottom: 16px;
-		text-align: center;
+  .post {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 52px;
+    margin-bottom: 16px;
+    text-align: center;
 
-		&: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%;
-			background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-		}
+    &: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%;
+      background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+    }
 
-		&:hover, &.active {
-			&:before {
-				background: var(--accentLighten);
-			}
-		}
-	}
+    &:hover, &.active {
+      &:before {
+        background: var(--accentLighten);
+      }
+    }
+  }
 
-	.postIcon {
-		position: relative;
-		color: var(--fgOnAccent);
-	}
+  .postIcon {
+    position: relative;
+    color: var(--fgOnAccent);
+  }
 
-	.postText {
-		display: none;
-	}
+  .postText {
+    display: none;
+  }
 
-	.account {
-		display: block;
-		text-align: center;
-		width: 100%;
-	}
+  .account {
+    display: block;
+    text-align: center;
+    width: 100%;
+  }
 
-	.avatar {
-		display: inline-block;
-		width: 38px;
-		aspect-ratio: 1;
-	}
+  .avatar {
+    display: inline-block;
+    width: 38px;
+    aspect-ratio: 1;
+  }
 
-	.acct {
-		display: none;
-	}
+  .acct {
+    display: none;
+  }
 
-	.middle {
-		flex: 1;
-	}
+  .middle {
+    flex: 1;
+  }
 
-	.divider {
-		margin: 8px auto;
-		width: calc(100% - 32px);
-		border-top: solid 0.5px var(--divider);
-	}
+  .divider {
+    margin: 8px auto;
+    width: calc(100% - 32px);
+    border-top: solid 0.5px var(--divider);
+  }
 
-	.item {
-		display: block;
-		position: relative;
-		padding: 18px 0;
-		width: 100%;
-		text-align: center;
+  .item {
+    display: block;
+    position: relative;
+    padding: 18px 0;
+    width: 100%;
+    text-align: center;
 
-		&:hover, &.active {
-			text-decoration: none;
-			color: var(--accent);
+    &:hover, &.active {
+      text-decoration: none;
+      color: var(--accent);
 
-			&:before {
-				content: "";
-				display: block;
-				height: 100%;
-				aspect-ratio: 1;
-				margin: auto;
-				position: absolute;
-				top: 0;
-				left: 0;
-				right: 0;
-				bottom: 0;
-				border-radius: 999px;
-				background: var(--accentedBg);
-			}
+      &:before {
+        content: "";
+        display: block;
+        height: 100%;
+        aspect-ratio: 1;
+        margin: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 999px;
+        background: var(--accentedBg);
+      }
 
-			> .icon,
-			> .text {
-				opacity: 1;
-			}
-		}
-	}
+      > .icon,
+      > .text {
+        opacity: 1;
+      }
+    }
+  }
 
-	.itemIcon {
-		display: block;
-		margin: 0 auto;
-		opacity: 0.7;
-	}
+  .itemIcon {
+    display: block;
+    margin: 0 auto;
+    opacity: 0.7;
+  }
 
-	.itemText {
-		display: none;
-	}
+  .itemText {
+    display: none;
+  }
 
-	.itemIndicator {
-		position: absolute;
-		top: 6px;
-		left: 24px;
-		color: var(--navIndicator);
-		font-size: 8px;
-		animation: blink 1s infinite;
-	}
+  .itemIndicator {
+    position: absolute;
+    top: 6px;
+    left: 24px;
+    color: var(--navIndicator);
+    font-size: 8px;
+    animation: blink 1s infinite;
+  }
 }
 </style>
diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.vue b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
index a7413d4b6a..2adeaaef59 100644
--- a/packages/frontend/src/widgets/WidgetInstanceInfo.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_panel">
-	<div :class="$style.container" :style="{ backgroundImage: instance.bannerUrl ? `url(${ instance.bannerUrl })` : null }">
+	<div :class="$style.container" :style="{ backgroundImage: instance.bannerUrl ? `url(${ bannerUrl })` : null }">
 		<div :class="$style.iconContainer">
 			<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.icon"/>
 		</div>
@@ -24,9 +24,20 @@ import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExp
 import { GetFormResultType } from '@/scripts/form';
 import { host } from '@/config';
 import { instance } from '@/instance';
+import {bannerDark, bannerLight, defaultStore} from "@/store";
+import {computed, ref, watch} from "vue";
 
 const name = 'instanceInfo';
+let bannerUrl = ref(defaultStore.state.bannerUrl);
 
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+watch(darkMode, () => {
+  if (darkMode.value){
+    bannerUrl.value = bannerDark;
+  }else{
+    bannerUrl.value = bannerLight;
+  }
+})
 const widgetPropsDef = {
 };