feat: インスタンスのテーマカラーを設定できるように

CHANGELOG.md

@@ -10,6 +10,15 @@
 You should also include the user name that made the change.
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+- インスタンスのテーマカラーを設定できるように @syuilo
+
+### Bugfixes
+- 
+
+
 ## 12.104.0 (2022/02/09)
 
 ### Note

locales/ja-JP.yml

@@ -828,6 +828,7 @@ overridedDeviceKind: "デバイスタイプ"
 smartphone: "スマートフォン"
 tablet: "タブレット"
 auto: "自動"
+themeColor: "テーマカラー"
 
 _emailUnavailable:
   used: "既に使用されています"

packages/backend/migration/1644395759931-instance-theme-color.js

@@ -0,0 +1,13 @@
+const { MigrationInterface, QueryRunner } = require("typeorm");
+
+module.exports = class instanceThemeColor1644395759931 {
+    name = 'instanceThemeColor1644395759931'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" ADD "themeColor" character varying(512)`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "themeColor"`);
+    }
+}

packages/backend/src/models/entities/meta.ts

@@ -88,6 +88,12 @@ export class Meta {
 	})
 	public pinnedClipId: Clip['id'] | null;
 
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public themeColor: string | null;
+
 	@Column('varchar', {
 		length: 512,
 		nullable: true,

packages/backend/src/server/api/endpoints/admin/update-meta.ts

@@ -41,6 +41,10 @@ export const meta = {
 			validator: $.optional.nullable.arr($.str),
 		},
 
+		themeColor: {
+			validator: $.optional.nullable.str,
+		},
+
 		mascotImageUrl: {
 			validator: $.optional.nullable.str,
 		},
@@ -331,6 +335,10 @@ export default define(meta, async (ps, me) => {
 		set.blockedHosts = ps.blockedHosts.filter(Boolean);
 	}
 
+	if (ps.themeColor !== undefined) {
+		set.themeColor = ps.themeColor;
+	}
+
 	if (ps.mascotImageUrl !== undefined) {
 		set.mascotImageUrl = ps.mascotImageUrl;
 	}

packages/backend/src/server/api/endpoints/meta.ts

@@ -499,6 +499,7 @@ export default define(meta, async (ps, me) => {
 		enableRecaptcha: instance.enableRecaptcha,
 		recaptchaSiteKey: instance.recaptchaSiteKey,
 		swPublickey: instance.swPublicKey,
+		themeColor: instance.themeColor,
 		mascotImageUrl: instance.mascotImageUrl,
 		bannerUrl: instance.bannerUrl,
 		errorImageUrl: instance.errorImageUrl,

packages/backend/src/server/web/index.ts

@@ -200,6 +200,7 @@ router.get(['/@:user', '/@:user/:sub'], async (ctx, next) => {
 			sub: ctx.params.sub,
 			instanceName: meta.name || 'Misskey',
 			icon: meta.iconUrl,
+			themeColor: meta.themeColor,
 		});
 		ctx.set('Cache-Control', 'public, max-age=30');
 	} else {
@@ -239,6 +240,7 @@ router.get('/notes/:note', async (ctx, next) => {
 			summary: getNoteSummary(_note),
 			instanceName: meta.name || 'Misskey',
 			icon: meta.iconUrl,
+			themeColor: meta.themeColor,
 		});
 
 		if (['public', 'home'].includes(note.visibility)) {
@@ -277,6 +279,7 @@ router.get('/@:user/pages/:page', async (ctx, next) => {
 			profile,
 			instanceName: meta.name || 'Misskey',
 			icon: meta.iconUrl,
+			themeColor: meta.themeColor,
 		});
 
 		if (['public'].includes(page.visibility)) {
@@ -307,6 +310,7 @@ router.get('/clips/:clip', async (ctx, next) => {
 			profile,
 			instanceName: meta.name || 'Misskey',
 			icon: meta.iconUrl,
+			themeColor: meta.themeColor,
 		});
 
 		ctx.set('Cache-Control', 'public, max-age=180');
@@ -330,6 +334,7 @@ router.get('/gallery/:post', async (ctx, next) => {
 			profile,
 			instanceName: meta.name || 'Misskey',
 			icon: meta.iconUrl,
+			themeColor: meta.themeColor,
 		});
 
 		ctx.set('Cache-Control', 'public, max-age=180');
@@ -353,6 +358,7 @@ router.get('/channels/:channel', async (ctx, next) => {
 			channel: _channel,
 			instanceName: meta.name || 'Misskey',
 			icon: meta.iconUrl,
+			themeColor: meta.themeColor,
 		});
 
 		ctx.set('Cache-Control', 'public, max-age=180');
@@ -412,6 +418,7 @@ router.get('(.*)', async ctx => {
 		instanceName: meta.name || 'Misskey',
 		desc: meta.description,
 		icon: meta.iconUrl,
+		themeColor: meta.themeColor,
 	});
 	ctx.set('Cache-Control', 'public, max-age=300');
 });

packages/backend/src/server/web/manifest.ts

@@ -9,6 +9,7 @@ module.exports = async (ctx: Koa.Context) => {
 
 	json.short_name = instance.name || 'Misskey';
 	json.name = instance.name || 'Misskey';
+	if (instance.themeColor) json.theme_color = instance.themeColor;
 
 	ctx.set('Cache-Control', 'max-age=300');
 	ctx.body = json;

packages/backend/src/server/web/views/base.pug

@@ -19,8 +19,8 @@ html
 		meta(charset='utf-8')
 		meta(name='application-name' content='Misskey')
 		meta(name='referrer' content='origin')
-		meta(name='theme-color' content='#86b300')
-		meta(name='theme-color-orig' content='#86b300')
+		meta(name='theme-color' content= themeColor || '#86b300')
+		meta(name='theme-color-orig' content= themeColor || '#86b300')
 		meta(property='twitter:card' content='summary')
 		meta(property='og:site_name' content= instanceName || 'Misskey')
 		meta(name='viewport' content='width=device-width, initial-scale=1')

packages/client/src/pages/admin/settings.vue

@@ -25,6 +25,12 @@
 				<template #label>{{ $ts.backgroundImageUrl }}</template>
 			</FormInput>
 
+			<FormInput v-model="themeColor" class="_formBlock">
+				<template #prefix><i class="fas fa-palette"></i></template>
+				<template #label>{{ $ts.themeColor }}</template>
+				<template #caption>#RRGGBB</template>
+			</FormInput>
+
 			<FormInput v-model="tosUrl" class="_formBlock">
 				<template #prefix><i class="fas fa-link"></i></template>
 				<template #label>{{ $ts.tosUrl }}</template>
@@ -179,6 +185,7 @@ export default defineComponent({
 			iconUrl: null,
 			bannerUrl: null,
 			backgroundImageUrl: null,
+			themeColor: null,
 			maxNoteTextLength: 0,
 			enableLocalTimeline: false,
 			enableGlobalTimeline: false,
@@ -206,6 +213,7 @@ export default defineComponent({
 			this.iconUrl = meta.iconUrl;
 			this.bannerUrl = meta.bannerUrl;
 			this.backgroundImageUrl = meta.backgroundImageUrl;
+			this.themeColor = meta.themeColor;
 			this.maintainerName = meta.maintainerName;
 			this.maintainerEmail = meta.maintainerEmail;
 			this.maxNoteTextLength = meta.maxNoteTextLength;
@@ -233,6 +241,7 @@ export default defineComponent({
 				iconUrl: this.iconUrl,
 				bannerUrl: this.bannerUrl,
 				backgroundImageUrl: this.backgroundImageUrl,
+				themeColor: this.themeColor === '' ? null : this.themeColor,
 				maintainerName: this.maintainerName,
 				maintainerEmail: this.maintainerEmail,
 				maxNoteTextLength: this.maxNoteTextLength,