Dark Theme

[whitead]

Now that github has a nice dark theme, I'm thinking that a nice dark theme would be good for jupyter books. Any ideas how to implement this, aside from designing it myself in _static custom css. Can you swap the themes somehow?

[whitead]

I believe bootstrap is used, maybe something like this? Do I fork the sphinx book theme for this or add to custom css/js? Thoughts?

[jstac]

These lectures are written with JB and have a dark theme -- see the icon on the bar up top: https://python-programming.quantecon.org/intro.html

That theme was created for QE but it's intended for sharing --- @DrDrij is the creator.

[choldgraf]

more generally we'd also love to get dark theme support in the sphinx-book-theme as well!

[choldgraf]

btw @DrDrij that is a beautiful theme I must say

[DrDrij]

Thanks @choldgraf :)

[DrDrij]

The method we've used for quantecon is fairly straight forward. The initial build for the quantecon theme is written with minimal markup and not based off bootstrap. A CSS class (in this case 'dark-theme') on the body element allows re-styling of any elements that need colour changes. I've used javascript to toggle the class and hence enabling the additional styles.

The example you've linked @whitead looks like a nice quick way to get a basic dark theme going. It will need an additional set of styles for custom elements. A potential neater way to do it would be leveraging CSS or SCSS variables (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).

One experimental addition which we've added to the quantecon theme is client-side inversion of image colours with CSS filters.

filter: invert(100%) hue-rotate(-180deg) !important;
-ms-filter: invert(100%) !important;
-webkit-filter: invert(100%) hue-rotate(-180deg) !important;

This works really well for graphs (eg. axis/plots on white background and console screenshots) but not for photos etc.
This may require some consideration for image-heavy books - is it necessary to create a light and dark version of images and lazy load the respective image when needed?

[chrisjsewell]

FYI, I just use https://github.com/darkreader/darkreader in Firefox, and so personally never really have the need for site specific dark modes.
But it might be worth looking at their code