Skip to content

fix(webapp): shared-page inline code reads as code in dark mode (BEA-90) - #134

Open
ssowonny wants to merge 1 commit into
mainfrom
bea-90-inline-code-markup-x-dark-mode
Open

fix(webapp): shared-page inline code reads as code in dark mode (BEA-90)#134
ssowonny wants to merge 1 commit into
mainfrom
bea-90-inline-code-markup-x-dark-mode

Conversation

@ssowonny

@ssowonny ssowonny commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

TL;DR

  • On a shared page in dark mode, bdrive init mid-sentence looked exactly like the words around it — same white, faint slab. Now it's warm-tinted with a visible edge, so a chip reads as code.
  • BEA-71 (fix(webapp): share page dark mode no longer shows white slabs (BEA-71) #122) fixed the ordering half of this bug and stopped at the background. This is the half the reporter actually asked for: "make the text more distinct".
  • Light mode is byte-identical — same screenshot, same sha. The edge is an inset shadow, not a border, precisely so the chip's box doesn't move between modes.
  • Fenced blocks stay one dark slab; pre code resets both new properties.
  • Known gap: still no syntax highlighting, and still no dark-mode toggle/s/* follows prefers-color-scheme only. Both were out of scope in the spec.

The change

Four lines inside the existing dark block of sharedMarkdownShell (internal/webapp/shares.go). No light rule is touched.

 @media (prefers-color-scheme: dark){
 body{background:#0a0b0d;color:#eef0f3}
 a{color:#ffcf85}
 h1,h2,h3{color:#eef0f3}
 pre,code{background:#15171b}
+code{color:#e4d9c4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
+pre code{color:inherit;box-shadow:none}
 blockquote{border-left-color:rgba(255,255,255,.07);color:#9aa0a9}

#e4d9c4 is the hub viewer's own inline-code colour (frontend/src/style.css), copied rather than linked — /s/* is a standalone sandboxed document and deliberately fetches no stylesheet.

Deviation from the reviewed plan

The plan was written against 71e52d5, before BEA-71 landed. Three of its four steps were already merged by #122 — the dark block is one block at the end, blockquote / td,th / table.frontmatter all have dark values, and TestShareDarkThemeIsLast already pins the ordering. Rebuilding them would have churned merged code for nothing, so this PR is only the residual delta.

One more deliberate deviation inside that delta: the plan called for border:1px solid rgba(...) in dark plus border:1px solid transparent in light to keep the metrics aligned. A transparent border still grows the light chip by 2px, which contradicts the plan's own "light mode is pixel-unchanged" acceptance criterion. An inset box-shadow gives the same edge with no box change and no light-mode edit at all — hence the byte-identical light screenshot below.

Dark mode: before / after

before after
dark before dark after

Same page in light mode, before and after — pixel-identical, cmp on the two PNGs returns clean:

before after
light before light after

What was run

  • go build ./..., go vet ./..., go test ./... — all packages pass.
  • npm run e2e — 153 passed, 1 skipped (pre-existing skip in sec14fe.spec.ts).
  • Screenshots are the real /s/<token> response bytes, rendered in Chromium at colorScheme: dark and light.
  • TestShareDarkThemeIsLast extended: dark inline code must declare its own colour and edge, and pre code must reset both. It fails on origin/main.
  • No frontend source changed, so static/ is untouched and no rebuild was needed.
  • The Content-Security-Policy: sandbox allow-scripts allow-popups header on /s/* is untouched — this change adds no fetch, no font, no external reference.

One open question

BEA-90 is marked Duplicate of BEA-71 in Linear. It isn't quite — BEA-71's fix left the reporter's specific complaint standing, which is what this PR closes. Worth deciding whether the issue goes back to Duplicate after merge or stands on its own.

Build session

cd $(git worktree list | grep bea-90 | awk '{print $1}') && claude --resume 70982355-27ac-414f-9b05-2e79051bcceb

(only works on the machine this ran on)

BEA-71 fixed the ordering bug that made the dark block lose to the light
`code` rule, but it stopped at the background: a dark chip still inherits
the body's #eef0f3, so `bdrive init` mid-sentence looks exactly like the
prose around it. That was the reporter's actual ask — "make the text more
distinct".

Inline code now carries the hub viewer's warm tint (#e4d9c4) plus an edge.
The edge is an inset box-shadow, not a border, so the chip's box metrics
don't move between modes and light mode stays byte-identical — verified by
screenshotting the same share page in both schemes before and after.

`pre code` resets both, so a fenced block stays one dark slab instead of a
row of bordered chips.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@ssowonny
ssowonny requested a review from thefron August 5, 2026 18:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant