Dark theme

Question

Dark theme

Opened this issue 9 years ago · 35 comments

westurner commented 9 years ago

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

Accessibility
OS
X, Compiz
Browser: Deluminate, High Contrast, {...}
https://wrdrd.com/docs/tools/#deluminate

Answer 1 · 2017-12-17T20:30:57.000Z

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

Answer 2 · 2017-12-17T22:28:27.000Z

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

Answer 3 · 2017-12-18T00:39:31.000Z

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.

Answer 4 · 2017-12-18T03:34:49.000Z

I think that we should change the sidebar color to accomodate users with accessibility needs.

…

On Sun, Dec 17, 2017 at 7:39 PM, Aaron Carlisle ***@***.***> wrote: 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. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#224 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADGy_sWzT15TJxpDtKkwUzeiUiBuThSks5tBbRGgaJpZM4Feu8R> .

Answer 5 · 2017-12-18T03:38:23.000Z

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.

Answer 6 · 2017-12-18T04:08:05.000Z

These are a bit easier on the eyes; but definitely aren't as polished as the current theme (or even within appropriate chromatic ranges):

.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;
}

Answer 7 · 2019-02-20T22:51:20.000Z

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 :)

Answer 8 · 2019-02-20T23:03:12.000Z

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.

Answer 9 · 2019-02-21T04:23:19.000Z

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."

Answer 10 · 2020-03-08T22:54:09.000Z

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.

Answer 11 · 2020-06-11T17:31:00.000Z

@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

Answer 12 · 2020-06-16T18:28:53.000Z

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?

Answer 13 · 2020-06-16T19:42:34.000Z

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?

Answer 14 · 2020-06-16T20:37:20.000Z

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

Answer 15 · 2020-06-16T21:12:14.000Z

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.

Answer 16 · 2020-09-27T10:26:39.000Z

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

Answer 17 · 2020-10-05T20:22:14.000Z

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

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);
}

Answer 18 · 2020-11-05T21:26:01.000Z

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.

Answer 19 · 2021-01-24T15:21:30.000Z

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

Answer 20 · 2021-05-20T10:42:27.000Z

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

Answer 21 · 2022-06-28T02:54:25.000Z

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

Answer 22 · 2022-07-09T10:59:42.000Z

@Zethson , sphinx_rtd_dark_mode works well! Thanks!

Answer 23 · 2023-06-29T19:31:15.000Z

Any updates on this issue?

Answer 24 · 2023-06-30T00:47:01.000Z

Any updates on this issue?

Also want to know is there any update?

Answer 25 · 2024-01-21T22:14:45.000Z

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

Answer 26 · 2024-01-22T18:53:36.000Z

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

Answer 27 · 2024-01-23T09:49:49.000Z

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:

dark mode: https://pypistats.org/packages/sphinx-rtd-dark-mode
standard: https://pypistats.org/packages/sphinx-rtd-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 😅

Answer 28 · 2024-01-23T11:31:22.000Z

GitHub's vscode theme set includes [Dark] [Dimmed] and [Colorblind-friendly] variants. (You can test e.g. vscode themes with https://vscode.dev/ + Extensions/Plugins > "GitHub theme") Most users aren't aware that there's an additional package to install to get dark mode. If there is to be delay instead of just merging something that works and passes tests now, The RTD default theme color palette could have a Colorblind-friendly variant and a Dimmed variant. - [ ] accessible UI element to manually select [dark] [dimmed] [colorblind] What is the best color scheme for color blind people? From "The best charts for color blind viewers" https://www.datylon.com/blog/data-visualization-for-colorblind-readers (2022):

The first rule of making a palette for colorblind – avoid combining red

and green. So if you're aiming to create a color blind-friendly palette try to use only two basic hues: blue and red (orange and yellow will also fit). The other colors should be made out of these two hues. Matplotlib has research on this IIRC: - https://www.google.com/search?q=matplotlib+viridis+colorblind - matplotlib perceptually uniform chart color maps: - viridis - plasma - inferno - magma - cividis (2018) - twilight - https://matplotlib.org/stable/users/explain/colors/colormaps.html#grayscale-conversion demos all of the matplotlib built-in perceptually uniform color maps - https://matplotlib.org/stable/users/explain/colors/colormaps.html : For many applications, a perceptually uniform colormap is the best choice; i.e. a colormap in which equal steps in data are perceived as equal steps in the color space. Researchers have found that the human brain perceives changes in the lightness parameter as changes in the data much better than, for example, changes in hue. Therefore, colormaps which have monotonically increasing lightness through the colormap will be better interpreted by the viewer. Wonderful examples of perceptually uniform colormaps can be found in the Third-party colormaps section as well. - https://matplotlib.org/mpl-third-party/#colormaps-and-styles Ctrl-F "perceptually uniform": - https://matplotlib.org/cmocean - https://github.com/callumrollo/cmcrameri - https://colorcet.holoviz.org/

…

On Tue, Jan 23, 2024, 4:50 AM Manuel Kaufmann ***@***.***> wrote: 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 <#1086>, #1486 <#1486>, #544 <#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: - dark mode: https://pypistats.org/packages/sphinx-rtd-dark-mode - standard: https://pypistats.org/packages/sphinx-rtd-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 😅 — Reply to this email directly, view it on GitHub <#224 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAMNSYVNORRI2VYLDQ3SC3YP6BURAVCNFSM4BL254I2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJQGU3DOOBZHAZA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

Answer 29 · 2024-01-23T11:40:38.000Z

matplotlib/viscm calls colorspacious to check color spaces with multiple criteria: ## viscm - Src: https://github.com/matplotlib/viscm - pypi: https://pypi.org/project/viscm/ : A tool for visualizing and designing colormaps using colorspacious and matplotlib ## colorspacious - Src: https://github.com/njsmith/colorspacious - pypi: https://pypi.org/project/colorspacious/ : Colorspacious is a powerful, accurate, and easy-to-use library for performing colorspace conversions. In addition to the most common standard colorspaces (sRGB, XYZ, xyY, CIELab, CIELCh), we also include: color vision deficiency (“color blindness”) simulations using the approach of Machado et al (2009); a complete implementation of CIECAM02; and the perceptually uniform CAM02-UCS / CAM02-LCD / CAM02-SCD spaces proposed by Luo et al (2006) - https://bids.github.io/colormap/ : Update: These colormaps have been merged into the development version of Matplotlib, all of them will be included in matplotlib 1.5, and "option D" (now called "viridis") will be the new default colormap in matplotlib 2.0. If you just want the colormaps themselves, they're available in a single file here under a CC0 "no rights reserved" license. Third parties have also made viridis available in R and Matlab and JavaScript / D3. Below is the talk presented at SciPy2015 that outlines the whole story.

…

On Tue, Jan 23, 2024, 6:31 AM Wes Turner ***@***.***> wrote: GitHub's vscode theme set includes [Dark] [Dimmed] and [Colorblind-friendly] variants. (You can test e.g. vscode themes with https://vscode.dev/ + Extensions/Plugins > "GitHub theme") Most users aren't aware that there's an additional package to install to get dark mode. If there is to be delay instead of just merging something that works and passes tests now, The RTD default theme color palette could have a Colorblind-friendly variant and a Dimmed variant. - [ ] accessible UI element to manually select [dark] [dimmed] [colorblind] What is the best color scheme for color blind people? From "The best charts for color blind viewers" https://www.datylon.com/blog/data-visualization-for-colorblind-readers (2022): > The first rule of making a palette for colorblind – avoid combining red and green. So if you're aiming to create a color blind-friendly palette try to use only two basic hues: blue and red (orange and yellow will also fit). The other colors should be made out of these two hues. Matplotlib has research on this IIRC: - https://www.google.com/search?q=matplotlib+viridis+colorblind - matplotlib perceptually uniform chart color maps: - viridis - plasma - inferno - magma - cividis (2018) - twilight - https://matplotlib.org/stable/users/explain/colors/colormaps.html#grayscale-conversion demos all of the matplotlib built-in perceptually uniform color maps - https://matplotlib.org/stable/users/explain/colors/colormaps.html : > For many applications, a perceptually uniform colormap is the best choice; i.e. a colormap in which equal steps in data are perceived as equal steps in the color space. Researchers have found that the human brain perceives changes in the lightness parameter as changes in the data much better than, for example, changes in hue. Therefore, colormaps which have monotonically increasing lightness through the colormap will be better interpreted by the viewer. Wonderful examples of perceptually uniform colormaps can be found in the Third-party colormaps section as well. - https://matplotlib.org/mpl-third-party/#colormaps-and-styles Ctrl-F "perceptually uniform": - https://matplotlib.org/cmocean - https://github.com/callumrollo/cmcrameri - https://colorcet.holoviz.org/ On Tue, Jan 23, 2024, 4:50 AM Manuel Kaufmann ***@***.***> wrote: > 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 > <#1086>, #1486 > <#1486>, #544 > <#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: > > - dark mode: https://pypistats.org/packages/sphinx-rtd-dark-mode > - standard: https://pypistats.org/packages/sphinx-rtd-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 😅 > > — > Reply to this email directly, view it on GitHub > <#224 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAAMNSYVNORRI2VYLDQ3SC3YP6BURAVCNFSM4BL254I2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJQGU3DOOBZHAZA> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> >

Answer 30 · 2024-01-23T11:42:07.000Z

- [ ] a *Computer Modern* font option in the RTD theme would be competitive with Jupyter notebooks that also have Computer Modern but are not PDFs

…

On Tue, Jan 23, 2024, 6:40 AM Wes Turner ***@***.***> wrote: matplotlib/viscm calls colorspacious to check color spaces with multiple criteria: ## viscm - Src: https://github.com/matplotlib/viscm - pypi: https://pypi.org/project/viscm/ : > A tool for visualizing and designing colormaps using colorspacious and matplotlib ## colorspacious - Src: https://github.com/njsmith/colorspacious - pypi: https://pypi.org/project/colorspacious/ : > Colorspacious is a powerful, accurate, and easy-to-use library for performing colorspace conversions. > > In addition to the most common standard colorspaces (sRGB, XYZ, xyY, CIELab, CIELCh), we also include: color vision deficiency (“color blindness”) simulations using the approach of Machado et al (2009); a complete implementation of CIECAM02; and the perceptually uniform CAM02-UCS / CAM02-LCD / CAM02-SCD spaces proposed by Luo et al (2006) - https://bids.github.io/colormap/ : > Update: These colormaps have been merged into the development version of Matplotlib, all of them will be included in matplotlib 1.5, and "option D" (now called "viridis") will be the new default colormap in matplotlib 2.0. If you just want the colormaps themselves, they're available in a single file here under a CC0 "no rights reserved" license. Third parties have also made viridis available in R and Matlab and JavaScript / D3. Below is the talk presented at SciPy2015 that outlines the whole story. On Tue, Jan 23, 2024, 6:31 AM Wes Turner ***@***.***> wrote: > GitHub's vscode theme set includes [Dark] [Dimmed] and > [Colorblind-friendly] variants. > > (You can test e.g. vscode themes with https://vscode.dev/ + > Extensions/Plugins > "GitHub theme") > > Most users aren't aware that there's an additional package to install to > get dark mode. > > If there is to be delay instead of just merging something that works and > passes tests now, > > The RTD default theme color palette could have a Colorblind-friendly > variant and a Dimmed variant. > > - [ ] accessible UI element to manually select [dark] [dimmed] > [colorblind] > > What is the best color scheme for color blind people? > > From "The best charts for color blind viewers" > https://www.datylon.com/blog/data-visualization-for-colorblind-readers > (2022): > > > The first rule of making a palette for colorblind – avoid combining red > and green. So if you're aiming to create a color blind-friendly palette try > to use only two basic hues: blue and red (orange and yellow will also fit). > The other colors should be made out of these two hues. > > > Matplotlib has research on this IIRC: > - https://www.google.com/search?q=matplotlib+viridis+colorblind > - matplotlib perceptually uniform chart color maps: > - viridis > - plasma > - inferno > - magma > - cividis (2018) > - twilight > > - > https://matplotlib.org/stable/users/explain/colors/colormaps.html#grayscale-conversion > demos all of the matplotlib built-in perceptually uniform color maps > > - https://matplotlib.org/stable/users/explain/colors/colormaps.html : > > For many applications, a perceptually uniform colormap is the best > choice; i.e. a colormap in which equal steps in data are perceived as equal > steps in the color space. Researchers have found that the human brain > perceives changes in the lightness parameter as changes in the data much > better than, for example, changes in hue. Therefore, colormaps which have > monotonically increasing lightness through the colormap will be better > interpreted by the viewer. Wonderful examples of perceptually uniform > colormaps can be found in the Third-party colormaps section as well. > > > - https://matplotlib.org/mpl-third-party/#colormaps-and-styles Ctrl-F > "perceptually uniform": > - https://matplotlib.org/cmocean > - https://github.com/callumrollo/cmcrameri > - https://colorcet.holoviz.org/ > > > On Tue, Jan 23, 2024, 4:50 AM Manuel Kaufmann ***@***.***> > wrote: > >> 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 >> <#1086>, #1486 >> <#1486>, #544 >> <#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: >> >> - dark mode: https://pypistats.org/packages/sphinx-rtd-dark-mode >> - standard: https://pypistats.org/packages/sphinx-rtd-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 😅 >> >> — >> Reply to this email directly, view it on GitHub >> <#224 (comment)>, >> or unsubscribe >> <https://github.com/notifications/unsubscribe-auth/AAAMNSYVNORRI2VYLDQ3SC3YP6BURAVCNFSM4BL254I2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJQGU3DOOBZHAZA> >> . >> You are receiving this because you authored the thread.Message ID: >> ***@***.***> >> >

Answer 31 · 2024-01-23T16:51:19.000Z

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!

Answer 32 · 2024-01-23T23:47:34.000Z

GIMP and Inkscape support color palettes in .gpl format. "Scientific colour maps" User Guide lists a number of supported chart and design tools including GIMP/Inkscape. https://www.fabiocrameri.ch/colourmaps-userguide/ The [Bootstrap] CSS color palette could look good with any of these perceptually uniform, Colorblind-friendly colorspaces. - [ ] provide IDK YAML and.gpl copies of the RTD Light and Dark mode color palettes - [ ] tool to read CSS colors (and/or CSS3 variables)

…

On Tue, Jan 23, 2024, 6:31 AM Wes Turner ***@***.***> wrote: GitHub's vscode theme set includes [Dark] [Dimmed] and [Colorblind-friendly] variants. (You can test e.g. vscode themes with https://vscode.dev/ + Extensions/Plugins > "GitHub theme") Most users aren't aware that there's an additional package to install to get dark mode. If there is to be delay instead of just merging something that works and passes tests now, The RTD default theme color palette could have a Colorblind-friendly variant and a Dimmed variant. - [ ] accessible UI element to manually select [dark] [dimmed] [colorblind] What is the best color scheme for color blind people? From "The best charts for color blind viewers" https://www.datylon.com/blog/data-visualization-for-colorblind-readers (2022): > The first rule of making a palette for colorblind – avoid combining red and green. So if you're aiming to create a color blind-friendly palette try to use only two basic hues: blue and red (orange and yellow will also fit). The other colors should be made out of these two hues. Matplotlib has research on this IIRC: - https://www.google.com/search?q=matplotlib+viridis+colorblind - matplotlib perceptually uniform chart color maps: - viridis - plasma - inferno - magma - cividis (2018) - twilight - https://matplotlib.org/stable/users/explain/colors/colormaps.html#grayscale-conversion demos all of the matplotlib built-in perceptually uniform color maps - https://matplotlib.org/stable/users/explain/colors/colormaps.html : > For many applications, a perceptually uniform colormap is the best choice; i.e. a colormap in which equal steps in data are perceived as equal steps in the color space. Researchers have found that the human brain perceives changes in the lightness parameter as changes in the data much better than, for example, changes in hue. Therefore, colormaps which have monotonically increasing lightness through the colormap will be better interpreted by the viewer. Wonderful examples of perceptually uniform colormaps can be found in the Third-party colormaps section as well. - https://matplotlib.org/mpl-third-party/#colormaps-and-styles Ctrl-F "perceptually uniform": - https://matplotlib.org/cmocean - https://github.com/callumrollo/cmcrameri - https://colorcet.holoviz.org/ On Tue, Jan 23, 2024, 4:50 AM Manuel Kaufmann ***@***.***> wrote: > 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 > <#1086>, #1486 > <#1486>, #544 > <#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: > > - dark mode: https://pypistats.org/packages/sphinx-rtd-dark-mode > - standard: https://pypistats.org/packages/sphinx-rtd-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 😅 > > — > Reply to this email directly, view it on GitHub > <#224 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAAMNSYVNORRI2VYLDQ3SC3YP6BURAVCNFSM4BL254I2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJQGU3DOOBZHAZA> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> >

Answer 33 · 2024-03-15T18:43:25.000Z

@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.

Answer 34 · 2024-08-13T05:51:34.000Z

Nearly all competitors have a light/dark theme toggle these days

Answer 35 · 2024-08-13T17:17:32.000Z

A template parameter to add or not add a light background under img tags, with padding and IDK CSS3 rounding, might help with transparent images that are otherwise displayed on browser reset.css styled backgrounds Dark Reader browser extension > Export CSS functionality: darkreader/darkreader#13 (comment) If you minimize color contrast between the sidebar and the page content, when a user inverts the app or screen colors for accessibility, it's still too bright because inverting (blk,wh) yields (wh,blk). Dark Reader has a color contrast slider and a remove-page-background feature IIRC. matplotlib cmaps are colorblind friendly; viridis is the new default chart plot color scheme in matplotlib 2.0, https://bids.github.io/colormap/ And there's a tool called viscmfor colormaps:: https://github.com/matplotlib/viscm :

A tool for visualizing and designing colormaps using colorspacious and

matplotlib 90s-style pastel backgrounds for accessible text readability ftw Actually, what are good open source tools for accessibility scoring? Does Lighthouse score text contrast; for example on tiled backgrounds?

…

On Tue, Aug 13, 2024, 1:51 AM Dylan Hunt ***@***.***> wrote: Nearly all competitors have a light/dark theme toggle these days — Reply to this email directly, view it on GitHub <#224 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAMNS4UOHL7LLC3SAET2KDZRGNHZAVCNFSM4BL254I2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMRYGUZTQOJSHA3A> . You are receiving this because you authored the thread.Message ID: ***@***.***>