usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
kakkokari-gtyih 2025-05-09 21:08:30 +09:00
parent e00cc789eb
commit f88f0a157f
2 changed files with 22 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/frontend/src/components/MkInstanceTicker.impl.ts
View File

@ -1,36 +0,0 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import tinycolor from 'tinycolor2';
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;
const tickerColorsCache = new Map<string, ITickerColors>();
export const getTickerColors = (bgHex: string): ITickerColors => {
const cachedTickerColors = tickerColorsCache.get(bgHex);
if (cachedTickerColors != null) return cachedTickerColors;
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;
const tickerColors = {
fg: fgHex,
bg: bgHex,
} as const satisfies ITickerColors;
tickerColorsCache.set(tinycolorInstance.toHex(), tickerColors);
return tickerColors;
};

23
packages/frontend/src/components/MkInstanceTicker.vue
View File

@ -12,11 +12,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue'; import { computed } from 'vue';
import tinycolor from 'tinycolor2';
import { instanceName as localInstanceName } from '@@/js/config.js'; import { instanceName as localInstanceName } from '@@/js/config.js';
import type { CSSProperties } from 'vue'; import type { CSSProperties } from 'vue';
import { instance as localInstance } from '@/instance.js'; import { instance as localInstance } from '@/instance.js';
import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js'; import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
import { getTickerColors } from '@/components/MkInstanceTicker.impl.js';
const props = defineProps<{ const props = defineProps<{
host: string | null; host: string | null;
@ -44,6 +44,27 @@ const faviconUrl = computed(() => {
return getProxiedImageUrlNullable(imageSrc); 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 themeColorStyle = computed<CSSProperties>(() => {
const themeColor = (props.host == null ? localInstance.themeColor : props.instance?.themeColor) ?? '#777777'; const themeColor = (props.host == null ? localInstance.themeColor : props.instance?.themeColor) ?? '#777777';
const colors = getTickerColors(themeColor); const colors = getTickerColors(themeColor);