From 357180586dfb140deed605ee8434d6f7161ada6b Mon Sep 17 00:00:00 2001
From: Akanksha Trehun <akankshatrehun@gmail.com>
Date: Sat, 4 Jul 2026 00:06:40 +0530
Subject: [PATCH] fix(app): render code blocks with theme-aware Shiki palette

Code blocks in assistant messages were highlighted with a hardcoded
github-light theme, making tokens unreadable in dark mode. Emit both
palettes via Shiki's dual-theme CSS variables and switch to github-dark
when the app theme is dark.

Fixes #2440
---
 apps/app/src/app/index.css                          | 13 +++++++++++++
 apps/app/src/components/markdown/markdown.tsx       |  3 ++-
 .../react-app/domains/session/surface/markdown.tsx  |  3 ++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/app/index.css b/apps/app/src/app/index.css
index 53af3866c1..d4e4718c54 100644
--- a/apps/app/src/app/index.css
+++ b/apps/app/src/app/index.css
@@ -439,6 +439,19 @@ select:disabled {
   --sidebar-ring: var(--slate-8);
 }
 
+/* Shiki emits both palettes as CSS variables (themes option in markdown.tsx);
+   swap token colors to the dark palette when the app theme is dark. */
+.dark .shiki,
+.dark .shiki span,
+[data-theme="dark"] .shiki,
+[data-theme="dark"] .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
 @theme inline {
   --font-sans: 'Geist Variable', sans-serif;
   --font-heading: 'IBM Plex Sans Variable', sans-serif;
diff --git a/apps/app/src/components/markdown/markdown.tsx b/apps/app/src/components/markdown/markdown.tsx
index 6aa9e55505..555fd1da62 100644
--- a/apps/app/src/components/markdown/markdown.tsx
+++ b/apps/app/src/components/markdown/markdown.tsx
@@ -340,7 +340,8 @@ const highlightedMarkdownParser = new Marked({
       return codeToHtml(code, {
         lang: language,
         meta: { __raw: props.join(" ") },
-        theme: "github-light",
+        themes: { light: "github-light", dark: "github-dark" },
+        defaultColor: "light",
         transformers: [
           transformerNotationDiff({ matchAlgorithm: "v3" }),
           transformerNotationHighlight({ matchAlgorithm: "v3" }),
diff --git a/apps/app/src/react-app/domains/session/surface/markdown.tsx b/apps/app/src/react-app/domains/session/surface/markdown.tsx
index a79308218c..1c2e898f18 100644
--- a/apps/app/src/react-app/domains/session/surface/markdown.tsx
+++ b/apps/app/src/react-app/domains/session/surface/markdown.tsx
@@ -175,7 +175,8 @@ const highlightedMarkdownParser = new Marked<string, string>({
       return codeToHtml(code, {
         lang: language,
         meta: { __raw: props.join(" ") },
-        theme: "github-light",
+        themes: { light: "github-light", dark: "github-dark" },
+        defaultColor: "light",
         transformers: [
           transformerNotationDiff({ matchAlgorithm: "v3" }),
           transformerNotationHighlight({ matchAlgorithm: "v3" }),