sphinx_rtd_theme icon indicating copy to clipboard operation
sphinx_rtd_theme copied to clipboard

Dark theme

Open westurner opened this issue 9 years ago • 35 comments

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

westurner avatar Jul 23 '15 21:07 westurner

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

Blendify avatar Dec 17 '17 20:12 Blendify

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

westurner avatar Dec 17 '17 22:12 westurner

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.

Blendify avatar Dec 18 '17 00:12 Blendify

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 [email protected] 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 https://github.com/rtfd/sphinx_rtd_theme/issues/224#issuecomment-352299549, or mute the thread https://github.com/notifications/unsubscribe-auth/AADGy_sWzT15TJxpDtKkwUzeiUiBuThSks5tBbRGgaJpZM4Feu8R .

westurner avatar Dec 18 '17 03:12 westurner

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 avatar Dec 18 '17 03:12 westurner

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

westurner avatar Dec 18 '17 04:12 westurner

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

SuperKogito avatar Feb 20 '19 22:02 SuperKogito

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 avatar Feb 20 '19 23:02 ericholscher

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

westurner avatar Feb 21 '19 04:02 westurner

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 https://github.com/sphinx-doc/sphinx/issues/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 https://github.com/python/python-docs-theme/pull/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.

septatrix avatar Mar 08 '20 22:03 septatrix

@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

aqeelat avatar Jun 11 '20 17:06 aqeelat

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?

septatrix avatar Jun 16 '20 18:06 septatrix

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

  • https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
  • https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp

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

westurner avatar Jun 16 '20 19:06 westurner

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

polyzen avatar Jun 16 '20 20:06 polyzen

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.

septatrix avatar Jun 16 '20 21:06 septatrix

Would be great to see something like https://github.com/python/python-docs-theme/pull/44 for sphinx_rtd_theme!

hugovk avatar Sep 27 '20 10:09 hugovk

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

AndydeCleyre avatar Oct 05 '20 20:10 AndydeCleyre

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 https://github.com/python-pillow/Pillow/pull/4968 for details (which also includes a bit of tweaking for black-on-white/transparent images that others can omit).

(Crossposted at https://github.com/readthedocs/readthedocs.org/issues/3819#issuecomment-722654830.)

Edit: Pillow has since switched to Furo: https://github.com/python-pillow/Pillow/pull/6158.

hugovk avatar Nov 05 '20 21:11 hugovk

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

lifeBalance avatar Jan 24 '21 15:01 lifeBalance

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

Zethson avatar May 20 '21 10:05 Zethson

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

mendax1234 avatar Jun 28 '22 02:06 mendax1234

@Zethson , sphinx_rtd_dark_mode works well! Thanks!

rohit-kumar-j avatar Jul 09 '22 10:07 rohit-kumar-j

Any updates on this issue?

aqeelat avatar Jun 29 '23 19:06 aqeelat

Any updates on this issue?

Also want to know is there any update?

mendax1234 avatar Jun 30 '23 00:06 mendax1234

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

gy-mate avatar Jan 21 '24 22:01 gy-mate

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

ericholscher avatar Jan 22 '24 18:01 ericholscher

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 https://github.com/readthedocs/sphinx_rtd_theme/issues/1086, https://github.com/readthedocs/sphinx_rtd_theme/issues/1486, https://github.com/readthedocs/sphinx_rtd_theme/issues/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 😅

humitos avatar Jan 23 '24 09:01 humitos

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 https://github.com/readthedocs/sphinx_rtd_theme/issues/1086, #1486 https://github.com/readthedocs/sphinx_rtd_theme/issues/1486, #544 https://github.com/readthedocs/sphinx_rtd_theme/issues/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 https://github.com/readthedocs/sphinx_rtd_theme/issues/224#issuecomment-1905678982, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAMNSYVNORRI2VYLDQ3SC3YP6BURAVCNFSM4BL254I2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJQGU3DOOBZHAZA . You are receiving this because you authored the thread.Message ID: @.***>

westurner avatar Jan 23 '24 11:01 westurner

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 https://github.com/readthedocs/sphinx_rtd_theme/issues/1086, #1486 https://github.com/readthedocs/sphinx_rtd_theme/issues/1486, #544 https://github.com/readthedocs/sphinx_rtd_theme/issues/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 https://github.com/readthedocs/sphinx_rtd_theme/issues/224#issuecomment-1905678982, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAMNSYVNORRI2VYLDQ3SC3YP6BURAVCNFSM4BL254I2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJQGU3DOOBZHAZA . You are receiving this because you authored the thread.Message ID: @.***>

westurner avatar Jan 23 '24 11:01 westurner

  • [ ] 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 https://github.com/readthedocs/sphinx_rtd_theme/issues/1086, #1486 https://github.com/readthedocs/sphinx_rtd_theme/issues/1486, #544 https://github.com/readthedocs/sphinx_rtd_theme/issues/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 https://github.com/readthedocs/sphinx_rtd_theme/issues/224#issuecomment-1905678982, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAMNSYVNORRI2VYLDQ3SC3YP6BURAVCNFSM4BL254I2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJQGU3DOOBZHAZA . You are receiving this because you authored the thread.Message ID: @.***>

westurner avatar Jan 23 '24 11:01 westurner