From 39ea3b4103ea1e194bb26e93cae9c27d5810a9ab Mon Sep 17 00:00:00 2001 From: Snow Lee Date: Wed, 5 Aug 2026 11:12:30 -0700 Subject: [PATCH] fix(webapp): shared-page inline code reads as code in dark mode (BEA-90) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- internal/webapp/shares.go | 7 ++++++- internal/webapp/shares_test.go | 9 +++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/internal/webapp/shares.go b/internal/webapp/shares.go index e265b00..3d905b0 100644 --- a/internal/webapp/shares.go +++ b/internal/webapp/shares.go @@ -543,12 +543,17 @@ footer.bdrive a{color:inherit} /* Dark theme LAST: these rules sit at the same specificity as the light ones above, so source order is the whole fix — a dark block placed earlier loses to every light rule that follows it. Values are the hub's @theme tokens - (frontend/src/tw.css), never hand-picked, so the two surfaces agree. */ + (frontend/src/tw.css), never hand-picked, so the two surfaces agree. + Inline code carries its own tint and edge so a chip reads as code and not + as prose; the edge is an inset shadow rather than a border because a border + would change the chip's box metrics and light mode has to stay untouched. */ @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} td,th{border-color:rgba(255,255,255,.07)} table.frontmatter{background:#15171b;color:#9aa0a9} diff --git a/internal/webapp/shares_test.go b/internal/webapp/shares_test.go index 3b916b7..128c47f 100644 --- a/internal/webapp/shares_test.go +++ b/internal/webapp/shares_test.go @@ -471,6 +471,15 @@ func TestShareDarkThemeIsLast(t *testing.T) { if strings.Contains(body, "#c6cbd3") || strings.Contains(body, "#3a3a44") { t.Error("ad-hoc dark greys survived; use the tw.css tokens") } + // A code chip has to read as code: its own colour, not the body's, plus an + // edge to give it shape against a background only a shade off the page. + if !strings.Contains(block, "code{color:#e4d9c4;box-shadow:inset 0 0 0 1px") { + t.Error("dark inline code must have its own colour and edge, else a chip reads as prose") + } + // ...and a fenced block stays one slab rather than a row of bordered chips. + if !strings.Contains(block, "pre code{color:inherit;box-shadow:none}") { + t.Error("dark pre code must reset the inline chip's colour and edge") + } } func jsonReq(t *testing.T, method, url string, body any) *http.Request {