Dark mode stylings for callout examples unreadable

[eimlav]

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

Ideally, dark mode should use different colours so that the text is readable.

[profvjreddi]

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]

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]

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: 305e30b.

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]

@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:

• blockquotes are 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-footer class but it doesn't look like this class is applied to the footer. It seems to use a class that is also called footer.

  

• 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]

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:

Screen.Recording.2025-10-25.at.17.18.42.mov

[profvjreddi]

Awesome feedback, thanks a bunch, @eimlav. Let me make another pass on it and get back to you.

[eimlav]

Just noticed that the floating sidebar also appears to be unstyled fyi:

[profvjreddi]

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]

Hi @eimlav -- thanks for catching the issues you pointed out earlier!

ed14c62 and bb34921 address 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 tikz code. 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]

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]

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 footer tag is just a wrapper for a div with class .nav-footer which 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: white to the img tags within .quarto-figure classes. 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]

Updated style file for this.

03c7c4f fixes the footer issue.
dc2a810 fixes the background issue.

[profvjreddi]

@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!