feat: prismisskey用に背景画像などを変更する

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;

packages/frontend/src/pages/settings/theme.vue

@@ -35,7 +35,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<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>
+				<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>
@@ -46,7 +48,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<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>
+				<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>
@@ -58,10 +62,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<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="/settings/theme/manage">
-			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="ti ti-world"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
+					<template #icon><i class="ti ti-tool"></i></template>
-			<FormLink to="/settings/theme/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._theme.install }}</FormLink>
+					{{ i18n.ts._theme.manage }}
-			<FormLink to="/theme-editor"><template #icon><i class="ti ti-paint"></i></template>{{ i18n.ts._theme.make }}</FormLink>
+					<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>
 
@@ -81,7 +98,7 @@ 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 { ColdDeviceStorage, defaultStore , bannerDark,bannerLight} from '@/store';
 import {i18n} from '@/i18n';
 import {instance} from '@/instance';
 import {uniqueBy} from '@/scripts/array';
@@ -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) {
@@ -352,7 +378,9 @@ definePageMetadata({
 					background-color: #FFE5B5;
 					transform: translate3d(40px, 0, 0) rotate(0);
 
-					.crater { opacity: 1; }
+					.crater {
+						opacity: 1;
+					}
 				}
 
 				.star--1 {

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',

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) {

packages/frontend/src/ui/_common_/navbar.vue

@@ -7,14 +7,17 @@ SPDX-License-Identifier: AGPL-3.0-only
   <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>
+        <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">
+        <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>
+          <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>
@@ -28,28 +31,41 @@ SPDX-License-Identifier: AGPL-3.0-only
               :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>
+            <i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span
-					<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></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">
+        <MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item"
-				<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
+             :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>
+          <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">
+        <MkA v-tooltip.noDelay.right="i18n.ts.settings" :class="$style.item" :activeClass="$style.active"
-				<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.settings }}</span>
+             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">
+        <button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form
-				<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
+                @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">
+        <button v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="_button"
-				<MkAvatar :user="$i" :class="$style.avatar"/><MkAcct class="_nowrap" :class="$style.acct" :user="$i"/>
+                :class="[$style.account]" @click="openAccountMenu">
+          <MkAvatar :user="$i" :class="$style.avatar"/>
+          <MkAcct class="_nowrap" :class="$style.acct" :user="$i"/>
         </button>
       </div>
     </div>
@@ -62,12 +78,21 @@ 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';
 
 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) {
@@ -98,8 +123,7 @@ function openAccountMenu(ev: MouseEvent) {
 function more(ev: MouseEvent) {
   os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
     src: ev.currentTarget ?? ev.target,
-	}, {
+  }, {}, 'closed');
-	}, 'closed');
 }
 </script>
 

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 = {
 };