github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-05-06 17:49:07 -05:00
Code Issues 85 Packages Projects Releases 24 Wiki Activity

[PR #1330] [MERGED] fix(tinytorch): fix dark mode visibility on overview page role cards and session flow #8124

New Issue
Closed
opened 2026-04-27 17:25:35 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-27 17:25:35 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1330
Author: @farhan523
Created: 4/14/2026
Status: ✅ Merged
Merged: 4/16/2026
Merged by: @profvjreddi

Base: dev ← Head: fix/tinytorch-overview-role-cards-dark-mode

📝 Commits (6)

  • c7e3593 fix(tinytorch): switch role-cards grid to 2-column layout on overview page
  • ffcd93a fix(tinytorch): fix mobile overflow on overview role-cards via CSS
  • e0f4b23 fix(tinytorch): add dark mode classes to role cards on overview page
  • 4f08164 fix(tinytorch): add dark mode CSS for overview role cards
  • b55d3e3 fix(tinytorch): add dark mode class to session flow box on overview page
  • 299c898 fix(tinytorch): add dark mode CSS for session flow box on overview page

📊 Changes

2 files changed (+69 additions, -11 deletions)

View changed files

📝 tinytorch/site/_static/custom.css (+58 -0)
📝 tinytorch/site/tito/overview.md (+11 -11)

📄 Description

Problem

Two sections on the overview page had invisible text in dark mode due to
hardcoded light colors in inline style attributes.

"Commands by User Role" cards (×3) — three issues per card:

  1. Light pastel backgrounds (#e3f2fd, #fff3e0, #f3e5f5) only handled
    by the broad filter: brightness(0.7) rule, leaving them visibly light
  2. Subtitle color: #37474f (dark gray) — invisible on any dark background
  3. h3 brand colors (#1976d2, #e65100, #7b1fa2) — dark tones unreadable
    on dimmed pastel backgrounds

"Typical Session Flow" box — background: #f8f9fa and
border: 1px solid #dee2e6 with zero dark mode CSS, making all content
inside invisible in dark mode.

Solution

tito/overview.md — Added semantic CSS classes to each affected element:

Element Class added
Student card overview-role-card overview-student-card
Instructor card overview-role-card overview-instructor-card
Developer card overview-role-card overview-developer-card
All h3 headings overview-role-heading
All subtitle paragraphs overview-role-subtitle
Session Flow box overview-session-box

_static/custom.css — Added targeted html[data-theme="dark"] overrides:

  • filter: none !important on all role cards to bypass brightness dimmer,
    replaced with a proper dark background (#1e1e2e)
  • #37474f subtitle text → #94a3b8 (muted slate)
  • Per-card h3 accent colors using lighter brand tones:
    Student #1976d2 → #90caf9 · Instructor #e65100 → #ffb74d · Developer #7b1fa2 → #ce93d8
  • Session Flow box: #f8f9fa bg → #1e293b, border → #334155, text → #e2e8f0

Files changed

  • tinytorch/site/tito/overview.md — 10 lines changed (class attributes added)
  • tinytorch/site/_static/custom.css — 38 lines added (dark mode overrides)

🔄 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/1330 **Author:** [@farhan523](https://github.com/farhan523) **Created:** 4/14/2026 **Status:** ✅ Merged **Merged:** 4/16/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `fix/tinytorch-overview-role-cards-dark-mode` --- ### 📝 Commits (6) - [`c7e3593`](https://github.com/harvard-edge/cs249r_book/commit/c7e359362c73a9cbbb44627a824dc7b3aaa85fa9) fix(tinytorch): switch role-cards grid to 2-column layout on overview page - [`ffcd93a`](https://github.com/harvard-edge/cs249r_book/commit/ffcd93a128e6d302afa849256cee4db51577a78e) fix(tinytorch): fix mobile overflow on overview role-cards via CSS - [`e0f4b23`](https://github.com/harvard-edge/cs249r_book/commit/e0f4b237922a6eced6f3dfc72959ea8132eed1fb) fix(tinytorch): add dark mode classes to role cards on overview page - [`4f08164`](https://github.com/harvard-edge/cs249r_book/commit/4f08164d69fd7f0a9899c64e296b24276164bc9a) fix(tinytorch): add dark mode CSS for overview role cards - [`b55d3e3`](https://github.com/harvard-edge/cs249r_book/commit/b55d3e3be890be1ba77dc2de6b69854987893f83) fix(tinytorch): add dark mode class to session flow box on overview page - [`299c898`](https://github.com/harvard-edge/cs249r_book/commit/299c8983ec21e6c061994d21e1acd9f49204343e) fix(tinytorch): add dark mode CSS for session flow box on overview page ### 📊 Changes **2 files changed** (+69 additions, -11 deletions) <details> <summary>View changed files</summary> 📝 `tinytorch/site/_static/custom.css` (+58 -0) 📝 `tinytorch/site/tito/overview.md` (+11 -11) </details> ### 📄 Description ## Problem Two sections on the overview page had invisible text in dark mode due to hardcoded light colors in inline `style` attributes. **"Commands by User Role" cards (×3)** — three issues per card: 1. Light pastel backgrounds (`#e3f2fd`, `#fff3e0`, `#f3e5f5`) only handled by the broad `filter: brightness(0.7)` rule, leaving them visibly light 2. Subtitle `color: #37474f` (dark gray) — invisible on any dark background 3. h3 brand colors (`#1976d2`, `#e65100`, `#7b1fa2`) — dark tones unreadable on dimmed pastel backgrounds **"Typical Session Flow" box** — `background: #f8f9fa` and `border: 1px solid #dee2e6` with zero dark mode CSS, making all content inside invisible in dark mode. ## Solution **`tito/overview.md`** — Added semantic CSS classes to each affected element: | Element | Class added | |---|---| | Student card | `overview-role-card overview-student-card` | | Instructor card | `overview-role-card overview-instructor-card` | | Developer card | `overview-role-card overview-developer-card` | | All h3 headings | `overview-role-heading` | | All subtitle paragraphs | `overview-role-subtitle` | | Session Flow box | `overview-session-box` | **`_static/custom.css`** — Added targeted `html[data-theme="dark"]` overrides: - `filter: none !important` on all role cards to bypass brightness dimmer, replaced with a proper dark background (`#1e1e2e`) - `#37474f` subtitle text → `#94a3b8` (muted slate) - Per-card h3 accent colors using lighter brand tones: Student `#1976d2` → `#90caf9` · Instructor `#e65100` → `#ffb74d` · Developer `#7b1fa2` → `#ce93d8` - Session Flow box: `#f8f9fa` bg → `#1e293b`, border → `#334155`, text → `#e2e8f0` ## Files changed - `tinytorch/site/tito/overview.md` — 10 lines changed (class attributes added) - `tinytorch/site/_static/custom.css` — 38 lines added (dark mode overrides) --- <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-04-27 17:25:35 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area: book
area: collabs
area: kits
area: socratiq
area: tinytorch
area: tools
area: website
bug
dependencies
format: epub
format: pdf
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#8124
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?