From 52ca7b2d42d62dc0d1a11984378c5eb2ed127f51 Mon Sep 17 00:00:00 2001
From: s3d-i <bing@sed-i.org>
Date: Fri, 31 Oct 2025 19:55:02 +0800
Subject: [PATCH] fix(stage-tamagotchi): inconsistency font size & shiki dark
 theme (#692)

---
 .../src/renderer/components/ChatHistory.vue        |  5 +++--
 .../src/components/markdown/MarkdownRenderer.vue   | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/stage-tamagotchi/src/renderer/components/ChatHistory.vue b/apps/stage-tamagotchi/src/renderer/components/ChatHistory.vue
index 278f309ea..57915eabf 100644
--- a/apps/stage-tamagotchi/src/renderer/components/ChatHistory.vue
+++ b/apps/stage-tamagotchi/src/renderer/components/ChatHistory.vue
@@ -98,6 +98,7 @@ onTokenLiteral(async () => {
               <MarkdownRenderer
                 v-else
                 :content="slice.text"
+                text="base <sm:xs"
               />
             </div>
           </div>
@@ -136,7 +137,7 @@ onTokenLiteral(async () => {
           <!-- Prefer presentation slices if available; fallback to normal streaming -->
           <template v-if="presentSlices.length > 0">
             <div v-for="(text, idx) in presentSlices" :key="`present-${idx}`">
-              <MarkdownRenderer :content="text" />
+              <MarkdownRenderer :content="text" text="base <sm:xs" />
             </div>
           </template>
           <template v-else>
@@ -147,7 +148,7 @@ onTokenLiteral(async () => {
                 </div>
               </div>
               <div v-else-if="slice.type === 'tool-call-result'" />
-              <MarkdownRenderer v-else :content="slice.text" />
+              <MarkdownRenderer v-else :content="slice.text" text="base <sm:xs" />
             </div>
           </template>
         </div>
diff --git a/packages/stage-ui/src/components/markdown/MarkdownRenderer.vue b/packages/stage-ui/src/components/markdown/MarkdownRenderer.vue
index 890e15ab0..ffa145568 100644
--- a/packages/stage-ui/src/components/markdown/MarkdownRenderer.vue
+++ b/packages/stage-ui/src/components/markdown/MarkdownRenderer.vue
@@ -88,4 +88,18 @@ onMounted(() => {
   background: #161b22;
   border: 1px solid #30363d;
 }
+
+/* Force Shiki multi-theme output to follow our dark mode */
+.dark .markdown-content :deep(.shiki) {
+  background: var(--shiki-dark-bg, #0d1117) !important;
+  color: var(--shiki-dark, #e6edf3) !important;
+}
+
+.dark .markdown-content :deep(.shiki span[style*="--shiki-dark"]) {
+  color: var(--shiki-dark, inherit) !important;
+}
+
+.dark .markdown-content :deep(.shiki span[style*="--shiki-dark-background"]) {
+  background-color: var(--shiki-dark-background, var(--shiki-dark-bg, transparent)) !important;
+}
 </style>