From 0bc616ecf9f16f48b7a3ec87497614b90e83254e Mon Sep 17 00:00:00 2001
From: brooklyn! <brooklyn.bb.nicholson@gmail.com>
Date: Sun, 31 May 2026 23:21:58 -0500
Subject: [PATCH] fix(desktop): darken light-mode code comment color for
 legibility (#36234)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shiki's github-light-default colors comments #6e7781 (~4.2:1 on the code
card background), which is borderline unreadable at the 11px code font
size — and worst for shell snippets, where a single `#` turns the rest
of the line into one long comment span. Remap light-mode comments to
GitHub's darker muted gray (#57606a, ~6.4:1) via per-theme
colorReplacements. Dark mode (~6.1:1) reads fine and is left untouched.
---
 .../src/components/chat/shiki-highlighter.tsx       | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/apps/desktop/src/components/chat/shiki-highlighter.tsx b/apps/desktop/src/components/chat/shiki-highlighter.tsx
index a0088e9ee..b015949ae 100644
--- a/apps/desktop/src/components/chat/shiki-highlighter.tsx
+++ b/apps/desktop/src/components/chat/shiki-highlighter.tsx
@@ -30,6 +30,18 @@ interface HermesSyntaxHighlighterProps extends SyntaxHighlighterProps {
 
 const SHIKI_THEME = { dark: 'github-dark-default', light: 'github-light-default' } as const
 
+/**
+ * `github-light-default` colors comments `#6e7781` (~4.2:1 against the code
+ * card background) — borderline unreadable at our 11px code size, and worst of
+ * all for shell snippets where a single `#` turns the rest of the line into one
+ * long comment span. Remap light-mode comments to GitHub's darker muted gray
+ * (`#57606a`, ~6.4:1). Dark mode (`#8b949e`, ~6.1:1) already reads fine, so we
+ * leave it untouched. Keyed per theme name so the bump only applies in light.
+ */
+const SHIKI_COLOR_REPLACEMENTS: Record<string, Record<string, string>> = {
+  'github-light-default': { '#6e7781': '#57606a' }
+}
+
 export const SyntaxHighlighter: FC<HermesSyntaxHighlighterProps> = ({
   components: { Pre },
   language,
@@ -76,6 +88,7 @@ export const SyntaxHighlighter: FC<HermesSyntaxHighlighterProps> = ({
             <ShikiHighlighter
               addDefaultStyles={false}
               as="div"
+              colorReplacements={SHIKI_COLOR_REPLACEMENTS}
               defaultColor="light-dark()"
               delay={120}
               language={language || 'text'}