[PR #1624] [MERGED] fix(kits): make code blocks readable in dark mode #9230

New Issue

GiteaMirror · 2026-05-03T01:29:35-05:00

GiteaMirror commented

2026-05-03 01:29:35 -05:00

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1624
Author: @farhan523
Created: 5/2/2026
Status: ✅ Merged
Merged: 5/2/2026
Merged by: @profvjreddi

Base: dev ← Head: fix/kits-dark-mode-code-blocks

📝 Commits (1)

193f6e6 fix(kits): make code blocks readable in dark mode

📊 Changes

2 files changed (+57 additions, -7 deletions)

View changed files

📝 kits/assets/styles/dark-mode.scss (+54 -6)
📝 kits/config/_quarto-html.yml (+3 -1)

📄 Description

Summary

Code blocks (both fenced source blocks and inline code) were unreadable in dark mode on the kits site — the text rendered in the light syntax-theme colors (e.g. #24292e operators, #032f62 strings) on an off-white #f6f8fa background, on a body that was otherwise dark.

Before:

After:

Root cause

When format.html.theme defines both a light: and a dark: SCSS bundle, Quarto emits three syntax-highlighting <link> tags into every page:

<link class="quarto-color-scheme"                        ... syntax-highlighting.css      (light) >
<link class="quarto-color-scheme quarto-color-alternate" ... syntax-highlighting-dark.css  (dark)  >
<link class="quarto-color-scheme-extra"                  ... syntax-highlighting.css      (light) >


---

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

## 📋 Pull Request Information **Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1624 **Author:** [@farhan523](https://github.com/farhan523) **Created:** 5/2/2026 **Status:** ✅ Merged **Merged:** 5/2/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `fix/kits-dark-mode-code-blocks` --- ### 📝 Commits (1) - [`193f6e6`](https://github.com/harvard-edge/cs249r_book/commit/193f6e652b76a2e7a8cb45cbe805a5d8813e215c) fix(kits): make code blocks readable in dark mode ### 📊 Changes **2 files changed** (+57 additions, -7 deletions) <details> <summary>View changed files</summary> 📝 `kits/assets/styles/dark-mode.scss` (+54 -6) 📝 `kits/config/_quarto-html.yml` (+3 -1) </details> ### 📄 Description ## Summary Code blocks (both fenced source blocks and inline `code`) were unreadable in dark mode on the kits site — the text rendered in the light syntax-theme colors (e.g. `#24292e` operators, `#032f62` strings) on an off-white `#f6f8fa` background, on a body that was otherwise dark. **Before:** <img width="772" height="610" alt="Screenshot 2026-05-02 095522" src="https://github.com/user-attachments/assets/4faf996c-4076-480f-9fea-5b181d956577" /> <img width="784" height="337" alt="Screenshot 2026-05-02 095600" src="https://github.com/user-attachments/assets/b59a4848-b09f-456a-a1a5-79ace7fac55e" /> **After:** <img width="785" height="630" alt="Screenshot 2026-05-02 095733" src="https://github.com/user-attachments/assets/53c4bb97-cbe9-423c-84ca-cd82fae68059" /> <img width="780" height="344" alt="Screenshot 2026-05-02 095741" src="https://github.com/user-attachments/assets/c675c8de-0b53-434b-a4a0-034911c86721" /> ### Root cause When `format.html.theme` defines both a `light:` and a `dark:` SCSS bundle, Quarto emits **three** syntax-highlighting `<link>` tags into every page: ```html <link class="quarto-color-scheme" ... syntax-highlighting.css (light) > <link class="quarto-color-scheme quarto-color-alternate" ... syntax-highlighting-dark.css (dark) > <link class="quarto-color-scheme-extra" ... syntax-highlighting.css (light) > --- <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-03 01:29:35 -05:00

GiteaMirror closed this issue

2026-05-03 01:29:36 -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#9230