mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-08 02:28:25 -05:00
[GH-ISSUE #990] Dark mode stylings for callout examples unreadable #1658
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: github-starred/cs249r_book#1658
Reference in New Issue
Block a user
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?
Originally created by @eimlav on GitHub (Oct 24, 2025).
Original GitHub issue: https://github.com/harvard-edge/cs249r_book/issues/990
Originally assigned to: @profvjreddi on GitHub.
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.
Ideally, dark mode should use different colours so that the text is readable.
@profvjreddi commented on GitHub (Oct 24, 2025):
Oh, thank you for catching this; I completely forgot about dark mode since I don't use it. The other day, a student was showing me their screen, and I realized it was not legible, but forgot to file an issue with this. So, thanks so much for this fix!
@eimlav commented on GitHub (Oct 24, 2025):
No problem thanks for the quick feedback. This should make it a little easier to read.
I've been loving the book so far by the way. Amazing job! 🙌
@profvjreddi commented on GitHub (Oct 24, 2025):
Hi @eimlav
Could I ask for a favor, please?
I further updated the style for dark mode as I see a few other issues that needed style fixes. I made a push here:
305e30ba2f.You can check out the version here: dev. You will see a dark mode switch in the top-right corner. You can toggle it.
Could you try it and let me know what you think? 🙏
If you think it looks good, then I have at least one independent opinion, so I can merge it and push it live.
By the way, the link above is for the "dev" version, so please don't distribute it.
@eimlav commented on GitHub (Oct 25, 2025):
@profvjreddi oh wow nice this looks great! A few small things I noticed which might be worth looking at though feel free to ignore what doesn't seem relevant:
blockquotesare difficult to read. I think it needs a higher contrast text like that used in the callouts though perhaps a little lighter so that it is kept distinct from the callouts?Dark mode not applied to footer. I noticed in your changes you created a
page-footerclass but it doesn't look like this class is applied to the footer. It seems to use a class that is also calledfooter.Contrast on links could be improved. I found myself straining a bit trying to read them. Something similar to the callout link colour is much more readable (#e85d75)
This one is more of a nitpick so feel free to ignore but some images are using transparent backgrounds which might make them a bit difficult to read for some users (I think this really just depends on the content of the image e.g. here where the axis is almost impossible to read against the dark background)
Also another small nitpick: the preferred colour scheme is not being automatically applied e.g. a user with dark mode set as OS preference should have dark mode automatically applied. I'm not really familar with quarto but I did find this configuration option from the docs which might give you this for free
@eimlav commented on GitHub (Oct 25, 2025):
One additional thing I forgot to mention (sorry 😂 ) but from the perspective of a new user, I don't think it would be obvious that the toggle in the navbar is a theme switcher. In my case you told me so I'm now bias toward it but I would consider changing it to something that provides a more clear visual. This way it is less likely to be missed by the user / for the user to question what it's purpose is.
A pretty common pattern I've seen used nowadays is a simple icon that switches depending on the theme (example from React docs https://react.dev/) which I think works quite well:
https://github.com/user-attachments/assets/b4154cb3-0e9b-4b6f-b96a-ec88d9166835
@profvjreddi commented on GitHub (Oct 25, 2025):
Awesome feedback, thanks a bunch, @eimlav. Let me make another pass on it and get back to you.
@eimlav commented on GitHub (Oct 25, 2025):
Just noticed that the floating sidebar also appears to be unstyled fyi:
@profvjreddi commented on GitHub (Oct 26, 2025):
Huh, I specificially fixed that earlier so on my end it looks like this:
Are you accessing this on the dev version/site?
I am working on fixing the other issues you pointed out.
@profvjreddi commented on GitHub (Oct 26, 2025):
Hi @eimlav -- thanks for catching the issues you pointed out earlier!
ed14c6235fandbb349213f3address the issues you mentioned.Thanks for sharing the link to the Quarto thing; otherwise, I would have taken a long time to figure that out 😄
Appreciate you 🙏
The dev site is rendering, but it should deal with all except the image issue with the
tikzcode. I need to think about what to do with that, cause the images are transparent by default. Give me a few days to mull on that 🤔@profvjreddi commented on GitHub (Oct 26, 2025):
Just wanted to say you’re now officially part of the MLSysBook story 🙂
Check it out here on the dev site: https://harvard-edge.github.io/cs249r_book_dev/contents/frontmatter/acknowledgements/acknowledgements.html
Once I do a release, you’ll be on the main website.
It’s a small way of saying thank you for being part of this. It’s the fact that people share and care that keeps me going at this every day. Every contribution, big or small, shapes what this becomes, not just for you and me but for all of us. 🚀🙏
@eimlav commented on GitHub (Oct 27, 2025):
Nice one @profvjreddi I love the new theme switcher icons, this is looking great! I noticed that the footer is still showing the light theme though. I poked around at the CSS and it seems the
footertag is just a wrapper for adivwith class.nav-footerwhich is the actual footer content so you may need to target this instead.Regarding the images, a potentially (albeit lazy I'll admit) workaround could be that you just apply
background: whiteto theimgtags within.quarto-figureclasses. This way you technically don't need to actually change any of the images (for now).That said, the issue with images seems like a much bigger task than the scope of this issue so we could maybe cut a separate issue to properly update the images with actual backgrounds. This is also important as (I assume?..) the ePub version of the book also is going to have this same problem with images in dark mode i.e. when someone enables a dark mode in their e-reader. So the workaround I mention above would not work for this usecase.
@profvjreddi commented on GitHub (Oct 27, 2025):
Updated style file for this.
03c7c4f7dfixes the footer issue.dc2a810e4fixes the background issue.@profvjreddi commented on GitHub (Oct 27, 2025):
@eimlav, I am going to close this issue if we are all set here. I just pushed so the build is still running, takes a good 30 to 40 mins to build the book 😅 So check it in an hour.
Can you confirm?
Thanks again for all the help!
@eimlav commented on GitHub (Oct 27, 2025):
Yea sure I will check it out later when it's ready 👍
@eimlav commented on GitHub (Oct 28, 2025):
Quarto seems to have some weird logic around the sidebar in that there appears to be two different types: one that displays when there are no annotations and another that displays when you click the
On this pagebutton.The latter does not appear to have dark mode stylings which from a quick glance may be due to the fact that it is using a slightly different class name
quarto-sidebar-togglefor the container.Other than that I think we are good to go 👍
@profvjreddi commented on GitHub (Nov 2, 2025):
Just wanted to let you know that I fixed it! Thanks again for the detailed feedback.
@eimlav commented on GitHub (Nov 3, 2025):
Awesome stuff thanks for all the help! 🚀
@profvjreddi commented on GitHub (Nov 3, 2025):
Team work 🙌 Thanks for all the feedback, it did come out so nicely. I use it myself now haha :)