From 61c266b0dc75562a97dc0a377a7dc141d0b0a5ac Mon Sep 17 00:00:00 2001 From: Brooklyn Nicholson Date: Mon, 22 Jun 2026 05:16:18 -0500 Subject: [PATCH] style(desktop): soften dark-mode syntax highlighting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Share one SHIKI_THEME (github-dark-dimmed) across code blocks and inline diffs so they can't drift, and pull token saturation/brightness back via a `.shiki` dark-mode filter. The dimmed theme alone only changes the background — which both surfaces strip — so the bright foregrounds needed the filter to actually calm down. --- apps/desktop/src/components/chat/diff-lines.tsx | 4 +--- apps/desktop/src/components/chat/shiki-highlighter.tsx | 5 ++++- apps/desktop/src/styles.css | 8 ++++++++ 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/apps/desktop/src/components/chat/diff-lines.tsx b/apps/desktop/src/components/chat/diff-lines.tsx index fefc8024475..767e6029c6e 100644 --- a/apps/desktop/src/components/chat/diff-lines.tsx +++ b/apps/desktop/src/components/chat/diff-lines.tsx @@ -5,7 +5,7 @@ import * as React from 'react' import { useShikiHighlighter } from 'react-shiki' import type { ShikiTransformer } from 'shiki' -import { exceedsHighlightBudget } from '@/components/chat/shiki-highlighter' +import { exceedsHighlightBudget, SHIKI_THEME } from '@/components/chat/shiki-highlighter' import { shikiLanguageForFilename } from '@/lib/markdown-code' import { cn } from '@/lib/utils' @@ -18,8 +18,6 @@ import { cn } from '@/lib/utils' * Both drop git file-headers + `@@` hunk noise and the `+/-` gutter so changes * read by color + a 2px gutter accent, the way Cursor does. */ -const SHIKI_THEME = { dark: 'github-dark-default', light: 'github-light-default' } as const - type DiffKind = 'add' | 'context' | 'remove' interface DiffLine { diff --git a/apps/desktop/src/components/chat/shiki-highlighter.tsx b/apps/desktop/src/components/chat/shiki-highlighter.tsx index 5a047a62657..b984e60f3c8 100644 --- a/apps/desktop/src/components/chat/shiki-highlighter.tsx +++ b/apps/desktop/src/components/chat/shiki-highlighter.tsx @@ -30,7 +30,10 @@ interface HermesSyntaxHighlighterProps extends SyntaxHighlighterProps { defer?: boolean } -const SHIKI_THEME = { dark: 'github-dark-default', light: 'github-light-default' } as const +// `github-dark-dimmed` is GitHub's lower-contrast dark palette — the vivid +// `github-dark-default` tokens read harsh at our small code size. Shared by the +// inline diff renderer too (see diff-lines.tsx) so code + diffs match. +export const SHIKI_THEME = { dark: 'github-dark-dimmed', light: 'github-light-default' } as const /** * `github-light-default` colors comments `#6e7781` (~4.2:1 against the code diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css index 4ddc226b305..9487b636dfb 100644 --- a/apps/desktop/src/styles.css +++ b/apps/desktop/src/styles.css @@ -1253,6 +1253,14 @@ canvas { display: grid; } +/* The github-dark token palette reads candy-bright at our small code size. + `github-dark-dimmed` only dims the *background* (which we strip), so soften + the token *foregrounds* directly — a small saturation + brightness pullback, + hues preserved — for both code blocks and inline diffs. Dark mode only. */ +.dark .shiki { + filter: saturate(0.82) brightness(0.92); +} + /* File edits (write_file / edit_file / patch) are the deliverable, not scaffolding — the diff is what the user reviews, like a PR. An *expanded* edit stays at full strength; collapsed it fades like any other row. The