diff --git a/packages/frontend/src/components/MkThemePreview.vue b/packages/frontend/src/components/MkThemePreview.vue index fb5e2b6571..013ab9d6a4 100644 --- a/packages/frontend/src/components/MkThemePreview.vue +++ b/packages/frontend/src/components/MkThemePreview.vue @@ -12,11 +12,13 @@ SPDX-License-Identifier: AGPL-3.0-only - - - - - + + + + + + + @@ -53,14 +55,23 @@ const themeVariables = ref<{ bg: string; panel: string; fg: string; + mention: string; + hashtag: string; + link: string; divider: string; accent: string; accentedBg: string; navBg: string; + success: string; + warn: string; + error: string; }>({ bg: 'var(--MI_THEME-bg)', panel: 'var(--MI_THEME-panel)', fg: 'var(--MI_THEME-fg)', + mention: 'var(--MI_THEME-mention)', + hashtag: 'var(--MI_THEME-hashtag)', + link: 'var(--MI_THEME-link)', divider: 'var(--MI_THEME-divider)', accent: 'var(--MI_THEME-accent)', accentedBg: 'var(--MI_THEME-accentedBg)', @@ -86,6 +97,9 @@ watch(() => props.theme, (theme) => { bg: compiled.bg ?? 'var(--MI_THEME-bg)', panel: compiled.panel ?? 'var(--MI_THEME-panel)', fg: compiled.fg ?? 'var(--MI_THEME-fg)', + mention: compiled.mention ?? 'var(--MI_THEME-mention)', + hashtag: compiled.hashtag ?? 'var(--MI_THEME-hashtag)', + link: compiled.link ?? 'var(--MI_THEME-link)', divider: compiled.divider ?? 'var(--MI_THEME-divider)', accent: compiled.accent ?? 'var(--MI_THEME-accent)', accentedBg: compiled.accentedBg ?? 'var(--MI_THEME-accentedBg)',