[PR #1740] [MERGED] fix(labs): readability for navbar dropdowns and landing-page headings #22679

Closed
opened 2026-06-04 22:30:43 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

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

Base: devHead: fix/labs-dark-mode-dropdown-and-headings


📝 Commits (2)

  • 0aee34d fix(labs): readable navbar dropdown panels in dark mode
  • b6aca9a fix(labs): landing-page volume + cluster headings legible in dark mode

📊 Changes

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

View changed files

📝 labs/assets/styles/dark-mode.scss (+65 -0)

📄 Description

Summary

Two scoped fixes to labs/assets/styles/dark-mode.scss for the Co-Labs site in dark mode:

  • Navbar dropdown panels (Teach / Prepare / Connect): Bootstrap's default .dropdown-menu keeps its light surface on the dark navbar, and items inherit the global teal link color — combined, the popover is unreadable. Adds a dark surface plus item, divider, and header styling.
  • Landing-page Lab Inventory headings: labs/index.qmd ships an inline <style> block that hard-codes #1e293b !important on .volume-heading and .cluster-heading, making "Volume I: Foundations", "Volume II: At Scale", "I. Foundations", "II. Build", "III. Optimize", "IV. Deploy", and "Capstone" invisible on the dark body. Overrides are scoped under html[data-bs-theme="dark"] so they outrank the inline rules without piling on more !important.

Lab cards keep their white background in dark mode by design, so the in-card title / question colors were left untouched — only the headings sitting on the dark page background changed.

Test plan

  • quarto preview the labs site (or labs/tools/build_site.sh) and toggle dark mode.
  • Open each navbar dropdown (Teach, Prepare, Connect) — items and hover states must be readable on a dark panel.
  • On the landing page in dark mode, verify "Volume I: Foundations", "Volume II: At Scale", and every cluster heading (I. Foundations, II. Build, III. Optimize, IV. Deploy, Capstone) plus their · Labs 00–04 meta suffixes are readable.
  • Light mode is unchanged (overrides are gated on [data-bs-theme="dark"] / the dark-mode SCSS bundle).

🔄 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/1740 **Author:** [@farhan523](https://github.com/farhan523) **Created:** 5/12/2026 **Status:** ✅ Merged **Merged:** 5/12/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `fix/labs-dark-mode-dropdown-and-headings` --- ### 📝 Commits (2) - [`0aee34d`](https://github.com/harvard-edge/cs249r_book/commit/0aee34d24e936cc984b0eb24a8fbf6946f51ff69) fix(labs): readable navbar dropdown panels in dark mode - [`b6aca9a`](https://github.com/harvard-edge/cs249r_book/commit/b6aca9a11944765eddcb4b312476c216bf88aaca) fix(labs): landing-page volume + cluster headings legible in dark mode ### 📊 Changes **1 file changed** (+65 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `labs/assets/styles/dark-mode.scss` (+65 -0) </details> ### 📄 Description ## Summary Two scoped fixes to `labs/assets/styles/dark-mode.scss` for the Co-Labs site in dark mode: - **Navbar dropdown panels** (Teach / Prepare / Connect): Bootstrap's default `.dropdown-menu` keeps its light surface on the dark navbar, and items inherit the global teal link color — combined, the popover is unreadable. Adds a dark surface plus item, divider, and header styling. - **Landing-page Lab Inventory headings**: `labs/index.qmd` ships an inline `<style>` block that hard-codes `#1e293b !important` on `.volume-heading` and `.cluster-heading`, making "Volume I: Foundations", "Volume II: At Scale", "I. Foundations", "II. Build", "III. Optimize", "IV. Deploy", and "Capstone" invisible on the dark body. Overrides are scoped under `html[data-bs-theme="dark"]` so they outrank the inline rules without piling on more `!important`. Lab cards keep their white background in dark mode by design, so the in-card title / question colors were left untouched — only the headings sitting on the dark page background changed. ## Test plan - [ ] `quarto preview` the labs site (or `labs/tools/build_site.sh`) and toggle dark mode. - [ ] Open each navbar dropdown (Teach, Prepare, Connect) — items and hover states must be readable on a dark panel. - [ ] On the landing page in dark mode, verify "Volume I: Foundations", "Volume II: At Scale", and every cluster heading (`I. Foundations`, `II. Build`, `III. Optimize`, `IV. Deploy`, `Capstone`) plus their `· Labs 00–04` meta suffixes are readable. - [ ] Light mode is unchanged (overrides are gated on `[data-bs-theme="dark"]` / the dark-mode SCSS bundle). --- <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-06-04 22:30:43 -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#22679