[PR #1633] fix(instructors): make left sidebar readable in dark mode #9239

New Issue

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

GiteaMirror commented

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

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1633
Author: @farhan523
Created: 5/3/2026
Status: 🔄 Open

Base: dev ← Head: fix/instructors-dark-mode-sidebar

📝 Commits (1)

bb4fc7b fix(instructors): make left sidebar readable in dark mode

📊 Changes

1 file changed (+66 additions, -3 deletions)

View changed files

📝 instructors/assets/styles/dark-mode.scss (+66 -3)

📄 Description

Summary

The left navigation sidebar on the Instructors site (/instructors/) was unreadable in dark mode — section headers and links kept their light-theme colors against the dark background.

Root cause: the dark-mode rule targeted .sidebar .sidebar-item a, but Quarto renders the floating sidebar as <a class=\"sidebar-link\"> and <a class=\"sidebar-item-toggle\"> directly (not nested inside an .sidebar-item anchor wrapper), so none of the existing color overrides matched.

Changes

instructors/assets/styles/dark-mode.scss

Target the real selectors: a.sidebar-link, .sidebar-item-toggle, .menu-text, .sidebar-item-text, .chapter-number.
Section headers (collapsible toggles) → light body color, indigo on hover.
Leaf links → muted gray, indigo on hover, white-on-indigo for the active page.
Style the sidebar search input (background, border, placeholder).
Style the right-side TOC rail (#TOC / nav[role=\"doc-toc\"]) for consistency.
Added higher-specificity guards (#quarto-sidebar a.sidebar-link.active) so the active state isn't overridden by Bootstrap's active link color.

Before / After

Test plan

quarto preview instructors and toggle to dark mode
Verify section headers ("Start Here", "Syllabi", etc.) are clearly visible
Verify leaf links are readable and the active page is highlighted in indigo/white
Verify hover state (indigo text + faint indigo background tint)
Verify the sidebar search input is themed (dark background, light text, muted placeholder)
Verify the right-rail TOC ("On this page") matches the same accent
Re-check light mode is unchanged

_{🔄 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/1633 **Author:** [@farhan523](https://github.com/farhan523) **Created:** 5/3/2026 **Status:** 🔄 Open **Base:** `dev` ← **Head:** `fix/instructors-dark-mode-sidebar` --- ### 📝 Commits (1) - [`bb4fc7b`](https://github.com/harvard-edge/cs249r_book/commit/bb4fc7bfdb314939a43dfea81b6e206f416f978c) fix(instructors): make left sidebar readable in dark mode ### 📊 Changes **1 file changed** (+66 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `instructors/assets/styles/dark-mode.scss` (+66 -3) </details> ### 📄 Description ## Summary The left navigation sidebar on the **Instructors** site (`/instructors/`) was unreadable in dark mode — section headers and links kept their light-theme colors against the dark background. Root cause: the dark-mode rule targeted `.sidebar .sidebar-item a`, but Quarto renders the floating sidebar as `<a class=\"sidebar-link\">` and `<a class=\"sidebar-item-toggle\">` *directly* (not nested inside an `.sidebar-item` anchor wrapper), so none of the existing color overrides matched. ## Changes `instructors/assets/styles/dark-mode.scss` - Target the real selectors: `a.sidebar-link`, `.sidebar-item-toggle`, `.menu-text`, `.sidebar-item-text`, `.chapter-number`. - Section headers (collapsible toggles) → light body color, indigo on hover. - Leaf links → muted gray, indigo on hover, white-on-indigo for the active page. - Style the sidebar search input (background, border, placeholder). - Style the right-side TOC rail (`#TOC` / `nav[role=\"doc-toc\"]`) for consistency. - Added higher-specificity guards (`#quarto-sidebar a.sidebar-link.active`) so the active state isn't overridden by Bootstrap's `active` link color. ## Before / After | Before | After | | <img width="1072" height="593" alt="Screenshot 2026-05-03 090224" src="https://github.com/user-attachments/assets/70ffc92c-e6a7-45db-9fa7-a1b42599a986" /> | <img width="1061" height="611" alt="Screenshot 2026-05-03 090240" src="https://github.com/user-attachments/assets/1b8b421e-c17c-465b-8ae3-9b1700e3426c" /> | ## Test plan - [ ] `quarto preview instructors` and toggle to dark mode - [ ] Verify section headers (\"Start Here\", \"Syllabi\", etc.) are clearly visible - [ ] Verify leaf links are readable and the active page is highlighted in indigo/white - [ ] Verify hover state (indigo text + faint indigo background tint) - [ ] Verify the sidebar search input is themed (dark background, light text, muted placeholder) - [ ] Verify the right-rail TOC (\"On this page\") matches the same accent - [ ] Re-check light mode is unchanged --- <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:51 -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#9239