Title: Dark theme by septatrix · Pull Request #44 · python/python-docs-theme · GitHub
Open Graph Title: Dark theme by septatrix · Pull Request #44 · python/python-docs-theme
X Title: Dark theme by septatrix · Pull Request #44 · python/python-docs-theme
Description: Closes #43. Closes #101. Update: I now consider this ready 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.rst file from the official docs as an example, though this does not use all styles which need to be changed. TODO General areas Implement basic dark theme functionality Implement proper dark mode syntax highlighting (merged for Sphinx 3.0) Check complete docs for missing styles (e.g. find where .refcount and .stableabi are used) Add functionality to toggle theme (persistence would require JS or server side code) Maybe add small disclaimer on first visit to show how to change to dark theme (decided not to as it is just another annoying banner like cookies on other websites) Add dark mode compatible variants of images (e.g. pathlib images - maybe open issue in cpython repo) or alternatively add a white background for now (out of scope and has to be done in the python repo) Components / Classes Check contrast ratios Fix styles for highlights after a search (kinda, feedback welcome; too bright makes text unreadable, too dark makes highlights hard to spot; went for a halfway point but maybe an outline is better) Scrollbars (#44 (comment)) Sidebar collapse panel Notes Design decisions I choose the current main background color based on the header on python.org and went for a different one (#121212 from 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.css overwriting 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
Open Graph Description: Closes #43. Closes #101. Update: I now consider this ready 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 t...
X Description: Closes #43. Closes #101. Update: I now consider this ready 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 ...
Opengraph URL: https://github.com/python/python-docs-theme/pull/44
X: @github
Domain: github.com
| route-pattern | /:user_id/:repository/pull/:id/checks(.:format) |
| route-controller | pull_requests |
| route-action | checks |
| fetch-nonce | v2:3ab53e9e-c050-0631-3120-fb14f86f1b28 |
| current-catalog-service-hash | 87dc3bc62d9b466312751bfd5f889726f4f1337bdff4e8be7da7c93d6c00a25a |
| request-id | B732:2B46F2:11BCCD:18B4BE:696A484F |
| html-safe-nonce | ce97203a48c52d1b7833689e05f2014b26aa5ee220f244d2bc5bd61684a5efa0 |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJCNzMyOjJCNDZGMjoxMUJDQ0Q6MThCNEJFOjY5NkE0ODRGIiwidmlzaXRvcl9pZCI6IjMwMTIyMTI3ODg2ODQyNzc4MzkiLCJyZWdpb25fZWRnZSI6ImlhZCIsInJlZ2lvbl9yZW5kZXIiOiJpYWQifQ== |
| visitor-hmac | 77fdd3583ea01997a3829e0362c54563f8f1b422aece9eb10b9d2f5cfef89d4f |
| hovercard-subject-tag | pull_request:371637609 |
| github-keyboard-shortcuts | repository,pull-request-list,pull-request-conversation,pull-request-files-changed,checks,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/python/python-docs-theme/pull/44/checks |
| twitter:image | https://avatars.githubusercontent.com/u/24257556?s=400&v=4 |
| twitter:card | summary_large_image |
| og:image | https://avatars.githubusercontent.com/u/24257556?s=400&v=4 |
| og:image:alt | Closes #43. Closes #101. Update: I now consider this ready 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 t... |
| og:site_name | GitHub |
| og:type | object |
| hostname | github.com |
| expected-hostname | github.com |
| None | 3f871c8e07f0ae1886fa8dac284166d28b09ad5bada6476fc10b674e489788ef |
| turbo-cache-control | no-preview |
| go-import | github.com/python/python-docs-theme git https://github.com/python/python-docs-theme.git |
| octolytics-dimension-user_id | 1525981 |
| octolytics-dimension-user_login | python |
| octolytics-dimension-repository_id | 93341818 |
| octolytics-dimension-repository_nwo | python/python-docs-theme |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 93341818 |
| octolytics-dimension-repository_network_root_nwo | python/python-docs-theme |
| turbo-body-classes | logged-out env-production page-responsive full-width full-width-p-0 |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | 63c426b30d262aba269ef14c40e3c817b384cd61 |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width