mirrors/hermes-agent
1
0
Fork 0
mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-06-23 10:42:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

style(desktop): soften dark-mode syntax highlighting

Browse source 
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.
This commit is contained in:
Brooklyn Nicholson 2026-06-22 05:16:18 -05:00
parent ac128af1ce
commit 61c266b0dc
3 changed files with 13 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/desktop/src/components/chat/diff-lines.tsx
View file

@ -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 {

5
apps/desktop/src/components/chat/shiki-highlighter.tsx
View file

@ -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

8
apps/desktop/src/styles.css
View file

@ -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