github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-05-21 13:31:55 -05:00
Code Issues 114 Packages Projects Releases 24 Wiki Activity

[PR #1751] fix(book): add body.quarto-dark selectors to foldbox dark mode CSS #14650

New Issue
Open
opened 2026-05-17 18:26:10 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-05-17 18:26:10 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1751
Author: @Shashank-Tripathi-07
Created: 5/17/2026
Status: 🔄 Open

Base: dev ← Head: fix/foldbox-css-quarto-dark-toggle

📝 Commits (1)

  • 4ed27bd fix(book): add body.quarto-dark selectors to foldbox dark mode CSS

📊 Changes

2 files changed (+63 additions, -26 deletions)

View changed files

📝 book/quarto/_extensions/mlsysbook-ext/custom-numbered-blocks/style/foldbox.css (+28 -1)
📝 book/quarto/_extensions/mlsysbook-ext/custom-numbered-blocks/style/foldbox.lua (+35 -25)

📄 Description

Bug

All callout boxes (Learning Objectives, Quiz Question, Checkpoint, Definition, etc.) render incorrectly when the reader uses Quarto's manual dark mode toggle button.

The toggle adds body.quarto-dark to the body element, but foldbox.css and the Lua-generated inline <style> block both used only @media (prefers-color-scheme: dark) for dark mode detection. That media query fires on OS-level system preference only. When a reader is on a light-mode OS and clicks the toggle:

  • Callout summary headers render with near-white #f0f0f0 text on a near-white background -- completely invisible
  • Callout content body does not switch to the dark background color
  • Expand/collapse arrows remain dark-colored instead of light

Root cause

Two files were affected:

foldbox.css -- structural dark rules (base text color, content background, arrows) only under @media (prefers-color-scheme: dark).

foldbox.lua -- per-callout dark rules (border color, background opacity, summary text, code color) generated dynamically from YAML and emitted into an inline <style> block, again only under @media (prefers-color-scheme: dark).

Fix

foldbox.css: Duplicate all dark mode rules under body.quarto-dark selectors alongside the existing @media block.

foldbox.lua: Refactor generateDarkModeCSS() to extract per-callout rule emission into a shared emitCalloutRules(prefix) helper. Call it twice -- once inside @media (prefers-color-scheme: dark) {} and once with body.quarto-dark as the selector prefix. Adding a new callout type in YAML still requires no CSS changes.

Test plan

  • Open a chapter page (e.g. ML Systems) in a browser with OS light mode
  • Click the sun/moon toggle in the navbar to switch to dark mode
  • Verify Learning Objectives, Quiz Question, Checkpoint, and Definition callouts all render with readable text and correct dark backgrounds
  • Toggle back to light mode -- verify callouts return to light styling
  • Repeat with OS dark mode active and toggle to light -- verify no dark styles bleed through

🔄 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/1751 **Author:** [@Shashank-Tripathi-07](https://github.com/Shashank-Tripathi-07) **Created:** 5/17/2026 **Status:** 🔄 Open **Base:** `dev` ← **Head:** `fix/foldbox-css-quarto-dark-toggle` --- ### 📝 Commits (1) - [`4ed27bd`](https://github.com/harvard-edge/cs249r_book/commit/4ed27bda32eae54697f01f840ab116a14bb4dd3d) fix(book): add body.quarto-dark selectors to foldbox dark mode CSS ### 📊 Changes **2 files changed** (+63 additions, -26 deletions) <details> <summary>View changed files</summary> 📝 `book/quarto/_extensions/mlsysbook-ext/custom-numbered-blocks/style/foldbox.css` (+28 -1) 📝 `book/quarto/_extensions/mlsysbook-ext/custom-numbered-blocks/style/foldbox.lua` (+35 -25) </details> ### 📄 Description ## Bug All callout boxes (Learning Objectives, Quiz Question, Checkpoint, Definition, etc.) render incorrectly when the reader uses Quarto's **manual dark mode toggle button**. The toggle adds `body.quarto-dark` to the body element, but `foldbox.css` and the Lua-generated inline `<style>` block both used only `@media (prefers-color-scheme: dark)` for dark mode detection. That media query fires on OS-level system preference only. When a reader is on a light-mode OS and clicks the toggle: - Callout summary headers render with near-white `#f0f0f0` text on a near-white background -- completely invisible - Callout content body does not switch to the dark background color - Expand/collapse arrows remain dark-colored instead of light ## Root cause Two files were affected: **`foldbox.css`** -- structural dark rules (base text color, content background, arrows) only under `@media (prefers-color-scheme: dark)`. **`foldbox.lua`** -- per-callout dark rules (border color, background opacity, summary text, code color) generated dynamically from YAML and emitted into an inline `<style>` block, again only under `@media (prefers-color-scheme: dark)`. ## Fix **`foldbox.css`**: Duplicate all dark mode rules under `body.quarto-dark` selectors alongside the existing `@media` block. **`foldbox.lua`**: Refactor `generateDarkModeCSS()` to extract per-callout rule emission into a shared `emitCalloutRules(prefix)` helper. Call it twice -- once inside `@media (prefers-color-scheme: dark) {}` and once with `body.quarto-dark ` as the selector prefix. Adding a new callout type in YAML still requires no CSS changes. ## Test plan - [ ] Open a chapter page (e.g. ML Systems) in a browser with OS light mode - [ ] Click the sun/moon toggle in the navbar to switch to dark mode - [ ] Verify Learning Objectives, Quiz Question, Checkpoint, and Definition callouts all render with readable text and correct dark backgrounds - [ ] Toggle back to light mode -- verify callouts return to light styling - [ ] Repeat with OS dark mode active and toggle to light -- verify no dark styles bleed through --- <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:26:10 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area: book
area: collabs
area: kits
area: labs
area: socratiq
area: tinytorch
area: tools
area: website
bug
dependencies
format: epub
format: pdf
javascript
link-health
link-rot
priority-high
pull-request
Mirrored from GitHub Pull Request
 staffml
type: bug
type: citation
type: code
type: errata
type: improvement
type: new
type: question
vault-sli
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#14650
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?