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.

Sign up for GitHub

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

Jump to bottom

Dark theme #224

Open
2 tasks
westurner opened this issue Jul 23, 2015 · 33 comments
Open
2 tasks

Dark theme #224

westurner opened this issue Jul 23, 2015 · 33 comments
Labels
Needed: design decision A core team decision is required Theme Option

Comments

@westurner
Copy link
Contributor

westurner commented Jul 23, 2015 •
edited

Problem

  • UBY: high contrast / color inversion is too bright
  • UBY: Dark theme

Solutions
Less (or configurable) colors (for the sidebar) would be great.

  • Different CSS with less contrast btwn sidebar background and content background
  • Toggle-able / select-able colors(chemes)

High Contrast / Color Inversion
@Blendify
Copy link
Member

Closing, this is a general todo to make it easier to change the colors of the theme. See the readme file

@westurner
Copy link
Contributor Author

westurner commented Dec 17, 2017 •
edited

Yes, the contrast between the sidebar and the document limits the accessibility of this theme (the default readthedocs) theme for users who invert the page colors.

I'm aware that individuals can modify the theme colors for their particular implementations.

The problem is that all of the default-themed docs are less accessible due to the defaults.

/cc @ericholscher

@Blendify
Copy link
Member

I do not think we want to change the default colors after having the theme for several years. Some slight hue/luminance changes are ok if needed though but nothing major.

@westurner
Copy link
Contributor Author

westurner commented Dec 18, 2017 via email

@westurner
Copy link
Contributor Author

westurner commented Dec 18, 2017 •
edited

A notice with instructions for reverting to the previous sidebar color and an explanation that inverting dark gray still hurts my retinas would probably satisfy anyone with any significant attachment to the current sidebar theme color.

screenshot from 2017-12-17 22-38-48

@westurner
Copy link
Contributor Author

These are a bit easier on the eyes; but definitely aren't as polished as the current theme (or even within appropriate chromatic ranges):
screenshot from 2017-12-17 23-06-15

screenshot from 2017-12-17 23-06-37

.wy-side-nav-search {
    background-color: #d8d8d8;
}

.wy-side-nav-search input[type=text] {
    border-color: #787878;
}

.wy-nav-side {
    background: #f8f8f8
}

.wy-menu-vertical a {
    color: inherit;
}

.wy-menu-vertical a:hover {
    background-color: #c8c8c8;
}

.rst-versions {
    border-top: solid 10px #d0d0d0;
}

.rst-versions .rst-current-version {
    background-color: #e0e0e0;
}

a:hover {
    text-decoration: underline !important;
}

@SuperKogito
Copy link

Can you please include the CSS code or the tags to change in order to invert the body (right side) colours like in the first picture. Thank you in advance :)

@ericholscher ericholscher reopened this Feb 20, 2019
@ericholscher
Copy link
Member

Reopening this to consider. It would be cool to have a "dark mode" or similar toggle. I've seen this implemented well in some places.

@ericholscher ericholscher added the Needed: design decision A core team decision is required label Feb 20, 2019
@westurner
Copy link
Contributor Author

Can you please include the CSS code or the tags to change in order to invert the body (right side) colours like in the first picture. Thank you in advance :)

The https://deluminate.github.io/ chrome extension has a few different "Invert Luminance options". IDK how to do it with Firefox. There are various ways to invert the colors of the whole display or window with various OSes.

"Because I was inverted."

@agjohnson agjohnson changed the title UBY: high contrast / color inversion is too bright high contrast / color inversion is too bright Oct 21, 2019
@septatrix
Copy link
Contributor

Just found this issue and currently work on adding native dark style support to sphinx.

The issue as well as the link to the PR can be found here sphinx-doc/sphinx#7101. Furthermore if one wants to test how this would work I invite you to check out the PR for adding a dark style to the python docs theme python/python-docs-theme#44. As this is still under consideration and according to the label needs design decisions I may work on a draft here as well once I am finished with the other PRs if so desired.

@aqeelat
Copy link

aqeelat commented Jun 11, 2020

@septatrix I'm interested in helping out with the native dark style support. I already started with a fork of rtd but I think it might be best to do it here.
https://github.com/AqeelAT/readthedocs.org/tree/darkmode/media/css

@septatrix
Copy link
Contributor

Does rtd already support sphinx 3? I think it would be a good idea to wait till then. Also could someone maybe update the title to more closely represent the topic of a dark theme?

@westurner westurner changed the title high contrast / color inversion is too bright UBY: Dark theme Jun 16, 2020
@westurner
Copy link
Contributor Author

Is there already an issue for Sphinx 3 support? OTOH, what would need to change to support Sphinx 3?

Should a dark theme be the default if @media ( prefers-color-scheme: dark ) and/or if manually toggled to the dark theme?

@westurner westurner changed the title UBY: Dark theme Dark theme Jun 16, 2020
@polyzen
Copy link

polyzen commented Jun 16, 2020

Trunk and the rc release seem to work fine with Sphinx 3.

@septatrix
Copy link
Contributor

I personally would want websites to automatically display a dark theme if prefers-color-scheme is set to dark (the prefers is there for a reason) but offer a easily accessible way to switch back. Kinda like I did at the linked python-docs-theme PR (which is not yet merged but the result can be viewed here) though perhaps a bit more visible.

@hugovk
Copy link

hugovk commented Sep 27, 2020

Would be great to see something like python/python-docs-theme#44 for sphinx_rtd_theme!

@AndydeCleyre
Copy link

The newer releases of the Dark Reader browser extension offer the ability to export the computed CSS. Here's an approximately 2x2 pixel video demo (GIF, so I can include it right here):

GIF

darkreader_export

And here's the output (for https://flit.readthedocs.io):

CSS 
  /*
                        _______
                       /       \
                      .==.    .==.
                     ((  ))==((  ))
                    / "=="    "=="\
                   /____|| || ||___\
       ________     ____    ________  ___    ___
       |  ___  \   /    \   |  ___  \ |  |  /  /
       |  |  \  \ /  /\  \  |  |  \  \|  |_/  /
       |  |   )  /  /__\  \ |  |__/  /|  ___  \
       |  |__/  /  ______  \|  ____  \|  |  \  \
_______|_______/__/ ____ \__\__|___\__\__|___\__\____
|  ___  \ |  ____/ /    \   |  ___  \ |  ____|  ___  \
|  |  \  \|  |___ /  /\  \  |  |  \  \|  |___|  |  \  \
|  |__/  /|  ____/  /__\  \ |  |   )  |  ____|  |__/  /
|  ____  \|  |__/  ______  \|  |__/  /|  |___|  ____  \
|__|   \__\____/__/      \__\_______/ |______|__|   \__\
                https://darkreader.org
*/
/* User-Agent Style */
html {
    background-color: #181a1b !important;
}
html, body, input, textarea, select, button {
    background-color: #181a1b;
}
html, body, input, textarea, select, button {
    border-color: #736b5e;
    color: #e8e6e3;
}
a {
    color: #3391ff;
}
table {
    border-color: #545b5e;
}
::placeholder {
    color: #b2aba1;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    background-color: #555b00 !important;
    color: #e8e6e3 !important;
}
::-webkit-scrollbar {
    background-color: #202324;
    color: #aba499;
}
::-webkit-scrollbar-thumb {
    background-color: #454a4d;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #575e62;
}
::-webkit-scrollbar-thumb:active {
    background-color: #484e51;
}
::-webkit-scrollbar-corner {
    background-color: #181a1b;
}
* {
    scrollbar-color: #202324 #454a4d;
}
::selection {
    background-color: #004daa !important;
    color: #e8e6e3 !important;
}
::-moz-selection {
    background-color: #004daa !important;
    color: #e8e6e3 !important;
}

/* Invert Style */
.jfk-bubble, embed[type="application/pdf"] {
    filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;
}

/* Override Style */
.vimvixen-hint {
    background-color: #7b5300 !important;
    border-color: #d8b013 !important;
    color: #f3e8c8 !important;
}
::placeholder {
    opacity: 0.5 !important;
}

/* Variables Style */
:root {
   --darkreader-neutral-background: #181a1b;
   --darkreader-neutral-text: #e8e6e3;
   --darkreader-selection-background: #004daa;
   --darkreader-selection-text: #e8e6e3;
}

/* Modified CSS */
a:hover,
a:active {
    outline-color: currentcolor;
}
abbr[title] {
    border-bottom-color: currentcolor;
}
ins {
    background-color: rgb(112, 112, 0);
    background-image: none;
    color: rgb(232, 230, 227);
    text-decoration-color: currentcolor;
}
mark {
    background-color: rgb(204, 204, 0);
    background-image: none;
    color: rgb(232, 230, 227);
}
ul,
ol,
dl {
    list-style-image: none;
}
li {
    list-style-image: none;
}
img {
    border-color: currentcolor;
}
fieldset {
    border-color: currentcolor;
}
legend {
    border-color: currentcolor;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border-color: currentcolor;
}
.chromeframe {
    background-color: rgb(53, 57, 59);
    background-image: none;
    color: rgb(232, 230, 227);
}
.ir {
    border-color: currentcolor;
    background-color: transparent;
}
.visuallyhidden {
    border-color: currentcolor;
}
.fa-border {
    border-color: rgb(53, 57, 59);
}
.fa-inverse {
    color: rgb(232, 230, 227);
}
.sr-only {
    border-color: currentcolor;
}
.fa::before,
.wy-menu-vertical li span.toctree-expand::before,
.wy-menu-vertical li.on a span.toctree-expand::before,
.wy-menu-vertical li.current > a span.toctree-expand::before,
.rst-content .admonition-title::before,
.rst-content h1 .headerlink::before,
.rst-content h2 .headerlink::before,
.rst-content h3 .headerlink::before,
.rst-content h4 .headerlink::before,
.rst-content h5 .headerlink::before,
.rst-content h6 .headerlink::before,
.rst-content dl dt .headerlink::before,
.rst-content p.caption .headerlink::before,
.rst-content table > caption .headerlink::before,
.rst-content .code-block-caption .headerlink::before,
.rst-content tt.download span:first-child::before,
.rst-content code.download span:first-child::before,
.icon::before,
.wy-dropdown .caret::before,
.wy-inline-validate.wy-inline-validate-success .wy-input-context::before,
.wy-inline-validate.wy-inline-validate-danger .wy-input-context::before,
.wy-inline-validate.wy-inline-validate-warning .wy-input-context::before,
.wy-inline-validate.wy-inline-validate-info .wy-input-context::before {
    text-decoration-color: inherit;
}
a .fa,
a .wy-menu-vertical li span.toctree-expand,
.wy-menu-vertical li a span.toctree-expand,
.wy-menu-vertical li.on a span.toctree-expand,
.wy-menu-vertical li.current > a span.toctree-expand,
a .rst-content .admonition-title,
.rst-content a .admonition-title,
a .rst-content h1 .headerlink,
.rst-content h1 a .headerlink,
a .rst-content h2 .headerlink,
.rst-content h2 a .headerlink,
a .rst-content h3 .headerlink,
.rst-content h3 a .headerlink,
a .rst-content h4 .headerlink,
.rst-content h4 a .headerlink,
a .rst-content h5 .headerlink,
.rst-content h5 a .headerlink,
a .rst-content h6 .headerlink,
.rst-content h6 a .headerlink,
a .rst-content dl dt .headerlink,
.rst-content dl dt a .headerlink,
a .rst-content p.caption .headerlink,
.rst-content p.caption a .headerlink,
a .rst-content table > caption .headerlink,
.rst-content table > caption a .headerlink,
a .rst-content .code-block-caption .headerlink,
.rst-content .code-block-caption a .headerlink,
a .rst-content tt.download span:first-child,
.rst-content tt.download a span:first-child,
a .rst-content code.download span:first-child,
.rst-content code.download a span:first-child,
a .icon {
    text-decoration-color: inherit;
}
.wy-alert,
.rst-content .note,
.rst-content .attention,
.rst-content .caution,
.rst-content .danger,
.rst-content .error,
.rst-content .hint,
.rst-content .important,
.rst-content .tip,
.rst-content .warning,
.rst-content .seealso,
.rst-content .admonition-todo,
.rst-content .admonition {
    background-color: rgb(32, 35, 36);
    background-image: none;
}
.wy-alert-title,
.rst-content .admonition-title {
    color: rgb(232, 230, 227);
    background-color: rgb(29, 91, 131);
    background-image: none;
}
.wy-alert.wy-alert-danger,
.rst-content .wy-alert-danger.note,
.rst-content .wy-alert-danger.attention,
.rst-content .wy-alert-danger.caution,
.rst-content .danger,
.rst-content .error,
.rst-content .wy-alert-danger.hint,
.rst-content .wy-alert-danger.important,
.rst-content .wy-alert-danger.tip,
.rst-content .wy-alert-danger.warning,
.rst-content .wy-alert-danger.seealso,
.rst-content .wy-alert-danger.admonition-todo,
.rst-content .wy-alert-danger.admonition {
    background-color: rgb(52, 12, 8);
    background-image: none;
}
.wy-alert.wy-alert-danger .wy-alert-title,
.rst-content .wy-alert-danger.note .wy-alert-title,
.rst-content .wy-alert-danger.attention .wy-alert-title,
.rst-content .wy-alert-danger.caution .wy-alert-title,
.rst-content .danger .wy-alert-title,
.rst-content .error .wy-alert-title,
.rst-content .wy-alert-danger.hint .wy-alert-title,
.rst-content .wy-alert-danger.important .wy-alert-title,
.rst-content .wy-alert-danger.tip .wy-alert-title,
.rst-content .wy-alert-danger.warning .wy-alert-title,
.rst-content .wy-alert-danger.seealso .wy-alert-title,
.rst-content .wy-alert-danger.admonition-todo .wy-alert-title,
.rst-content .wy-alert-danger.admonition .wy-alert-title,
.wy-alert.wy-alert-danger .rst-content .admonition-title,
.rst-content .wy-alert.wy-alert-danger .admonition-title,
.rst-content .wy-alert-danger.note .admonition-title,
.rst-content .wy-alert-danger.attention .admonition-title,
.rst-content .wy-alert-danger.caution .admonition-title,
.rst-content .danger .admonition-title,
.rst-content .error .admonition-title,
.rst-content .wy-alert-danger.hint .admonition-title,
.rst-content .wy-alert-danger.important .admonition-title,
.rst-content .wy-alert-danger.tip .admonition-title,
.rst-content .wy-alert-danger.warning .admonition-title,
.rst-content .wy-alert-danger.seealso .admonition-title,
.rst-content .wy-alert-danger.admonition-todo .admonition-title,
.rst-content .wy-alert-danger.admonition .admonition-title {
    background-color: rgb(108, 22, 13);
    background-image: none;
}
.wy-alert.wy-alert-warning,
.rst-content .wy-alert-warning.note,
.rst-content .attention,
.rst-content .caution,
.rst-content .wy-alert-warning.danger,
.rst-content .wy-alert-warning.error,
.rst-content .wy-alert-warning.hint,
.rst-content .wy-alert-warning.important,
.rst-content .wy-alert-warning.tip,
.rst-content .warning,
.rst-content .wy-alert-warning.seealso,
.rst-content .admonition-todo,
.rst-content .wy-alert-warning.admonition {
    background-color: rgb(82, 53, 0);
    background-image: none;
}
.wy-alert.wy-alert-warning .wy-alert-title,
.rst-content .wy-alert-warning.note .wy-alert-title,
.rst-content .attention .wy-alert-title,
.rst-content .caution .wy-alert-title,
.rst-content .wy-alert-warning.danger .wy-alert-title,
.rst-content .wy-alert-warning.error .wy-alert-title,
.rst-content .wy-alert-warning.hint .wy-alert-title,
.rst-content .wy-alert-warning.important .wy-alert-title,
.rst-content .wy-alert-warning.tip .wy-alert-title,
.rst-content .warning .wy-alert-title,
.rst-content .wy-alert-warning.seealso .wy-alert-title,
.rst-content .admonition-todo .wy-alert-title,
.rst-content .wy-alert-warning.admonition .wy-alert-title,
.wy-alert.wy-alert-warning .rst-content .admonition-title,
.rst-content .wy-alert.wy-alert-warning .admonition-title,
.rst-content .wy-alert-warning.note .admonition-title,
.rst-content .attention .admonition-title,
.rst-content .caution .admonition-title,
.rst-content .wy-alert-warning.danger .admonition-title,
.rst-content .wy-alert-warning.error .admonition-title,
.rst-content .wy-alert-warning.hint .admonition-title,
.rst-content .wy-alert-warning.important .admonition-title,
.rst-content .wy-alert-warning.tip .admonition-title,
.rst-content .warning .admonition-title,
.rst-content .wy-alert-warning.seealso .admonition-title,
.rst-content .admonition-todo .admonition-title,
.rst-content .wy-alert-warning.admonition .admonition-title {
    background-color: rgb(123, 65, 14);
    background-image: none;
}
.wy-alert.wy-alert-info,
.rst-content .note,
.rst-content .wy-alert-info.attention,
.rst-content .wy-alert-info.caution,
.rst-content .wy-alert-info.danger,
.rst-content .wy-alert-info.error,
.rst-content .wy-alert-info.hint,
.rst-content .wy-alert-info.important,
.rst-content .wy-alert-info.tip,
.rst-content .wy-alert-info.warning,
.rst-content .seealso,
.rst-content .wy-alert-info.admonition-todo,
.rst-content .wy-alert-info.admonition {
    background-color: rgb(32, 35, 36);
    background-image: none;
}
.wy-alert.wy-alert-info .wy-alert-title,
.rst-content .note .wy-alert-title,
.rst-content .wy-alert-info.attention .wy-alert-title,
.rst-content .wy-alert-info.caution .wy-alert-title,
.rst-content .wy-alert-info.danger .wy-alert-title,
.rst-content .wy-alert-info.error .wy-alert-title,
.rst-content .wy-alert-info.hint .wy-alert-title,
.rst-content .wy-alert-info.important .wy-alert-title,
.rst-content .wy-alert-info.tip .wy-alert-title,
.rst-content .wy-alert-info.warning .wy-alert-title,
.rst-content .seealso .wy-alert-title,
.rst-content .wy-alert-info.admonition-todo .wy-alert-title,
.rst-content .wy-alert-info.admonition .wy-alert-title,
.wy-alert.wy-alert-info .rst-content .admonition-title,
.rst-content .wy-alert.wy-alert-info .admonition-title,
.rst-content .note .admonition-title,
.rst-content .wy-alert-info.attention .admonition-title,
.rst-content .wy-alert-info.caution .admonition-title,
.rst-content .wy-alert-info.danger .admonition-title,
.rst-content .wy-alert-info.error .admonition-title,
.rst-content .wy-alert-info.hint .admonition-title,
.rst-content .wy-alert-info.important .admonition-title,
.rst-content .wy-alert-info.tip .admonition-title,
.rst-content .wy-alert-info.warning .admonition-title,
.rst-content .seealso .admonition-title,
.rst-content .wy-alert-info.admonition-todo .admonition-title,
.rst-content .wy-alert-info.admonition .admonition-title {
    background-color: rgb(29, 91, 131);
    background-image: none;
}
.wy-alert.wy-alert-success,
.rst-content .wy-alert-success.note,
.rst-content .wy-alert-success.attention,
.rst-content .wy-alert-success.caution,
.rst-content .wy-alert-success.danger,
.rst-content .wy-alert-success.error,
.rst-content .hint,
.rst-content .important,
.rst-content .tip,
.rst-content .wy-alert-success.warning,
.rst-content .wy-alert-success.seealso,
.rst-content .wy-alert-success.admonition-todo,
.rst-content .wy-alert-success.admonition {
    background-color: rgb(9, 66, 58);
    background-image: none;
}
.wy-alert.wy-alert-success .wy-alert-title,
.rst-content .wy-alert-success.note .wy-alert-title,
.rst-content .wy-alert-success.attention .wy-alert-title,
.rst-content .wy-alert-success.caution .wy-alert-title,
.rst-content .wy-alert-success.danger .wy-alert-title,
.rst-content .wy-alert-success.error .wy-alert-title,
.rst-content .hint .wy-alert-title,
.rst-content .important .wy-alert-title,
.rst-content .tip .wy-alert-title,
.rst-content .wy-alert-success.warning .wy-alert-title,
.rst-content .wy-alert-success.seealso .wy-alert-title,
.rst-content .wy-alert-success.admonition-todo .wy-alert-title,
.rst-content .wy-alert-success.admonition .wy-alert-title,
.wy-alert.wy-alert-success .rst-content .admonition-title,
.rst-content .wy-alert.wy-alert-success .admonition-title,
.rst-content .wy-alert-success.note .admonition-title,
.rst-content .wy-alert-success.attention .admonition-title,
.rst-content .wy-alert-success.caution .admonition-title,
.rst-content .wy-alert-success.danger .admonition-title,
.rst-content .wy-alert-success.error .admonition-title,
.rst-content .hint .admonition-title,
.rst-content .important .admonition-title,
.rst-content .tip .admonition-title,
.rst-content .wy-alert-success.warning .admonition-title,
.rst-content .wy-alert-success.seealso .admonition-title,
.rst-content .wy-alert-success.admonition-todo .admonition-title,
.rst-content .wy-alert-success.admonition .admonition-title {
    background-color: rgb(21, 150, 125);
    background-image: none;
}
.wy-alert.wy-alert-neutral,
.rst-content .wy-alert-neutral.note,
.rst-content .wy-alert-neutral.attention,
.rst-content .wy-alert-neutral.caution,
.rst-content .wy-alert-neutral.danger,
.rst-content .wy-alert-neutral.error,
.rst-content .wy-alert-neutral.hint,
.rst-content .wy-alert-neutral.important,
.rst-content .wy-alert-neutral.tip,
.rst-content .wy-alert-neutral.warning,
.rst-content .wy-alert-neutral.seealso,
.rst-content .wy-alert-neutral.admonition-todo,
.rst-content .wy-alert-neutral.admonition {
    background-color: rgb(27, 36, 36);
    background-image: none;
}
.wy-alert.wy-alert-neutral .wy-alert-title,
.rst-content .wy-alert-neutral.note .wy-alert-title,
.rst-content .wy-alert-neutral.attention .wy-alert-title,
.rst-content .wy-alert-neutral.caution .wy-alert-title,
.rst-content .wy-alert-neutral.danger .wy-alert-title,
.rst-content .wy-alert-neutral.error .wy-alert-title,
.rst-content .wy-alert-neutral.hint .wy-alert-title,
.rst-content .wy-alert-neutral.important .wy-alert-title,
.rst-content .wy-alert-neutral.tip .wy-alert-title,
.rst-content .wy-alert-neutral.warning .wy-alert-title,
.rst-content .wy-alert-neutral.seealso .wy-alert-title,
.rst-content .wy-alert-neutral.admonition-todo .wy-alert-title,
.rst-content .wy-alert-neutral.admonition .wy-alert-title,
.wy-alert.wy-alert-neutral .rst-content .admonition-title,
.rst-content .wy-alert.wy-alert-neutral .admonition-title,
.rst-content .wy-alert-neutral.note .admonition-title,
.rst-content .wy-alert-neutral.attention .admonition-title,
.rst-content .wy-alert-neutral.caution .admonition-title,
.rst-content .wy-alert-neutral.danger .admonition-title,
.rst-content .wy-alert-neutral.error .admonition-title,
.rst-content .wy-alert-neutral.hint .admonition-title,
.rst-content .wy-alert-neutral.important .admonition-title,
.rst-content .wy-alert-neutral.tip .admonition-title,
.rst-content .wy-alert-neutral.warning .admonition-title,
.rst-content .wy-alert-neutral.seealso .admonition-title,
.rst-content .wy-alert-neutral.admonition-todo .admonition-title,
.rst-content .wy-alert-neutral.admonition .admonition-title {
    color: rgb(192, 186, 178);
    background-color: rgb(40, 43, 45);
    background-image: none;
}
.wy-alert.wy-alert-neutral a,
.rst-content .wy-alert-neutral.note a,
.rst-content .wy-alert-neutral.attention a,
.rst-content .wy-alert-neutral.caution a,
.rst-content .wy-alert-neutral.danger a,
.rst-content .wy-alert-neutral.error a,
.rst-content .wy-alert-neutral.hint a,
.rst-content .wy-alert-neutral.important a,
.rst-content .wy-alert-neutral.tip a,
.rst-content .wy-alert-neutral.warning a,
.rst-content .wy-alert-neutral.seealso a,
.rst-content .wy-alert-neutral.admonition-todo a,
.rst-content .wy-alert-neutral.admonition a {
    color: rgb(84, 164, 217);
}
.wy-tray-container li {
    background-color: transparent;
    background-image: none;
    color: rgb(232, 230, 227);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 0px;
}
.wy-tray-container li.wy-tray-item-success {
    background-color: rgb(31, 139, 77);
    background-image: none;
}
.wy-tray-container li.wy-tray-item-info {
    background-color: rgb(33, 102, 148);
    background-image: none;
}
.wy-tray-container li.wy-tray-item-warning {
    background-color: rgb(178, 94, 20);
    background-image: none;
}
.wy-tray-container li.wy-tray-item-danger {
    background-color: rgb(162, 33, 20);
    background-image: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border-color: currentcolor;
}
.btn {
    color: rgb(232, 230, 227);
    border-color: rgba(140, 130, 115, 0.1);
    background-color: rgb(31, 139, 77);
    text-decoration-color: currentcolor;
    box-shadow: rgba(24, 26, 27, 0.5) 0px 1px 2px -1px inset,
    rgba(0, 0, 0, 0.1) 0px -2px 0px 0px inset;
}
.btn-hover {
    background-color: rgb(37, 114, 165);
    background-image: none;
    color: rgb(232, 230, 227);
}
.btn:hover {
    background-color: rgb(35, 156, 86);
    background-image: none;
    color: rgb(232, 230, 227);
}
.btn:focus {
    background-color: rgb(35, 156, 86);
    background-image: none;
    outline-color: currentcolor;
}
.btn:active {
    box-shadow: rgba(0, 0, 0, 0.05) 0px -1px 0px 0px inset,
    rgba(0, 0, 0, 0.1) 0px 2px 0px 0px inset;
}
.btn:visited {
    color: rgb(232, 230, 227);
}
.btn:disabled {
    background-image: none;
    box-shadow: none;
}
.btn-disabled {
    background-image: none;
    box-shadow: none;
}
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active {
    background-image: none;
    box-shadow: none;
}
.btn::-moz-focus-inner {
    border-color: currentcolor;
}
.btn-info {
    background-color: rgb(33, 102, 148) !important;
}
.btn-info:hover {
    background-color: rgb(37, 114, 165) !important;
}
.btn-neutral {
    background-color: rgb(27, 36, 36) !important;
    color: rgb(192, 186, 178) !important;
}
.btn-neutral:hover {
    background-color: rgb(34, 44, 44) !important;
    color: rgb(192, 186, 178);
}
.btn-neutral:visited {
    color: rgb(192, 186, 178) !important;
}
.btn-success {
    background-color: rgb(31, 139, 77) !important;
}
.btn-success:hover {
    background-color: rgb(27, 122, 68) !important;
}
.btn-danger {
    background-color: rgb(162, 33, 20) !important;
}
.btn-danger:hover {
    background-color: rgb(149, 30, 18) !important;
}
.btn-warning {
    background-color: rgb(178, 94, 20) !important;
}
.btn-warning:hover {
    background-color: rgb(165, 87, 18) !important;
}
.btn-invert {
    background-color: rgb(26, 28, 29);
}
.btn-invert:hover {
    background-color: rgb(35, 38, 40) !important;
}
.btn-link {
    background-color: transparent !important;
    color: rgb(84, 164, 217);
    box-shadow: none;
    border-color: transparent !important;
}
.btn-link:hover {
    background-color: transparent !important;
    color: rgb(79, 162, 216) !important;
    box-shadow: none;
}
.btn-link:active {
    background-color: transparent !important;
    color: rgb(79, 162, 216) !important;
    box-shadow: none;
}
.btn-link:visited {
    color: rgb(164, 103, 188);
}
.wy-dropdown-menu {
    background-color: rgb(26, 28, 29);
    background-image: none;
    border-color: rgb(60, 65, 67);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px 0px;
}
.wy-dropdown-menu > dd > a {
    color: rgb(192, 186, 178);
}
.wy-dropdown-menu > dd > a:hover {
    background-color: rgb(33, 102, 148);
    background-image: none;
    color: rgb(232, 230, 227);
}
.wy-dropdown-menu > dd.divider {
    border-top-color: rgb(60, 65, 67);
}
.wy-dropdown-menu > dd.call-to-action {
    background-color: rgb(40, 43, 45);
    background-image: none;
}
.wy-dropdown-menu > dd.call-to-action:hover {
    background-color: rgb(40, 43, 45);
    background-image: none;
}
.wy-dropdown-menu > dd.call-to-action .btn {
    color: rgb(232, 230, 227);
}
.wy-dropdown.wy-dropdown-bubble .wy-dropdown-menu {
    background-color: rgb(26, 28, 29);
    background-image: none;
}
.wy-dropdown.wy-dropdown-bubble .wy-dropdown-menu a:hover {
    background-color: rgb(33, 102, 148);
    background-image: none;
    color: rgb(232, 230, 227);
}
.wy-dropdown-arrow::before {
    border-bottom-color: rgb(51, 55, 57);
    border-left-color: transparent;
    border-right-color: transparent;
}
fieldset {
    border-color: currentcolor;
}
legend {
    border-color: currentcolor;
}
label {
    color: rgb(200, 195, 188);
}
.wy-control-group.wy-control-group-required > label::after {
    color: rgb(233, 88, 73);
}
.wy-form-message-inline {
    color: rgb(168, 160, 149);
}
.wy-form-message {
    color: rgb(168, 160, 149); 
}
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="date"], input[type="month"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="week"], input[type="number"], input[type="search"], input[type="tel"], input[type="color"] {
    border-color: rgb(62, 68, 70);
    box-shadow: rgb(43, 47, 49) 0px 1px 3px inset; 
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus {
    outline-color: currentcolor;
    border-color: rgb(123, 114, 101);
}
input.no-focus:focus {
    border-color: rgb(62, 68, 70) !important; 
}
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
    outline-color: rgb(13, 113, 167); 
}
input[type="text"][disabled], input[type="password"][disabled], input[type="email"][disabled], input[type="url"][disabled], input[type="date"][disabled], input[type="month"][disabled], input[type="time"][disabled], input[type="datetime"][disabled], input[type="datetime-local"][disabled], input[type="week"][disabled], input[type="number"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="color"][disabled] {
    background-color: rgb(27, 29, 30);
}
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
    color: rgb(233, 88, 73);
    border-color: rgb(149, 31, 18);
}
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
    border-color: rgb(149, 31, 18); 
}
input[type="file"]:focus:invalid:focus, input[type="radio"]:focus:invalid:focus, input[type="checkbox"]:focus:invalid:focus {
    outline-color: rgb(149, 31, 18);
}
select,
textarea {
    border-color: rgb(62, 68, 70);
    box-shadow: rgb(43, 47, 49) 0px 1px 3px inset;
}
select {
    border-color: rgb(62, 68, 70);
    background-color: rgb(24, 26, 27);
}
select:focus,
textarea:focus {
    outline-color: currentcolor;
}
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
    background-color: rgb(27, 29, 30);
}
.wy-checkbox,
.wy-radio {
    color: rgb(192, 186, 178);
}
.wy-input-prefix .wy-input-context,
.wy-input-suffix .wy-input-context {
    background-color: rgb(27, 36, 36);
    border-color: rgb(62, 68, 70);
    color: rgb(168, 160, 149);
}
.wy-input-suffix .wy-input-context {
    border-left-color: currentcolor;
}
.wy-input-prefix .wy-input-context {
    border-right-color: currentcolor;
}
.wy-switch::before {
    background-color: rgb(53, 57, 59);
    background-image: none;
}
.wy-switch::after {
    background-color: rgb(82, 88, 92);
    background-image: none;
}
.wy-switch span {
    color: rgb(200, 195, 188);
}
.wy-switch.active::before {
    background-color: rgb(24, 106, 58);
    background-image: none;
}
.wy-switch.active::after {
    background-color: rgb(31, 139, 77);
    background-image: none;
}
.wy-control-group.wy-control-group-error .wy-form-message,
.wy-control-group.wy-control-group-error > label {
    color: rgb(233, 88, 73); 
}
.wy-control-group.wy-control-group-error input[type="text"], .wy-control-group.wy-control-group-error input[type="password"], .wy-control-group.wy-control-group-error input[type="email"], .wy-control-group.wy-control-group-error input[type="url"], .wy-control-group.wy-control-group-error input[type="date"], .wy-control-group.wy-control-group-error input[type="month"], .wy-control-group.wy-control-group-error input[type="time"], .wy-control-group.wy-control-group-error input[type="datetime"], .wy-control-group.wy-control-group-error input[type="datetime-local"], .wy-control-group.wy-control-group-error input[type="week"], .wy-control-group.wy-control-group-error input[type="number"], .wy-control-group.wy-control-group-error input[type="search"], .wy-control-group.wy-control-group-error input[type="tel"], .wy-control-group.wy-control-group-error input[type="color"] {
    border-color: rgb(149, 31, 18);
}
.wy-control-group.wy-control-group-error textarea {
    border-color: rgb(149, 31, 18);
}
.wy-inline-validate.wy-inline-validate-success .wy-input-context {
    color: rgb(92, 218, 145);
}
.wy-inline-validate.wy-inline-validate-danger .wy-input-context {
    color: rgb(233, 88, 73);
}
.wy-inline-validate.wy-inline-validate-warning .wy-input-context {
    color: rgb(232, 138, 54);
}
.wy-inline-validate.wy-inline-validate-info .wy-input-context {
    color: rgb(84, 164, 217);
}
.wy-table caption,
.rst-content table.docutils caption,
.rst-content table.field-list caption {
    color: rgb(232, 230, 227);
}
.wy-table thead,
.rst-content table.docutils thead,
.rst-content table.field-list thead {
    color: rgb(232, 230, 227);
}
.wy-table thead th,
.rst-content table.docutils thead th,
.rst-content table.field-list thead th {
    border-bottom-color: rgb(56, 61, 63);
}
.wy-table td,
.rst-content table.docutils td,
.rst-content table.field-list td {
    background-color: transparent;
}
.wy-table-secondary {
    color: rgb(152, 143, 129);
}
.wy-table-tertiary {
    color: rgb(152, 143, 129);
}
.wy-table-odd td,
.wy-table-striped tr:nth-child(2n-1) td,
.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td {
    background-color: rgb(27, 36, 36);
}
.wy-table-backed {
    background-color: rgb(27, 36, 36);
}
.wy-table-bordered-all,
.rst-content table.docutils {
    border-color: rgb(56, 61, 63);
}
.wy-table-bordered-all td,
.rst-content table.docutils td {
    border-bottom-color: rgb(56, 61, 63);
    border-left-color: rgb(56, 61, 63);
}
.wy-table-bordered {
    border-color: rgb(56, 61, 63);
}
.wy-table-bordered-rows td {
    border-bottom-color: rgb(56, 61, 63);
}
.wy-table-horizontal td,
.wy-table-horizontal th {
    border-bottom-color: rgb(56, 61, 63);
}
a {
    color: rgb(84, 164, 217);
    text-decoration-color: currentcolor;
}
a:hover {
    color: rgb(68, 156, 214);
}
a:visited {
    color: rgb(164, 103, 188);
}
body {
    color: rgb(192, 186, 178);
    background-color: rgb(33, 35, 37);
    background-image: none;
}
.wy-text-strike {
    text-decoration-color: currentcolor;
}
.wy-text-warning {
    color: rgb(232, 138, 54) !important;
}
a.wy-text-warning:hover {
    color: rgb(236, 157, 87) !important;
}
.wy-text-info {
    color: rgb(84, 164, 217) !important;
}
a.wy-text-info:hover {
    color: rgb(79, 162, 216) !important;
}
.wy-text-success {
    color: rgb(92, 218, 145) !important;
}
a.wy-text-success:hover {
    color: rgb(73, 214, 133) !important;
}
.wy-text-danger {
    color: rgb(233, 88, 73) !important;
}
a.wy-text-danger:hover {
    color: rgb(237, 118, 104) !important;
}
.wy-text-neutral {
    color: rgb(192, 186, 178) !important;
}
a.wy-text-neutral:hover {
    color: rgb(176, 169, 159) !important;
}
hr {
    border-color: rgb(56, 61, 63) currentcolor currentcolor;
}
code,
.rst-content tt,
.rst-content code {
    background-color: rgb(24, 26, 27);
    background-image: none;
    border-color: rgb(56, 61, 63);
    color: rgb(233, 88, 73);
}
.wy-plain-list-disc,
.rst-content .section ul,
.rst-content .toctree-wrapper ul,
article ul {
    list-style-image: none;
}
.wy-plain-list-disc li,
.rst-content .section ul li,
.rst-content .toctree-wrapper ul li,
article ul li {
    list-style-image: none;
}
.wy-plain-list-disc li li,
.rst-content .section ul li li,
.rst-content .toctree-wrapper ul li li,
article ul li li {
    list-style-image: none;
}
.wy-plain-list-disc li li li,
.rst-content .section ul li li li,
.rst-content .toctree-wrapper ul li li li,
article ul li li li {
    list-style-image: none;
}
.wy-plain-list-disc li ol li,
.rst-content .section ul li ol li,
.rst-content .toctree-wrapper ul li ol li,
article ul li ol li {
    list-style-image: none;
}
.wy-plain-list-decimal,
.rst-content .section ol,
.rst-content ol.arabic,
article ol {
    list-style-image: none;
}
.wy-plain-list-decimal li,
.rst-content .section ol li,
.rst-content ol.arabic li,
article ol li {
    list-style-image: none;
}
.wy-plain-list-decimal li ul li,
.rst-content .section ol li ul li,
.rst-content ol.arabic li ul li,
article ol li ul li {
    list-style-image: none;
}
.wy-breadcrumbs li code,
.wy-breadcrumbs li .rst-content tt,
.rst-content .wy-breadcrumbs li tt {
    border-color: currentcolor;
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
}
.wy-breadcrumbs li code.literal,
.wy-breadcrumbs li .rst-content tt.literal,
.rst-content .wy-breadcrumbs li tt.literal {
    color: rgb(192, 186, 178);
}
.wy-breadcrumbs-extra {
    color: rgb(184, 178, 169);
}
.wy-menu a:hover {
    text-decoration-color: currentcolor;
}
.wy-menu-horiz li:hover {
    background-color: rgba(24, 26, 27, 0.1);
    background-image: none;
}
.wy-menu-horiz li.divide-left {
    border-left-color: rgb(119, 110, 98);
}
.wy-menu-horiz li.divide-right {
    border-right-color: rgb(119, 110, 98);
}
.wy-menu-vertical header,
.wy-menu-vertical p.caption {
    color: rgb(99, 161, 201);
}
.wy-menu-vertical li.divide-top {
    border-top-color: rgb(119, 110, 98);
}
.wy-menu-vertical li.divide-bottom {
    border-bottom-color: rgb(119, 110, 98);
}
.wy-menu-vertical li.current {
    background-color: rgb(40, 43, 45);
    background-image: none;
}
.wy-menu-vertical li.current a {
    color: rgb(152, 143, 129);
    border-right-color: rgb(63, 69, 71);
}
.wy-menu-vertical li.current a:hover {
    background-color: rgb(47, 51, 53);
    background-image: none;
}
.wy-menu-vertical li code,
.wy-menu-vertical li .rst-content tt,
.rst-content .wy-menu-vertical li tt {
    border-color: currentcolor;
    background-color: inherit;
    background-image: inherit;
    color: inherit;
}
.wy-menu-vertical li span.toctree-expand {
    color: rgb(183, 177, 168);
}
.wy-menu-vertical li.on a,
.wy-menu-vertical li.current > a {
    color: rgb(192, 186, 178);
    background-color: rgb(26, 28, 29);
    background-image: none;
    border-color: currentcolor;
}
.wy-menu-vertical li.on a:hover,
.wy-menu-vertical li.current > a:hover {
    background-color: rgb(26, 28, 29);
    background-image: none;
}
.wy-menu-vertical li.on a:hover span.toctree-expand,
.wy-menu-vertical li.current > a:hover span.toctree-expand {
    color: rgb(152, 143, 129);
}
.wy-menu-vertical li.on a span.toctree-expand,
.wy-menu-vertical li.current > a span.toctree-expand {
    color: rgb(200, 195, 188);
}
.wy-menu-vertical li.toctree-l1.current > a {
    border-bottom-color: rgb(63, 69, 71);
    border-top-color: rgb(63, 69, 71);
}
.wy-menu-vertical li.toctree-l2 a,
.wy-menu-vertical li.toctree-l3 a,
.wy-menu-vertical li.toctree-l4 a {
    color: rgb(192, 186, 178);
}
.wy-menu-vertical li.toctree-l2.current > a {
    background-color: rgb(54, 59, 61);
    background-image: none;
}
.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a {
    background-color: rgb(54, 59, 61);
    background-image: none;
}
.wy-menu-vertical li.toctree-l2 a:hover span.toctree-expand {
    color: rgb(152, 143, 129);
}
.wy-menu-vertical li.toctree-l2 span.toctree-expand {
    color: rgb(174, 167, 156);
}
.wy-menu-vertical li.toctree-l3.current > a {
    background-color: rgb(61, 66, 69);
    background-image: none;
}
.wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a {
    background-color: rgb(61, 66, 69);
    background-image: none;
}
.wy-menu-vertical li.toctree-l3 a:hover span.toctree-expand {
    color: rgb(152, 143, 129);
}
.wy-menu-vertical li.toctree-l3 span.toctree-expand {
    color: rgb(166, 158, 146);
}
.wy-menu-vertical li ul li a {
    color: rgb(208, 204, 198);
}
.wy-menu-vertical a {
    color: rgb(208, 204, 198);
}
.wy-menu-vertical a:hover {
    background-color: rgb(57, 62, 64);
}
.wy-menu-vertical a:hover span.toctree-expand {
    color: rgb(208, 204, 198);
}
.wy-menu-vertical a:active {
    background-color: rgb(33, 102, 148);
    color: rgb(232, 230, 227);
}
.wy-menu-vertical a:active span.toctree-expand {
    color: rgb(232, 230, 227);
}
.wy-side-nav-search {
    background-color: rgb(33, 102, 148);
    color: rgb(230, 228, 225); 
}
.wy-side-nav-search input[type="text"] {
    border-color: rgb(35, 111, 160);
}
.wy-side-nav-search img {
    background-color: rgb(33, 102, 148);
}
.wy-side-nav-search > a,
.wy-side-nav-search .wy-dropdown > a {
    color: rgb(230, 228, 225);
}
.wy-side-nav-search > a:hover,
.wy-side-nav-search .wy-dropdown > a:hover {
    background-color: rgba(24, 26, 27, 0.1);
    background-image: none;
}
.wy-side-nav-search > a img.logo,
.wy-side-nav-search .wy-dropdown > a img.logo {
    background-color: transparent;
    background-image: none;
}
.wy-side-nav-search > div.version {
    color: rgba(232, 230, 227, 0.3);
}
.wy-nav .wy-menu-vertical header {
    color: rgb(84, 164, 217);
}
.wy-nav .wy-menu-vertical a {
    color: rgb(184, 178, 169);
}
.wy-nav .wy-menu-vertical a:hover {
    background-color: rgb(33, 102, 148);
    color: rgb(232, 230, 227);
}
.wy-body-for-nav {
    background-color: rgb(26, 28, 29);
    background-image: none;
}
.wy-nav-side {
    color: rgb(169, 161, 150);
    background-color: rgb(38, 41, 43);
    background-image: none;
}
.wy-nav-top {
    background-color: rgb(33, 102, 148);
    background-image: none;
    color: rgb(232, 230, 227);
}
.wy-nav-top a {
    color: rgb(232, 230, 227);
}
.wy-nav-top img {
    background-color: rgb(33, 102, 148);
}
.wy-nav-content-wrap {
    background-color: rgb(26, 28, 29);
    background-image: none;
}
.wy-body-mask {
    background-color: rgba(0, 0, 0, 0.2);
    background-image: none;
}
footer {
    color: rgb(152, 143, 129);
}
footer span.commit code,
footer span.commit .rst-content tt,
.rst-content footer span.commit tt {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    border-color: currentcolor;
    color: rgb(152, 143, 129);
}
#search-results .search li {
    border-bottom-color: rgb(56, 61, 63);
}
#search-results .search li:first-child {
    border-top-color: rgb(56, 61, 63);
}
#search-results .context {
    color: rgb(152, 143, 129);
}
.wy-body-for-nav {
    background-color: rgb(26, 28, 29);
    background-image: none;
}
@media screen and (min-width: 1100px) {
    .wy-nav-content-wrap {
        background-color: rgba(0, 0, 0, 0.05);
        background-image: none;
    }
    .wy-nav-content {
        background-color: rgb(26, 28, 29);
        background-image: none;
    }
}
.rst-versions {
    color: rgb(230, 228, 225);
    background-color: rgb(23, 24, 25);
    background-image: none;
}
.rst-versions a {
    color: rgb(84, 164, 217);
    text-decoration-color: currentcolor;
}
.rst-versions .rst-current-version {
    background-color: rgb(29, 31, 32);
    color: rgb(92, 218, 145);
}
.rst-versions .rst-current-version .fa,
.rst-versions .rst-current-version .wy-menu-vertical li span.toctree-expand,
.wy-menu-vertical li .rst-versions .rst-current-version span.toctree-expand,
.rst-versions .rst-current-version .rst-content .admonition-title,
.rst-content .rst-versions .rst-current-version .admonition-title,
.rst-versions .rst-current-version .rst-content h1 .headerlink,
.rst-content h1 .rst-versions .rst-current-version .headerlink,
.rst-versions .rst-current-version .rst-content h2 .headerlink,
.rst-content h2 .rst-versions .rst-current-version .headerlink,
.rst-versions .rst-current-version .rst-content h3 .headerlink,
.rst-content h3 .rst-versions .rst-current-version .headerlink,
.rst-versions .rst-current-version .rst-content h4 .headerlink,
.rst-content h4 .rst-versions .rst-current-version .headerlink,
.rst-versions .rst-current-version .rst-content h5 .headerlink,
.rst-content h5 .rst-versions .rst-current-version .headerlink,
.rst-versions .rst-current-version .rst-content h6 .headerlink,
.rst-content h6 .rst-versions .rst-current-version .headerlink,
.rst-versions .rst-current-version .rst-content dl dt .headerlink,
.rst-content dl dt .rst-versions .rst-current-version .headerlink,
.rst-versions .rst-current-version .rst-content p.caption .headerlink,
.rst-content p.caption .rst-versions .rst-current-version .headerlink,
.rst-versions .rst-current-version .rst-content table > caption .headerlink,
.rst-content table > caption .rst-versions .rst-current-version .headerlink,
.rst-versions .rst-current-version .rst-content .code-block-caption .headerlink,
.rst-content .code-block-caption .rst-versions .rst-current-version .headerlink,
.rst-versions .rst-current-version .rst-content tt.download span:first-child,
.rst-content tt.download .rst-versions .rst-current-version span:first-child,
.rst-versions .rst-current-version .rst-content code.download span:first-child,
.rst-content code.download .rst-versions .rst-current-version span:first-child,
.rst-versions .rst-current-version .icon {
    color: rgb(230, 228, 225);
}
.rst-versions .rst-current-version.rst-out-of-date {
    background-color: rgb(162, 33, 20);
    color: rgb(232, 230, 227);
}
.rst-versions .rst-current-version.rst-active-old-version {
    background-color: rgb(192, 156, 11);
    color: rgb(232, 230, 227);
}
.rst-versions .rst-other-versions {
    color: rgb(152, 143, 129);
}
.rst-versions .rst-other-versions hr {
    border-color: rgb(119, 111, 98) currentcolor currentcolor;
}
.rst-versions .rst-other-versions dd a {
    color: rgb(230, 228, 225);
}
.rst-versions.rst-badge {
    border-color: currentcolor;
}
.rst-content abbr[title] {
    text-decoration-color: currentcolor;
}
.rst-content.style-external-links a.reference.external::after {
    color: rgb(184, 178, 169); 
}
.rst-content pre.literal-block, .rst-content div[class^="highlight"] {
    border-color: rgb(56, 61, 63); 
}
.rst-content pre.literal-block div[class^="highlight"], .rst-content div[class^="highlight"] div[class^="highlight"] {
    border-color: currentcolor;
}
.rst-content .linenodiv pre {
    border-right-color: rgb(54, 59, 61);
}
.rst-content .admonition table {
    border-color: rgba(140, 130, 115, 0.1);
}
.rst-content .admonition table td,
.rst-content .admonition table th {
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(140, 130, 115, 0.1) !important;
}
.rst-content .section ol.loweralpha,
.rst-content .section ol.loweralpha li {
    list-style-image: none;
}
.rst-content .section ol.upperalpha,
.rst-content .section ol.upperalpha li {
    list-style-image: none;
}
.rst-content .toc-backref {
    color: rgb(192, 186, 178);
}
.rst-content .sidebar {
    background-color: rgb(27, 36, 36);
    background-image: none;
    border-color: rgb(56, 61, 63);
}
.rst-content .sidebar .sidebar-title {
    background-color: rgb(40, 43, 45);
    background-image: none;
}
.rst-content .highlighted {
    background-color: rgb(192, 156, 11);
    background-image: none;
}
.rst-content table.docutils.citation,
.rst-content table.docutils.footnote {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    border-color: currentcolor;
    color: rgb(152, 143, 129);
}
.rst-content table.docutils.citation td,
.rst-content table.docutils.citation tr,
.rst-content table.docutils.footnote td,
.rst-content table.docutils.footnote tr {
    border-color: currentcolor;
    background-color: transparent !important;
}
.rst-content table.docutils.citation tt,
.rst-content table.docutils.citation code,
.rst-content table.docutils.footnote tt,
.rst-content table.docutils.footnote code {
    color: rgb(178, 172, 162);
}
.rst-content table.docutils th {
    border-color: rgb(56, 61, 63);
}
.rst-content table.field-list {
    border-color: currentcolor;
}
.rst-content table.field-list td {
    border-color: currentcolor;
}
.rst-content tt,
.rst-content tt,
.rst-content code {
    color: rgb(232, 230, 227);
}
.rst-content tt.literal,
.rst-content tt.literal,
.rst-content code.literal {
    color: rgb(233, 88, 73);
}
.rst-content tt.xref,
a .rst-content tt,
.rst-content tt.xref,
.rst-content code.xref,
a .rst-content tt,
a .rst-content code {
    color: rgb(192, 186, 178);
}
.rst-content a tt,
.rst-content a tt,
.rst-content a code {
    color: rgb(84, 164, 217);
}
.rst-content dl:not(.docutils) dt {
    background-color: rgb(32, 35, 36);
    background-image: none;
    color: rgb(84, 164, 217);
    border-top-color: rgb(28, 89, 128);
}
.rst-content dl:not(.docutils) dt::before {
    color: rgb(109, 178, 223);
}
.rst-content dl:not(.docutils) dt .headerlink {
    color: rgb(192, 186, 178);
}
.rst-content dl:not(.docutils) dl dt {
    border-color: currentcolor currentcolor currentcolor rgb(62, 68, 70);
    background-color: rgb(32, 35, 37);
    background-image: none;
    color: rgb(178, 172, 162);
}
.rst-content dl:not(.docutils) dl dt .headerlink {
    color: rgb(192, 186, 178);
}
.rst-content dl:not(.docutils) tt.descname,
.rst-content dl:not(.docutils) tt.descclassname,
.rst-content dl:not(.docutils) tt.descname,
.rst-content dl:not(.docutils) code.descname,
.rst-content dl:not(.docutils) tt.descclassname,
.rst-content dl:not(.docutils) code.descclassname {
    background-color: transparent;
    border-color: currentcolor;
}
.rst-content dl:not(.docutils) .optional {
    color: rgb(232, 230, 227);
}
.rst-content .viewcode-link,
.rst-content .viewcode-back {
    color: rgb(92, 218, 145);
}
.rst-content tt.download,
.rst-content code.download {
    background-color: inherit;
    background-image: inherit;
    color: inherit;
    border-color: inherit;
}
.rst-content .guilabel {
    border-color: rgb(27, 84, 122);
    background-color: rgb(32, 35, 36); background-image: none; 
}
span[id*="MathJax-Span"] {
    color: rgb(192, 186, 178);
}
.highlight .hll {
    background-color: rgb(82, 82, 0);
}
.highlight {
    background-color: rgb(61, 82, 0);
    background-image: none;
}
.highlight .c {
    color: rgb(119, 179, 195);
}
.highlight .err {
    border-color: rgb(179, 0, 0);
}
.highlight .k {
    color: rgb(126, 255, 163);
}
.highlight .o {
    color: rgb(168, 160, 149);
}
.highlight .ch {
    color: rgb(119, 179, 195);
}
.highlight .cm {
    color: rgb(119, 179, 195);
}
.highlight .cp {
    color: rgb(126, 255, 163);
}
.highlight .cpf {
    color: rgb(119, 179, 195);
}
.highlight .c1 {
    color: rgb(119, 179, 195);
}
.highlight .cs {
    color: rgb(119, 179, 195);
    background-color: rgb(60, 0, 0);
}
.highlight .gd {
    color: rgb(255, 92, 92);
}
.highlight .gr {
    color: rgb(255, 26, 26);
}
.highlight .gh {
    color: rgb(127, 174, 255);
}
.highlight .gi {
    color: rgb(92, 255, 92);
}
.highlight .go {
    color: rgb(200, 195, 188);
}
.highlight .gp {
    color: rgb(246, 147, 68);
}
.highlight .gu {
    color: rgb(255, 114, 255);
}
.highlight .gt {
    color: rgb(71, 160, 255);
}
.highlight .kc {
    color: rgb(126, 255, 163);
}
.highlight .kd {
    color: rgb(126, 255, 163);
}
.highlight .kn {
    color: rgb(126, 255, 163);
}
.highlight .kp {
    color: rgb(126, 255, 163);
}
.highlight .kr {
    color: rgb(126, 255, 163);
}
.highlight .kt {
    color: rgb(255, 137, 103);
}
.highlight .m {
    color: rgb(125, 222, 174);
}
.highlight .s {
    color: rgb(123, 166, 202);
}
.highlight .na {
    color: rgb(123, 166, 202);
}
.highlight .nb {
    color: rgb(126, 255, 163);
}
.highlight .nc {
    color: rgb(81, 194, 242);
}
.highlight .no {
    color: rgb(103, 177, 215);
}
.highlight .nd {
    color: rgb(178, 172, 162);
}
.highlight .ni {
    color: rgb(217, 100, 73);
}
.highlight .ne {
    color: rgb(126, 255, 163);
}
.highlight .nf {
    color: rgb(131, 186, 249);
}
.highlight .nl {
    color: rgb(137, 193, 255);
}
.highlight .nn {
    color: rgb(81, 194, 242);
}
.highlight .nt {
    color: rgb(138, 191, 249);
}
.highlight .nv {
    color: rgb(190, 103, 215);
}
.highlight .ow {
    color: rgb(126, 255, 163);
}
.highlight .w {
    color: rgb(189, 183, 175);
}
.highlight .mb {
    color: rgb(125, 222, 174);
}
.highlight .mf {
    color: rgb(125, 222, 174);
}
.highlight .mh {
    color: rgb(125, 222, 174);
}
.highlight .mi {
    color: rgb(125, 222, 174);
}
.highlight .mo {
    color: rgb(125, 222, 174);
}
.highlight .sa {
    color: rgb(123, 166, 202);
}
.highlight .sb {
    color: rgb(123, 166, 202);
}
.highlight .sc {
    color: rgb(123, 166, 202);
}
.highlight .dl {
    color: rgb(123, 166, 202);
}
.highlight .sd {
    color: rgb(123, 166, 202);
}
.highlight .s2 {
    color: rgb(123, 166, 202);
}
.highlight .se {
    color: rgb(123, 166, 202);
}
.highlight .sh {
    color: rgb(123, 166, 202);
}
.highlight .si {
    color: rgb(117, 168, 209);
}
.highlight .sx {
    color: rgb(246, 147, 68);
}
.highlight .sr {
    color: rgb(133, 182, 224);
}
.highlight .s1 {
    color: rgb(123, 166, 202);
}
.highlight .ss {
    color: rgb(188, 230, 128);
}
.highlight .bp {
    color: rgb(126, 255, 163);
}
.highlight .fm {
    color: rgb(131, 186, 249);
}
.highlight .vc {
    color: rgb(190, 103, 215);
}
.highlight .vg {
    color: rgb(190, 103, 215);
}
.highlight .vi {
    color: rgb(190, 103, 215);
}
.highlight .vm {
    color: rgb(190, 103, 215);
}
.highlight .il {
    color: rgb(125, 222, 174);
}
.rst-other-versions a {
    border-color: currentcolor;
}
.ethical-sidebar .ethical-image-link,
.ethical-footer .ethical-image-link {
    border-color: currentcolor;
}
.ethical-sidebar,
.ethical-footer {
    background-color: rgb(34, 36, 38);
    border-color: rgb(62, 68, 70);
    color: rgb(226, 223, 219);
}
.ethical-sidebar ul {
    list-style-image: none;
}
.ethical-sidebar ul li {
    background-color: rgb(5, 77, 121);
    color: rgb(232, 230, 227);
}
.ethical-sidebar a,
.ethical-sidebar a:visited,
.ethical-sidebar a:hover,
.ethical-sidebar a:active,
.ethical-footer a,
.ethical-footer a:visited,
.ethical-footer a:hover,
.ethical-footer a:active {
    color: rgb(226, 223, 219);
    text-decoration-color: currentcolor !important;
    border-bottom-color: currentcolor !important;
}
.ethical-callout a {
    color: rgb(161, 153, 141) !important;
    text-decoration-color: currentcolor !important;
}
.ethical-fixedfooter {
    background-color: rgb(34, 36, 38);
    border-top-color: rgb(66, 72, 74);
    color: rgb(192, 186, 178);
}
.ethical-fixedfooter .ethical-text::before {
    background-color: rgb(61, 140, 64);
    color: rgb(232, 230, 227);
}
.ethical-fixedfooter .ethical-callout {
    color: rgb(168, 160, 149);
}
.ethical-fixedfooter a,
.ethical-fixedfooter a:hover,
.ethical-fixedfooter a:active,
.ethical-fixedfooter a:visited {
    color: rgb(192, 186, 178);
    text-decoration-color: currentcolor;
}
.ethical-rtd .ethical-sidebar {
    color: rgb(184, 178, 169);
}
.ethical-alabaster a.ethical-image-link {
    border-color: currentcolor !important;
}
.ethical-dark-theme .ethical-sidebar {
    background-color: rgb(58, 62, 65);
    border-color: rgb(75, 81, 84);
    color: rgb(193, 188, 180) !important;
}
.ethical-dark-theme a,
.ethical-dark-theme a:visited {
    color: rgb(216, 213, 208) !important;
    border-bottom-color: currentcolor !important;
}
.ethical-dark-theme .ethical-callout a {
    color: rgb(184, 178, 169) !important;
}
.keep-us-sustainable {
    border-color: rgb(87, 133, 38);
}
.keep-us-sustainable a,
.keep-us-sustainable a:hover,
.keep-us-sustainable a:visited {
    text-decoration-color: currentcolor;
}
.wy-body-for-nav .keep-us-sustainable {
    color: rgb(184, 178, 169);
}
.wy-body-for-nav .keep-us-sustainable a {
    color: rgb(222, 219, 215);
}

@hugovk hugovk mentioned this issue Oct 12, 2020
Merged
@hugovk
Copy link

hugovk commented Nov 5, 2020 •
edited

https://pillow.readthedocs.io/ uses sphinx_rtd_theme and now has dark mode! I used the Dark Reader extension, exported the CSS, wrapped it in @media (prefers-color-scheme: dark) { ... } and added to our config.

See python-pillow/Pillow#4968 for details (which also includes a bit of tweaking for black-on-white/transparent images that others can omit).

(Crossposted at readthedocs/readthedocs.org#3819 (comment).)

Edit: Pillow has since switched to Furo: python-pillow/Pillow#6158.

@hugovk hugovk mentioned this issue Nov 5, 2020
Closed
@mgeier mgeier mentioned this issue Jan 21, 2021
Open
@lifeBalance
Copy link

The Godot documentation is a gorgeous example of a dark theme. It's almost perfect.
https://docs.godotengine.org/en/stable/index.html

@Bibo-Joshi Bibo-Joshi mentioned this issue Apr 23, 2021
Merged
@coding-to-music coding-to-music mentioned this issue May 17, 2021
Open
@Zethson
Copy link

Zethson commented May 20, 2021

Just saw https://github.com/MrDogeBro/sphinx_rtd_dark_mode

@janbrasna janbrasna mentioned this issue Nov 21, 2021
Open
@mendax1234
Copy link

So, does the official rtd theme add dark mode? If not , why don't they add dark mode?

@rohit-kumar-j
Copy link

@Zethson , sphinx_rtd_dark_mode works well! Thanks!

@benjaoming benjaoming mentioned this issue Feb 20, 2023
Closed
@astrojuanlu astrojuanlu mentioned this issue Jun 15, 2023
Merged
5 tasks
@aqeelat
Copy link

aqeelat commented Jun 29, 2023

Any updates on this issue?

@mendax1234
Copy link

Any updates on this issue?

Also want to know is there any update?

@astrojuanlu astrojuanlu mentioned this issue Oct 15, 2023
Closed
@jstasiak jstasiak mentioned this issue Dec 13, 2023
Merged
jstasiak added a commit to netaddr/netaddr that referenced this issue Dec 13, 2023
@jstasiak
Change the documentation theme to Furo (#276)
91f62a3 
The default one feels a bit outdated to me, let's try this[1].

I initially wanted to go with the RTD theme but it doesn't
support dark mode natively[2].

The theme is used in Python Developer's Guide[3] and it looks
nice in my opinion.

[1] https://github.com/pradyunsg/furo#elevator-pitch
[2] readthedocs/sphinx_rtd_theme#224
[3] https://devguide.python.org/
jstasiak added a commit to python-injector/injector that referenced this issue Dec 13, 2023
@jstasiak
Change the documentation theme to Furo
959209f 
The default one feels a bit outdated to me, let's try this[1].

I initially wanted to go with the RTD theme but it doesn't
support dark mode natively[2].

The theme is used in Python Developer's Guide[3] and it looks
nice in my opinion.

[1] https://github.com/pradyunsg/furo#elevator-pitch
[2] readthedocs/sphinx_rtd_theme#224
[3] https://devguide.python.org/
jstasiak added a commit to python-injector/injector that referenced this issue Dec 13, 2023
@jstasiak
Change the documentation theme to Furo
59a199a 
The default one feels a bit outdated to me, let's try this[1].

I initially wanted to go with the RTD theme but it doesn't
support dark mode natively[2].

The theme is used in Python Developer's Guide[3] and it looks
nice in my opinion.

[1] https://github.com/pradyunsg/furo#elevator-pitch
[2] readthedocs/sphinx_rtd_theme#224
[3] https://devguide.python.org/
@jstasiak jstasiak mentioned this issue Dec 13, 2023
Open
@gy-mate
Copy link

gy-mate commented Jan 21, 2024

@ericholscher Could sphinx_rtd_dark_mode be easily integrated to the sphinx_rtd_theme in this repo?

@ericholscher
Copy link
Member

Perhaps. @agjohnson & @humitos would be better to answer that.

@humitos
Copy link
Member

humitos commented Jan 23, 2024

I think it won't be trivial to integrate, mainly because of the amount of testing it will require with all the reST roles and Sphinx extensions supported that render correctly on the current theme. Besides, I'm sure it will be long discussions about styles and palette colors until we reach to an agreement 😄

I'd love to see a Dark mode on this theme because all the ecosystem is moving towards that direction and it's also a feature many people is asking for. However, I don't know if it makes sense to put a lot of work here before deciding if we are migrating to bootstrap or not (see #1086, #1486, #544), since we will need to duplicate the work after we made that decision.

Also, I'd like to know how much adoption that package has in the near future. Taking a look at this on PyPI stats, it seems that not that many people is adopting it compared to the standard theme:

I hope this answer clarify a little where I'm regarding whether or not integrate the Dark mode from that package at the moment 😅

@westurner
Copy link
Contributor Author

westurner commented Jan 23, 2024 via email

@westurner
Copy link
Contributor Author

westurner commented Jan 23, 2024 via email

@westurner
Copy link
Contributor Author

westurner commented Jan 23, 2024 via email

@gy-mate
Copy link

gy-mate commented Jan 23, 2024 •
edited

Thank you for your quick reply!

@humitos Yeah, bootstrap sounds like a better idea. So I guess this is dependant on #1055.

Looking forward to it!

@westurner
Copy link
Contributor Author

westurner commented Jan 23, 2024 via email

@janbrasna
Copy link

@humitos The togglable light/dark/auto(prefers-…) is a feature mainly readers, i.e. users want. And they would clearly love to see it when reading all the *.readthedocs.io content using this theme. So the download stats are somehow misleading in a way they represent individual maintainers' awareness of the plugin or their own need to use their own docs in dark mode. While the general audience benefiting from such feature for all the places the theme is used "as a default" (simply put, sphinx_rtd_theme is basically the no-brainer default to use with sphinx, that's how omnipresent it is… good job!) is vastly larger.

On the other hand the linked plugin's actual dark mode is far from perfect so not everyone is probably comfortable using it themselves. (I've spotted some unfortunate color/contrast issues just quickly glancing at the demos.)

Otherwise yes, if there are going to be releases breaking backwards compatibility or changing some of the underlying styling (or maybe even a redesign / new default theme from scratch, given the recent RTD changes in UI/style that would be lovely reflected in a sphinx theme too…) any effort put into this would need to be duplicated so it'd be better to make plans for this after any major changes that might be in cards.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Needed: design decision A core team decision is required Theme Option
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
17 participants
@ericholscher @westurner @humitos @hugovk @janbrasna @AndydeCleyre @lifeBalance @polyzen @aqeelat @gy-mate @Blendify @SuperKogito @Zethson @septatrix @rohit-kumar-j @mendax1234 and others