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 to documentation #1626

Merged
merged 3 commits into from
Apr 22, 2020
Merged

Add dark mode to documentation #1626

merged 3 commits into from
Apr 22, 2020

Conversation

iamdefinitelyahuman
Copy link
Contributor

What was wrong?

  1. The documentation had no dark mode.
  2. The documentation had some minor formatting issues.

How was it fixed?

  1. I added a dark mode toggle button.
  2. While verifying the dark mode, I fixed any formatting issues that I noticed.

Dark Mode

  • docs/_templates/versions.html expands on the the builtin template's version.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 highlighting
  • docs/_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 in localStorage so it will persist across sessions.
  • in docs/conf.py, some settings are modified to ensure all of the above files are included when rendering. I removed app.add_js_file in favor of html_js_files - same effect, less LOC.

Formatting

  • Fix some code highlights that were implemented with markdown syntax (single backtick) instead of RST (double backtick). In RST, these render as italics.
  • In 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.
  • Fix broken link in docs/ethpm.rst - it was missing a trailing underscore.

Example

  • To see the toggle mechanism in action, visit the Brownie documentation.
  • The syntax highlighting is using Monokai as implemented by Pygments:

image

Todo:

Cute Animal Picture

image

@@ -152,13 +152,14 @@
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']

def setup(app):
Copy link
Collaborator

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?

Copy link
Contributor Author

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:

Copy link
Contributor Author

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.

Copy link
Collaborator

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!

Copy link
Collaborator

@kclowes kclowes left a 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!

@kclowes kclowes merged commit 3170c6b into ethereum:master Apr 22, 2020
Copy link
Member

@pipermerriam pipermerriam left a 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?

@iamdefinitelyahuman
Copy link
Contributor Author

@pipermerriam I hadn't, but I am now :)

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.

3 participants