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

[PR #1780] fix(site): dark mode for nav-footer, dropdown-menu, and star-history image #15731

New Issue
Open
opened 2026-05-20 14:04:51 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-05-20 14:04:51 -05:00
Owner
Copy Link

📋 Pull Request Information

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

Base: dev ← Head: fix/site-dark-mode-and-instructors-audit

📝 Commits (2)

  • 1611994 fix(site): add nav-footer and dropdown-menu dark mode selectors
  • a4dba56 fix(site/about): replace picture element with JS-driven star-history img

📊 Changes

3 files changed (+61 additions, -9 deletions)

View changed files

📝 shared/config/footer-site.yml (+1 -1)
📝 shared/styles/_site-dark.scss (+37 -3)
📝 site/about/index.qmd (+23 -5)

📄 Description

Summary

  • Footer stays white in dark mode (toggle path): footer-site.yml set background: light which pins Bootstrap's bg-light class on the .nav-footer element regardless of theme. Changed to background: none so the CSS dark override can apply.
  • .nav-footer missing from _site-dark.scss: Added .nav-footer alongside .page-footer with !important dark background/border so the Quarto-rendered footer element goes dark when the toggle is active.
  • .dropdown-menu stays white in dark mode: Added .dropdown-menu and .dropdown-item dark overrides in _site-dark.scss for the site pages (community, about, newsletter, landing). The site dark file previously had no dropdown styling at all.
  • Star-history <picture> element ignores Quarto toggle: The <picture> element in site/about/index.qmd used media="(prefers-color-scheme: dark)" which only reads OS preference. Replaced with a single <img> whose src is swapped via a MutationObserver on document.body.classList -- same pattern used elsewhere in the ecosystem.

Files changed

  • shared/styles/_site-dark.scss -- add .nav-footer + dropdown dark selectors
  • shared/config/footer-site.yml -- change background: light to background: none
  • site/about/index.qmd -- replace <picture> with JS MutationObserver img swap

Instructors audit findings

No new bugs found in instructors/ that are not already covered:

  • instructors/404.qmd already has body.quarto-dark selectors alongside its @media block.
  • instructors/foundations-syllabus.qmd lab subtitle fixes (labs 09-15) are already present in local dev -- identical to fork/fix/instructors-lab-subtitle-mismatch.
  • instructors/assets/styles/dark-mode.scss handles dark mode via SCSS dark theme file (loaded as Quarto dark theme layer), not via @media -- correct pattern.
  • site/about/about.css and site/community/community.css already use .quarto-dark CSS custom property overrides with no @media (prefers-color-scheme) blocks -- no fix needed.

Test plan

  • Toggle dark mode on mlsysbook.ai/about/ -- footer background should go dark
  • Open a navbar dropdown in dark mode -- menu background should be dark (#252525)
  • Toggle dark mode on the star-history chart section -- image should swap to dark variant without page reload
  • Toggle back to light -- image should swap back to light variant

🔄 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/1780 **Author:** [@Shashank-Tripathi-07](https://github.com/Shashank-Tripathi-07) **Created:** 5/18/2026 **Status:** 🔄 Open **Base:** `dev` ← **Head:** `fix/site-dark-mode-and-instructors-audit` --- ### 📝 Commits (2) - [`1611994`](https://github.com/harvard-edge/cs249r_book/commit/1611994279b1336e0fa8ad41a3d08749835c5fbb) fix(site): add nav-footer and dropdown-menu dark mode selectors - [`a4dba56`](https://github.com/harvard-edge/cs249r_book/commit/a4dba566cb23327048f0d8e6ee45961c7217b301) fix(site/about): replace picture element with JS-driven star-history img ### 📊 Changes **3 files changed** (+61 additions, -9 deletions) <details> <summary>View changed files</summary> 📝 `shared/config/footer-site.yml` (+1 -1) 📝 `shared/styles/_site-dark.scss` (+37 -3) 📝 `site/about/index.qmd` (+23 -5) </details> ### 📄 Description ## Summary - **Footer stays white in dark mode** (toggle path): `footer-site.yml` set `background: light` which pins Bootstrap's `bg-light` class on the `.nav-footer` element regardless of theme. Changed to `background: none` so the CSS dark override can apply. - **`.nav-footer` missing from `_site-dark.scss`**: Added `.nav-footer` alongside `.page-footer` with `!important` dark background/border so the Quarto-rendered footer element goes dark when the toggle is active. - **`.dropdown-menu` stays white in dark mode**: Added `.dropdown-menu` and `.dropdown-item` dark overrides in `_site-dark.scss` for the site pages (community, about, newsletter, landing). The site dark file previously had no dropdown styling at all. - **Star-history `<picture>` element ignores Quarto toggle**: The `<picture>` element in `site/about/index.qmd` used `media="(prefers-color-scheme: dark)"` which only reads OS preference. Replaced with a single `<img>` whose `src` is swapped via a `MutationObserver` on `document.body.classList` -- same pattern used elsewhere in the ecosystem. ## Files changed - `shared/styles/_site-dark.scss` -- add `.nav-footer` + dropdown dark selectors - `shared/config/footer-site.yml` -- change `background: light` to `background: none` - `site/about/index.qmd` -- replace `<picture>` with JS `MutationObserver` img swap ## Instructors audit findings No new bugs found in `instructors/` that are not already covered: - `instructors/404.qmd` already has `body.quarto-dark` selectors alongside its `@media` block. - `instructors/foundations-syllabus.qmd` lab subtitle fixes (labs 09-15) are already present in local `dev` -- identical to `fork/fix/instructors-lab-subtitle-mismatch`. - `instructors/assets/styles/dark-mode.scss` handles dark mode via SCSS dark theme file (loaded as Quarto dark theme layer), not via `@media` -- correct pattern. - `site/about/about.css` and `site/community/community.css` already use `.quarto-dark` CSS custom property overrides with no `@media (prefers-color-scheme)` blocks -- no fix needed. ## Test plan - [ ] Toggle dark mode on `mlsysbook.ai/about/` -- footer background should go dark - [ ] Open a navbar dropdown in dark mode -- menu background should be dark (#252525) - [ ] Toggle dark mode on the star-history chart section -- image should swap to dark variant without page reload - [ ] Toggle back to light -- image should swap back to light variant --- <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-20 14:04:51 -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#15731
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?