[PR #1541] [MERGED] fix(tinytorch/ux): readable code-block surface in dark mode #14456

Closed
opened 2026-05-17 18:18:08 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1541
Author: @profvjreddi
Created: 4/25/2026
Status: Merged
Merged: 4/25/2026
Merged by: @profvjreddi

Base: devHead: fix/tinytorch-codeblock-dark-mode


📝 Commits (1)

  • 0d1b813 fix(tinytorch/ux): readable code-block surface in dark mode

📊 Changes

1 file changed (+19 additions, -0 deletions)

View changed files

📝 tinytorch/quarto/assets/styles/dark-mode.scss (+19 -0)

📄 Description

Follow-up to #1537. The shipped dark-mode coverage was correct for panels/sidebar/cards, but Quarto's default code-block style is

```css
div.sourceCode { background: rgba(233, 236, 239, 0.65); }
```

— a LIGHT fill at 65% opacity. Over the dark body (`#1a1a1a`) that blends to a washed-out medium grey (~`#a0a0a0`) which fights the syntax-highlighted foreground. User reported this on the live site after #1537 deployed.

Fix

Override in `dark-mode.scss`:

  • `div.sourceCode` → explicit `#22262c` surface (slightly lighter than body for delineation) + 1px border using `$border-color-dark`.
  • Inline `code` (e.g. `tinytorch/` in prose) → translucent slate `rgba(110, 118, 129, 0.35)` + light text `#e6edf3`.

Verification

Local Playwright on getting-started.html (most code-heavy page): code block bg `rgb(34, 38, 44)` = `#22262c`, border `#454d55`, body bg unchanged `#1a1a1a`. Visually distinct rectangles, syntax highlighting now reads cleanly.

Deploy

Same path as #1537: merge → re-trigger `tinytorch-publish-live` with `site_only: true`.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1541 **Author:** [@profvjreddi](https://github.com/profvjreddi) **Created:** 4/25/2026 **Status:** ✅ Merged **Merged:** 4/25/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `fix/tinytorch-codeblock-dark-mode` --- ### 📝 Commits (1) - [`0d1b813`](https://github.com/harvard-edge/cs249r_book/commit/0d1b813ed5ca03da0402d53fb4290ca0da1cf87c) fix(tinytorch/ux): readable code-block surface in dark mode ### 📊 Changes **1 file changed** (+19 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `tinytorch/quarto/assets/styles/dark-mode.scss` (+19 -0) </details> ### 📄 Description Follow-up to #1537. The shipped dark-mode coverage was correct for panels/sidebar/cards, but Quarto's default code-block style is \`\`\`css div.sourceCode { background: rgba(233, 236, 239, 0.65); } \`\`\` — a LIGHT fill at 65% opacity. Over the dark body (\`#1a1a1a\`) that blends to a washed-out medium grey (~\`#a0a0a0\`) which fights the syntax-highlighted foreground. User reported this on the live site after #1537 deployed. ## Fix Override in \`dark-mode.scss\`: - \`div.sourceCode\` → explicit \`#22262c\` surface (slightly lighter than body for delineation) + 1px border using \`\$border-color-dark\`. - Inline \`code\` (e.g. \`tinytorch/\` in prose) → translucent slate \`rgba(110, 118, 129, 0.35)\` + light text \`#e6edf3\`. ## Verification Local Playwright on getting-started.html (most code-heavy page): code block bg \`rgb(34, 38, 44)\` = \`#22262c\`, border \`#454d55\`, body bg unchanged \`#1a1a1a\`. Visually distinct rectangles, syntax highlighting now reads cleanly. ## Deploy Same path as #1537: merge → re-trigger \`tinytorch-publish-live\` with \`site_only: true\`. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-05-17 18:18:08 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#14456