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)',