Video component containers do not apply dark styling when the reader uses Quarto's manual dark mode toggle button.
video-enhanced.css used only @media (prefers-color-scheme: dark) for its dark mode rules. The toggle button adds body.quarto-dark to the body element -- not a media query -- so OS-light users who toggle dark mode see video components rendered with light-mode styles (light gradient background, dark text) against a dark page.
Fix
Duplicate the dark mode rules under body.quarto-dark selectors directly below the existing @media block. Both mechanisms now cover the same visual states:
@media (prefers-color-scheme: dark) -- OS-level system preference
body.quarto-dark -- Quarto manual toggle
Test plan
Open a page containing a video-enhanced-container with OS in light mode
Click the dark mode toggle -- verify video container switches to dark gradient and light text
Toggle back to light -- verify video container returns to light styling
🔄 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/1752
**Author:** [@Shashank-Tripathi-07](https://github.com/Shashank-Tripathi-07)
**Created:** 5/17/2026
**Status:** ✅ Merged
**Merged:** 5/27/2026
**Merged by:** [@profvjreddi](https://github.com/profvjreddi)
**Base:** `dev` ← **Head:** `fix/video-enhanced-quarto-dark-toggle`
---
### 📝 Commits (1)
- [`aabc89c`](https://github.com/harvard-edge/cs249r_book/commit/aabc89c1e0e38deb992ef7890a6641b1dded7cd8) fix(book): add body.quarto-dark selectors to video-enhanced.css dark mode
### 📊 Changes
**1 file changed** (+19 additions, -0 deletions)
<details>
<summary>View changed files</summary>
📝 `book/quarto/assets/styles/video-enhanced.css` (+19 -0)
</details>
### 📄 Description
## Bug
Video component containers do not apply dark styling when the reader uses Quarto's **manual dark mode toggle button**.
`video-enhanced.css` used only `@media (prefers-color-scheme: dark)` for its dark mode rules. The toggle button adds `body.quarto-dark` to the body element -- not a media query -- so OS-light users who toggle dark mode see video components rendered with light-mode styles (light gradient background, dark text) against a dark page.
## Fix
Duplicate the dark mode rules under `body.quarto-dark` selectors directly below the existing `@media` block. Both mechanisms now cover the same visual states:
- `@media (prefers-color-scheme: dark)` -- OS-level system preference
- `body.quarto-dark` -- Quarto manual toggle
## Test plan
- [ ] Open a page containing a `video-enhanced-container` with OS in light mode
- [ ] Click the dark mode toggle -- verify video container switches to dark gradient and light text
- [ ] Toggle back to light -- verify video container returns to light styling
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/harvard-edge/cs249r_book/pull/1752
Author: @Shashank-Tripathi-07
Created: 5/17/2026
Status: ✅ Merged
Merged: 5/27/2026
Merged by: @profvjreddi
Base:
dev← Head:fix/video-enhanced-quarto-dark-toggle📝 Commits (1)
aabc89cfix(book): add body.quarto-dark selectors to video-enhanced.css dark mode📊 Changes
1 file changed (+19 additions, -0 deletions)
View changed files
📝
book/quarto/assets/styles/video-enhanced.css(+19 -0)📄 Description
Bug
Video component containers do not apply dark styling when the reader uses Quarto's manual dark mode toggle button.
video-enhanced.cssused only@media (prefers-color-scheme: dark)for its dark mode rules. The toggle button addsbody.quarto-darkto the body element -- not a media query -- so OS-light users who toggle dark mode see video components rendered with light-mode styles (light gradient background, dark text) against a dark page.Fix
Duplicate the dark mode rules under
body.quarto-darkselectors directly below the existing@mediablock. Both mechanisms now cover the same visual states:@media (prefers-color-scheme: dark)-- OS-level system preferencebody.quarto-dark-- Quarto manual toggleTest plan
video-enhanced-containerwith OS in light mode🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.