[PR #989] [MERGED] Fix dark mode stylings for callout examples #3673

Closed
opened 2026-04-16 01:54:18 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/989
Author: @eimlav
Created: 10/24/2025
Status: Merged
Merged: 10/24/2025
Merged by: @profvjreddi

Base: devHead: fix-dark-mode-example-colors


📝 Commits (1)

  • f8ae682 Fix dark mode stylings for callout examples

📊 Changes

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

View changed files

📝 quarto/_extensions/mlsysbook-ext/custom-numbered-blocks/style/foldbox.css (+8 -0)

📄 Description

Overview

Issue: https://github.com/harvard-edge/cs249r_book/issues/990

The site seems to use a small subset of dark mode stylings in certain places. One place is in the callouts. When using dark mode, it is impossible to read the text as it is being inherited from an upstream CSS var.

Light Dark
Screenshot 2025-10-24 at 16 43 23 Screenshot 2025-10-24 at 16 43 16

I have updated it so that it is readable. I kept it as a very simple change as it seems dark mode isn't really properly supported in this project so it's really just a small workaround to make things readable for now.

Testing

Build the introduction page, open it then using dev tools find the Rendering tab and toggle theme using Emulate CSS media feature prefers-color-schem.

Light mode

Screenshot 2025-10-24 at 16 43 51

Dark mode

Screenshot 2025-10-24 at 16 43 55

Checklist

  • The text has been proofread for grammar and spelling errors.
  • All images, figures, and tables render properly without any glitches.
  • All images have a source or they are properly linked to external sites.
  • The chapter's formatting is consistent with the rest of the book.
  • The chapter has been locally built and tested using Quarto.

🔄 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/989 **Author:** [@eimlav](https://github.com/eimlav) **Created:** 10/24/2025 **Status:** ✅ Merged **Merged:** 10/24/2025 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `fix-dark-mode-example-colors` --- ### 📝 Commits (1) - [`f8ae682`](https://github.com/harvard-edge/cs249r_book/commit/f8ae682df6d4be669820c859859f0160c64852b7) Fix dark mode stylings for callout examples ### 📊 Changes **1 file changed** (+8 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `quarto/_extensions/mlsysbook-ext/custom-numbered-blocks/style/foldbox.css` (+8 -0) </details> ### 📄 Description # Overview Issue: https://github.com/harvard-edge/cs249r_book/issues/990 The site seems to use a small subset of dark mode stylings in certain places. One place is in the callouts. When using dark mode, it is impossible to read the text as it is being inherited from an upstream CSS var. | Light | Dark | |--------|--------| | <img width="718" height="329" alt="Screenshot 2025-10-24 at 16 43 23" src="https://github.com/user-attachments/assets/cd43de35-55fe-48d8-93c8-5b90ec8c30d5" /> | <img width="718" height="329" alt="Screenshot 2025-10-24 at 16 43 16" src="https://github.com/user-attachments/assets/52a2be93-8350-4b1c-add2-443cfdf0be51" /> | I have updated it so that it is readable. I kept it as a very simple change as it seems dark mode isn't really properly supported in this project so it's really just a small workaround to make things readable for now. # Testing Build the introduction page, open it then using dev tools find the `Rendering` tab and toggle theme using `Emulate CSS media feature prefers-color-schem`. **Light mode** <img width="718" height="329" alt="Screenshot 2025-10-24 at 16 43 51" src="https://github.com/user-attachments/assets/aff10b59-91f1-4454-bc3a-066d549bd476" /> **Dark mode** <img width="718" height="329" alt="Screenshot 2025-10-24 at 16 43 55" src="https://github.com/user-attachments/assets/368998f6-8b00-45f8-bcaa-cace85119aad" /> **Checklist** - [X] The text has been proofread for grammar and spelling errors. - [X] All images, figures, and tables render properly without any glitches. - [X] All images have a source or they are properly linked to external sites. - [X] The chapter's formatting is consistent with the rest of the book. - [X] The chapter has been locally built and tested using Quarto. --- <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-16 01:54:18 -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#3673