enhance(frontend): Instance Tickerのデザイン改善 (#15946)

* feat(tms): インスタンス情報の表示位置 (taiyme#198)

* migrate

* fix(InstanceTicker): リモートサーバーのアイコンが初期画像になる問題 (taiyme#211)

* refactor(InstanceTicker): 参照の構造を変更

Co-Authored-By: taiy <53635909+taiyme@users.noreply.github.com>

* perf(TmsInstanceTicker): color関数に変更 (taiyme#283)

* :art:

* Update Changelog

* remove unused property

* revert unrelated changes

* fix

* 実装を簡略化

* :art:

* Update CHANGELOG.md

* 色の計算をコンポーネント内に移動

---------

Co-authored-by: taiy <53635909+taiyme@users.noreply.github.com>

1 files changed, 25 insertions, 2 deletions

diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
index 380fb7b2d8..62ff806096 100644
--- a/packages/frontend/src/components/MkInstanceTicker.vue
+++ b/packages/frontend/src/components/MkInstanceTicker.vue
@@ -12,6 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import tinycolor from 'tinycolor2';
 import { instanceName as localInstanceName } from '@@/js/config.js';
 import type { CSSProperties } from 'vue';
 import { instance as localInstance } from '@/instance.js';
@@ -43,10 +44,33 @@ const faviconUrl = computed(() => {
 	return getProxiedImageUrlNullable(imageSrc);
 });
 
+type ITickerColors = {
+	readonly bg: string;
+	readonly fg: string;
+};
+
+const TICKER_YUV_THRESHOLD = 191 as const;
+const TICKER_FG_COLOR_LIGHT = '#ffffff' as const;
+const TICKER_FG_COLOR_DARK = '#2f2f2fcc' as const;
+
+function getTickerColors(bgHex: string): ITickerColors {
+	const tinycolorInstance = tinycolor(bgHex);
+	const { r, g, b } = tinycolorInstance.toRgb();
+	const yuv = 0.299 * r + 0.587 * g + 0.114 * b;
+	const fgHex = yuv > TICKER_YUV_THRESHOLD ? TICKER_FG_COLOR_DARK : TICKER_FG_COLOR_LIGHT;
+
+	return {
+		fg: fgHex,
+		bg: bgHex,
+	} as const satisfies ITickerColors;
+}
+
 const themeColorStyle = computed<CSSProperties>(() => {
 	const themeColor = (props.host == null ? localInstance.themeColor : props.instance?.themeColor) ?? '#777777';
+	const colors = getTickerColors(themeColor);
 	return {
-		background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
+		background: `linear-gradient(90deg, ${colors.bg}, ${colors.bg}00)`,
+		color: colors.fg,
 	};
 });
 </script>
@@ -60,7 +84,6 @@ $height: 2ex;
 	height: $height;
 	border-radius: 4px 0 0 4px;
 	overflow: clip;
-	color: #fff;
 
 	// text-shadowは重いから使うな