Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "dark mode" colour scheme #171

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Conversation

twome
Copy link

@twome twome commented Jul 17, 2022

This adds a "dark" (light text on dark background) alternate colour scheme for readers like me who get very sore eyes 🥲.

Caveat: this currently depends upon the user's browser/OS "dark mode / light mode" setting via CSS media query (i.e. it defaults to the current light scheme). I plan to make an unobtrusive toggle mode button (sequestered to a branch for now), but I'm just starting this PR tentatively now regardless.

I've had a quick look through every chapter and can't see any glaring layout issues. Bootstrap's CSS selectors can be very convoluted and high-specificity, so content changes that do a bunch of weird container nesting could conceivably break something - but likely would do so anyway.

My main focus was on the book content so I still need to do a quick pass of the auxiliary pages.

I'm not wedded to any of the colour choices; feel free to change whatever there. I tried to follow the spirit and palette, but the dark scheme feels a little more "brown" than "beige/manila". I was quite careful to retain the semantic meaning of the syntax highlighting colours in particular, but I haven't checked every section for CSS selectors squashing each other inappropriately/confusingly.

I have ~zero image editing skills so my crudely-darkened background pattern could do with a bit more subtlety. I cleaned up the cute tiled roof header a little; unfortunately it still sticks out a bit on the dark background.

The two biggest changes are the body content width, which is now defined in em values, and pumping up the 13-14px font size to 16px, which is obviously an opinionated change but I really think it's a good default for more relaxed reading (and scaling with browser zoom should stay proportional / look nice).

Regardless of acceptance, thanks for the wonderful book!

2022-07-18 00_33_27 screenshot

2022-07-18 00_34_29 screenshot

@orangeduck
Copy link
Owner

Thanks Tom - this is really cool - I will try to take a look some time next week!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants