-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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 to documentation #1626
Conversation
@@ -152,13 +152,14 @@ | |||
# so a file named "default.css" will overwrite the builtin "default.css". | |||
html_static_path = ['_static'] | |||
|
|||
def setup(app): |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we want to leave this in?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didn't remove it, I'm just handling it using html_js_files
instead of app.add_js_file
. Both have the same effect, but html_js_files
accepts multiple paths so it seemed more efficient.
Related documentation:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Happy to change it back though if you prefer.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, interesting. The new way works for me!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you @iamdefinitelyahuman! This is awesome!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
post-merge feedback
@iamdefinitelyahuman have you considered releasing this as a stand-alone sphinx RTD theme?
@pipermerriam I hadn't, but I am now :) |
What was wrong?
How was it fixed?
Dark Mode
docs/_templates/versions.html
expands on the the builtin template'sversion.html
, which is the version selection in the bottom left. I abbreviated "Read the Docs" to "RTD" and added a slider that toggles day/night. Related sphinx documentation here.docs/_static/css/toggle.css
is the stylesheet for the toggle button.docs/_static/css/dark.css
is the stylesheet for dark mode. The syntax highlightingdocs/_static/js/toggle.js
is the JavaScript that implements the toggle. Initially the docs are displayed using the default ("day") style. On the first toggle,dark.css
is loaded and applied. The active mode is stored inlocalStorage
so it will persist across sessions.docs/conf.py
, some settings are modified to ensure all of the above files are included when rendering. I removedapp.add_js_file
in favor ofhtml_js_files
- same effect, less LOC.Formatting
docs/web3.parity.rst
, replace tabs with spaces in some code blocks. The mix of tabs and spaces together was making the blocks render strangely.docs/ethpm.rst
- it was missing a trailing underscore.Example
Todo:
Cute Animal Picture