Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upFirst draft of dark theme #44
Conversation
|
Hello, and thanks for your contribution! I'm a bot set up to make sure that the project can legally accept this contribution by verifying everyone involved has signed the PSF contributor agreement (CLA). Recognized GitHub usernameWe couldn't find a bugs.python.org (b.p.o) account corresponding to the following GitHub usernames: This might be simply due to a missing "GitHub Name" entry in one's b.p.o account settings. This is necessary for legal reasons before we can look at this contribution. Please follow the steps outlined in the CPython devguide to rectify this issue. You can check yourself to see if the CLA has been received. Thanks again for the contribution, we look forward to reviewing it! |
|
Thank you for your important work! I would like to make background a little bit darker, with less contrast of text. |
|
Dark scrollbar? |
|
Just idea - maybe like in Reddit for Android - it is good idea to have Dark theme and AMOLED dark, with #000 as a background? |
|
Thanks for the work on this, I'm bad at UI/UX so I won't say anything more, I just appreciate someone is handling this. |
|
It's already very awesome. I like this colour. |
|
Thanks for the feedback so far. I will try to incorporate it as far as I can next week but before I finalize it I would like to await the response for dark theme support in Sphinx first. |
Styling of scrollbars is not easy across browser vendors though I think we may use I currently have a few exams coming up so I probably won't get to implementing it until this weekend |
|
I did some further improvements and updated the TODO list above... |
|
Seems to be missing styles for 'sidebars'. See asyncio. |
Updated the demo page |
|
I just want to say big THANK YOU again for continuing adding dark theme, this is important for many users. |
|
Thanks :D It is almost finished now. All that is left to do is think about how to handle images and maybe add an option to the theme to completely disable dark mode in the config. The upstream changes in Sphinx have been merged for 3.x so we should be good merging this next month when Sphinx 3 is released... |
|
As the Sphinx 3 release is right around the corner I did some fine tuning (e.g. reducing bright contrast to reduce eye strain) and switched to If someone would be so kind to make a last review I would be very happy - I updated the live demo and otherwise would say it is ready to be merged :D |
|
Do you have a color in mind? I was using material design, some code editor themes and a few websites as reference. Most of them were close to the one I choose or at least did not use very dark backgrounds. However using the current mechanism it would be very easy to implement an additional full black AMOLED theme if that is what you want... |
|
I dimmed the color a bit and added an indicator what the current theme is in the button. |
|
ok, anyway, thank you again for such important work. |
|
Is there anything you want to be resolved before merging? Otherwise I would be pleased if you would merge this. In case you still want to adjust some colors I am certain you can do so on your own. |
|
Any update on whether this will get merged @vitaly-zdanevich |
|
@theacodes would you care to take a look over this when you find the time? I think a dark theme for docs.python.org would be great and this looks decent at a surface level, but I don't have much proficiency w/ CSS. |
|
If not making the background a liiiitle bit darker, I have nothing to say, anyway, this is a huge step to the dark ecosystem :) |
|
@theacodes any feedback or estimate when you will be able to take a look at this? |


This is still unfinished.
I have made a crude dark them as requested in #43, however there are still many unfinished areas.
So far I've always tested based on the
datetime.rstfile from the official docs as an example, though this does not use all styles which need to be changed.TODO
General areas
.refcountand.stableabiare used)Components / Classes
Notes
Design decisions
I choose the current main background color based on the header on python.org and went for a different one (
#121212from material design guidelines) for the background color around the edges as I thought this added a bit more depth to it. On second thought however it may be better to go with the single color approach as it is in the official docs. If we then were to the use the darker one this would also improve contrast and leave more space for fine tuning e.g. the anchor/link color.Most other colors are just from experimenting with the color wheel and by what felt right. The background for syntax however still needs to change but for that topic also see below.
Syntax highlighting
As neither Sphinx nor Pygments support switching themes based on a media query right now this would need to be a bit hacky. I might create an issue there and ask if they would be fine with pull request implementing such functionality (in whatever way though I already have an idea). Otherwise we would need to include another stylesheet after
pygments.cssoverwriting the normal one.Theme toggling
As not everybody likes to always have a dark theme it may be a good idea to implement theme switching functionality. This could be achieved using either CSS and some label/input magic or plain ole JS (or server side). CSS would be very accessible but not persistent. Therefore I think we should use the CSS way but save the state in a cookie (like we already do for whether the sidebar is expanded or not).
Try it out
Live version
Updated somewhat regularly:
https://septatrix.github.io/cpython-dark-docs/
Screenshot (outdated)
Full size screenshot - rather large