option to prefer softwareColor on ticker

locales/en-US.yml

@@ -877,6 +877,7 @@ deleteAccountConfirm: "Are you sure that you want to delete this account?"
 createdAt: "Created at"
 invitationRequiredToRegister: "This server is currently invitation only. Only those with an invitation code can register."
 themeColor: "Theme Color"
+preferTickerSoftwareColor: "Prefer Software Color on instance ticker"
 
 _template:
   edit: "Edit Template..."

locales/ja-JP.yml

@@ -917,6 +917,7 @@ leaveGroup: "グループから抜ける"
 leaveGroupConfirm: "「{name}」から抜けますか？"
 notSpecifiedMentionWarning: "宛先に含まれていないメンションがあります"
 themeColor: "テーマカラー"
+preferTickerSoftwareColor: "インスタンスティッカーにソフトウェアカラーを採用して表示する"
 
 _template:
   edit: "定型文を編集…"

src/client/components/instance-ticker.vue

@@ -7,7 +7,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { instanceName } from '@/config';
+import { instanceName, software } from '@/config';
+import { defaultStore } from '@/store';
 
 export default defineComponent({
 	props: {
@@ -22,7 +23,8 @@ export default defineComponent({
 			info: this.instance || {
 				faviconUrl: '/favicon.ico',
 				name: instanceName,
-				themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
+				themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content,
+				softwareName: software,
 			}
 		}
 	},
@@ -62,7 +64,13 @@ export default defineComponent({
 	      default:
 	        softwareColor = '#777777';
     	}
-			const themeColor = this.info.themeColor || softwareColor;
+			const preferSoftwareColor = this.$store.reactiveState.preferTickerSoftwareColor.value;
+			let themeColor = '';
+			if (preferSoftwareColor) {
+				themeColor = softwareColor;
+			} else {
+				themeColor = this.info.themeColor || softwareColor;
+			}
 			return {
 				background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`
 			};

src/client/config.ts

@@ -10,6 +10,7 @@ export const lang = localStorage.getItem('lang');
 export const langs = _LANGS_;
 export const locale = JSON.parse(localStorage.getItem('locale'));
 export const version = _VERSION_;
+export const software = _SOFTWARE_;
 export const instanceName = siteName === 'Groundpolis' ? host : siteName;
 export const ui = localStorage.getItem('ui');
 export const debug = localStorage.getItem('debug') === 'true';

src/client/pages/settings/general.vue

@@ -74,12 +74,15 @@
 		<option value="veryLarge"><span style="font-size: 20px;">Aa</span></option>
 	</FormRadios>
 
-	<FormSelect v-model:value="instanceTicker">
-		<template #label>{{ $ts.instanceTicker }}</template>
-		<option value="none">{{ $ts._instanceTicker.none }}</option>
-		<option value="remote">{{ $ts._instanceTicker.remote }}</option>
-		<option value="always">{{ $ts._instanceTicker.always }}</option>
-	</FormSelect>
+	<FormGroup>
+		<FormSelect v-model:value="instanceTicker">
+			<template #label>{{ $ts.instanceTicker }}</template>
+			<option value="none">{{ $ts._instanceTicker.none }}</option>
+			<option value="remote">{{ $ts._instanceTicker.remote }}</option>
+			<option value="always">{{ $ts._instanceTicker.always }}</option>
+		</FormSelect>
+		<FormSwitch v-model:value="preferTickerSoftwareColor">{{ $ts.preferTickerSoftwareColor }}</FormSwitch>
+	</FormGroup>
 
 	<FormSelect v-model:value="nsfw">
 		<template #label>{{ $ts.nsfw }}</template>
@@ -228,6 +231,7 @@ export default defineComponent({
 		showVoteConfirm: defaultStore.makeGetterSetter('showVoteConfirm'),
 		aiChanMode: defaultStore.makeGetterSetter('aiChanMode'),
 		renoteButtonMode: defaultStore.makeGetterSetter('renoteButtonMode'),
+		preferTickerSoftwareColor: defaultStore.makeGetterSetter('preferTickerSoftwareColor'),
 	},
 
 	watch: {

src/client/store.ts

@@ -393,6 +393,11 @@ export const defaultStore = markRaw(new Storage('base', {
 		default: false
 	},
 
+	preferTickerSoftwareColor: {
+		where: 'device',
+		default: false
+	},
+
 	//#endregion
 }));
 

webpack.config.ts

@@ -141,6 +141,7 @@ module.exports = {
 			_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify('mk_deck_column'),
 			__VUE_OPTIONS_API__: true,
 			__VUE_PROD_DEVTOOLS__: false,
+			_SOFTWARE_: JSON.stringify(meta.name),
 		}),
 		new VueLoaderPlugin(),
 		new WebpackOnBuildPlugin((stats: any) => {