External/beardrive
1
0
Fork 0
mirror of https://github.com/runbear-io/beardrive.git synced 2026-08-25 08:08:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Snow Lee (Sungwon)
2026-08-11 03:15:07 +09:00
committed by GitHub
co-authored by Claude Opus 5
parent 8fce9d2c46
commit 831d5cda31
2 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/webapp/shares.go
+6 -1
View File
@@ -567,12 +567,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}
internal/webapp/shares_test.go
+9
View File
@@ -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")
}
}
// listShares reads the project's share list as the signed-in sharer.