From 1b7a30414923662052f438aa5c5b2f7679eb89e8 Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Fri, 8 Apr 2022 22:49:45 -0700 Subject: [PATCH 1/2] initial docs dark mode css --- docs/_static/css/custom.css | 235 ++++++++++++++++++++++++++++++++++-- 1 file changed, 227 insertions(+), 8 deletions(-) diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css index 9ab598fde..f4338c163 100644 --- a/docs/_static/css/custom.css +++ b/docs/_static/css/custom.css @@ -130,7 +130,10 @@ pre, .code, .rst-content .linenodiv pre, .rst-content div[class^=highlight] pre, /* Links */ -a, .wy-menu-vertical a, a.icon.icon-home { +a, a:visited, +.wy-menu-vertical a, +a.icon.icon-home, +.wy-menu-vertical li.toctree-l1.current > a.current { color: #7253ed; text-decoration: none; } @@ -155,8 +158,9 @@ a:hover, .wy-breadcrumbs-aside a { background-size: 1px 1px; } -.wy-menu-vertical a:hover { - background-color: #ebedf5; +.wy-menu-vertical a:hover, +.wy-menu-vertical li.current a:hover { + background: #ebedf5 !important; } .wy-menu-vertical li.toctree-l1.current>a, @@ -171,10 +175,6 @@ a:hover, .wy-breadcrumbs-aside a { background-color: inherit; } -.wy-menu-vertical li.current a:hover { - background-color: #ebedf5 !important; -} - .wy-menu-vertical li.current a { border-right: none; } @@ -211,7 +211,9 @@ a:hover, .wy-breadcrumbs-aside a { box-shadow: none; } -.rst-content .admonition-title, .wy-alert-title { +.rst-content .admonition-title, +.rst-content div.admonition, +.wy-alert-title { padding: 10px 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; @@ -221,6 +223,7 @@ a:hover, .wy-breadcrumbs-aside a { /* Search */ .wy-side-nav-search input[type=text] { border: none; + border-radius: 0; background-color: #f5f6fa; font-family: inherit; font-size: .85rem; @@ -330,3 +333,219 @@ a:hover, .wy-breadcrumbs-aside a { padding: 8px 0 0 2px; color:#7253ed; } + +.rst-content table.docutils td, +.rst-content table.docutils th, +.rst-content table.field-list td, +.rst-content table.field-list th, +.wy-table td, +.wy-table th { + padding: 8px 14px; +} + +/* Dark mode */ +@media (prefers-color-scheme: dark) { + body:not(.color-scheme-light), + .wy-nav-content { + background: #161618; + color: #abb2bf; + } + + .wy-side-nav-search > a, .wy-nav-top a, .wy-nav-top i { + color: #7253ed; + } + + .wy-side-nav-search > div.version, + #rtd-search-form:before { + color: rgba(0255, 255, 255, 0.5) + } + + .wy-nav-side, + .wy-side-nav-search, + .wy-nav-top, + .wy-side-nav-search input[type=text], + .wy-side-nav-search>a:hover { + background: #1c1c1f; + } + + .wy-side-nav-search input[type=text] { + color: #abb2bf; + } + + .wy-menu-vertical li.current li[class^=toctree-] > a { + background-color: transparent !important; + } + + .wy-menu-vertical li.toctree-l1.current>a, + .wy-menu-vertical li.current>a, + .wy-menu-vertical li.on a { + background-color: #101216; + color: #8e97a9; + } + + .wy-menu-vertical li.current li[class^="toctree-"] a { + color: #8e97a9; + } + + .wy-menu-vertical a:hover, + .wy-menu-vertical li.current a:hover { + background: #101216 !important; + } + + .wy-nav-side, + .wy-side-nav-search, + .wy-nav-top, + .wy-side-nav-search > div[role="search"], + hr { + border-color: #47494f; + } + + .wy-nav-content a.reference, .wy-nav-content a:not([class]) { + background-image: linear-gradient(#47494f 0%, #47494f 100%); + } + + .rst-content div[class^=highlight], .rst-content pre.literal-block { + background-color: #101216; + border-color: #47494f; + } + + .rst-content code, .rst-content tt, code { + background-color: #101216; + border-color: #47494f; + } + + .highlight .go { + color: inherit; + } + + .rst-content code.literal, + .rst-content tt.literal { + background-color: #47494f; + color: #abb2bf; + } + + .rst-content .btn-neutral, .rst-content .btn span.fa { + color: #abb2bf !important; + } + + .btn, .btn-neutral { + background-color: #242529 !important; + border: 1px solid #242528; + } + + .btn:hover, .btn-neutral:hover { + background-color: #101216 !important; + } + + .rst-content .btn:focus { + border: 1px solid #070708; + outline: none; + } + + .rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td, .wy-table-backed, .wy-table-odd td, .wy-table-striped tr:nth-child(2n-1) td { + background-color: #242529; + } + + .rst-content table.docutils, + .wy-table-bordered-all, + html.writer-html5 .rst-content table.docutils th { + border-color: #47494f; + } + + html.writer-html5 .rst-content table.docutils th { + color: #abb2bf; + } + + .rst-content table.docutils td, + .wy-table-bordered-all td { + border-color: #47494f; + } + + /* Ridiculous rules are taken from sphinx_rtd */ + .rst-content .admonition-title, + .wy-alert-title { + color: #abb2bf; + } + + .rst-content .hint, + .rst-content .important, + .rst-content .tip, + .rst-content .wy-alert-success, + .wy-alert.wy-alert-success { + background: #041b17; + } + + .rst-content .hint .admonition-title, + .rst-content .hint .wy-alert-title, + .rst-content .important .admonition-title, + .rst-content .important .wy-alert-title, + .rst-content .tip .admonition-title, + .rst-content .tip .wy-alert-title, + .rst-content .wy-alert-success .admonition-title, + .rst-content .wy-alert-success .wy-alert-title, + .wy-alert.wy-alert-success .rst-content .admonition-title, + .wy-alert.wy-alert-success .wy-alert-title { + background-color: #02120f; + } + + .rst-content .admonition-todo, + .rst-content .attention, + .rst-content .caution, + .rst-content .warning, + .rst-content .wy-alert-warning, + .wy-alert.wy-alert-warning { + background: #371d06; + } + + .rst-content .admonition-todo .admonition-title, + .rst-content .admonition-todo .wy-alert-title, + .rst-content .attention .admonition-title, + .rst-content .attention .wy-alert-title, + .rst-content .caution .admonition-title, + .rst-content .caution .wy-alert-title, + .rst-content .warning .admonition-title, + .rst-content .warning .wy-alert-title, + .rst-content .wy-alert-warning .admonition-title, + .rst-content .wy-alert-warning .wy-alert-title, + .rst-content .wy-alert.wy-alert-warning .admonition-title, + .wy-alert.wy-alert-warning .rst-content .admonition-title, + .wy-alert.wy-alert-warning .wy-alert-title { + background: #1b0e03; + } + + .rst-content .danger, + .rst-content .error, + .rst-content .wy-alert-danger, + .wy-alert.wy-alert-danger { + background: #1b0503; + } + + .rst-content .danger .admonition-title, + .rst-content .danger .wy-alert-title, + .rst-content .error .admonition-title, + .rst-content .error .wy-alert-title, + .rst-content .wy-alert-danger .admonition-title, + .rst-content .wy-alert-danger .wy-alert-title, + .wy-alert.wy-alert-danger .rst-content .admonition-title, + .wy-alert.wy-alert-danger .wy-alert-title { + background: #120902; + } + + .rst-content .note .admonition-title, + .rst-content .note .wy-alert-title, + .rst-content .seealso .admonition-title, + .rst-content .seealso .wy-alert-title, + .rst-content .wy-alert-info .admonition-title, + .rst-content .wy-alert-info .wy-alert-title, + .wy-alert.wy-alert-info .rst-content .admonition-title, + .wy-alert.wy-alert-info .wy-alert-title { + background: #020608; + } + + .rst-content .note, + .rst-content .seealso, + .rst-content .wy-alert-info, + .wy-alert.wy-alert-info { + background: #06141e; + } +} From 04acce49165f34c185af2074b7816dd71bd44d5b Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Sat, 9 Apr 2022 21:45:15 -0700 Subject: [PATCH 2/2] dark mode toggle, css vars --- docs/_static/css/custom.css | 493 +++++++++++++++++++----------------- docs/_static/js/darkmode.js | 47 ++++ docs/_templates/layout.html | 13 + docs/conf.py | 6 +- 4 files changed, 326 insertions(+), 233 deletions(-) create mode 100644 docs/_static/js/darkmode.js create mode 100644 docs/_templates/layout.html diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css index f4338c163..29e2ce44a 100644 --- a/docs/_static/css/custom.css +++ b/docs/_static/css/custom.css @@ -1,9 +1,67 @@ +/* Variables */ +:root { + --color-text-body: #5c5962; + --color-text-body-light: #fcfcfc; + --color-text-anchor: #7253ed; + --color-text-alt: rgba(0, 0, 0, 0.3); + --color-text-title: #27262b; + --color-text-code-inline: #e74c3c; + --color-text-code-nt: #062873; + --color-text-selection: #b19eff; + --color-bg-body: #fcfcfc; + --color-bg-body-alt: #f3f6f6; + --color-bg-side-nav: #f5f6fa; + --color-bg-side-nav-hover: #ebedf5; + --color-bg-code-block: var(--color-bg-side-nav); + --color-border: #eeebee; + --color-btn-neutral-bg: #f3f6f6; + --color-btn-neutral-bg-hover: #e5ebeb; + --color-success-title: #1abc9c; + --color-success-body: #dbfaf4; + --color-warning-title: #f0b37e; + --color-warning-body: #ffedcc; + --color-danger-title: #f29f97; + --color-danger-body: #fdf3f2; + --color-info-title: #6ab0de; + --color-info-body: #e7f2fa; +} + +.dark-mode { + --color-text-body: #abb2bf; + --color-text-body-light: #9499a2; + --color-text-alt: rgba(0255, 255, 255, 0.5); + --color-text-title: var(--color-text-anchor); + --color-text-code-inline: #abb2bf; + --color-text-code-nt: #2063f3; + --color-text-selection: #030303; + --color-bg-body: #1d1d20 !important; + --color-bg-body-alt: #131315; + --color-bg-side-nav: #18181a; + --color-bg-side-nav-hover: #101216; + --color-bg-code-block: #101216; + --color-border: #47494f; + --color-btn-neutral-bg: #242529; + --color-btn-neutral-bg-hover: #101216; + --color-success-title: #02120f; + --color-success-body: #041b17; + --color-warning-title: #1b0e03; + --color-warning-body: #371d06; + --color-danger-title: #120902; + --color-danger-body: #1b0503; + --color-info-title: #020608; + --color-info-body: #06141e; +} + +* { + transition: background-color 0.3s ease, border-color 0.3s ease; +} + /* Typography */ body { font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size: inherit; line-height: 1.4; - color: #5c5962; + color: var(--color-text-body); } h1, h2, h3, h4, h5, h6 { @@ -33,6 +91,21 @@ pre, .code, .rst-content .linenodiv pre, .rst-content div[class^=highlight] pre, line-height: 1; } +footer, footer p { + font-size: .8rem; +} + +footer .rst-footer-buttons { + font-size: 1rem; +} + +@media (max-width: 400px) { + /* break code lines on mobile */ + pre, code { + word-break: break-word; + } +} + /* Layout */ .wy-side-nav-search, .wy-menu-vertical { @@ -43,7 +116,7 @@ pre, .code, .rst-content .linenodiv pre, .rst-content div[class^=highlight] pre, z-index: 0; display: flex; flex-wrap: wrap; - background-color: #f5f6fa + background-color: var(--color-bg-side-nav); } .wy-side-scroll { @@ -64,7 +137,7 @@ pre, .code, .rst-content .linenodiv pre, .rst-content div[class^=highlight] pre, width: 248px; height: 100%; flex-direction: column; - border-right: 1px solid #eeebee; + border-right: 1px solid var(--color-border); align-items:flex-end } } @@ -92,13 +165,18 @@ pre, .code, .rst-content .linenodiv pre, .rst-content div[class^=highlight] pre, /* Colors */ +body.wy-body-for-nav, +.wy-nav-content { + background: var(--color-bg-body); +} + .wy-nav-side { - border-right: 1px solid #eeebee; + border-right: 1px solid var(--color-border); } .wy-side-nav-search, .wy-nav-top { - background: #f5f6fa; - border-bottom: 1px solid #eeebee; + background: var(--color-bg-side-nav); + border-bottom: 1px solid var(--color-border); } .wy-nav-content-wrap { @@ -106,20 +184,24 @@ pre, .code, .rst-content .linenodiv pre, .rst-content div[class^=highlight] pre, } .wy-side-nav-search > a, .wy-nav-top a, .wy-nav-top i { - color: #27262b; + color: var(--color-text-title); +} + +.wy-side-nav-search > a:hover, .wy-nav-top a:hover { + background: transparent; } .wy-side-nav-search > div.version { - color: rgba(0, 0, 0, 0.3); + color: var(--color-text-alt) } .wy-side-nav-search > div[role="search"] { - border-top: 1px solid #eeebee; + border-top: 1px solid var(--color-border); } .wy-menu-vertical li.toctree-l2.current>a, .wy-menu-vertical li.toctree-l2.current li.toctree-l3>a, .wy-menu-vertical li.toctree-l3.current>a, .wy-menu-vertical li.toctree-l3.current li.toctree-l4>a { - background: #f5f6fa; + background: var(--color-bg-side-nav); } .rst-content .highlighted { @@ -128,26 +210,140 @@ pre, .code, .rst-content .linenodiv pre, .rst-content div[class^=highlight] pre, font-weight: 600; } +.wy-side-nav-search input[type=text], +html.writer-html5 .rst-content table.docutils th { + color: var(--color-text-body); +} + +.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td, +.wy-table-backed, +.wy-table-odd td, +.wy-table-striped tr:nth-child(2n-1) td { + background-color: var(--color-bg-body-alt); +} + +.rst-content table.docutils, +.wy-table-bordered-all, +html.writer-html5 .rst-content table.docutils th, +.rst-content table.docutils td, +.wy-table-bordered-all td, +hr { + border-color: var(--color-border) !important; +} + +::selection { + background: var(--color-text-selection); +} + +/* Ridiculous rules are taken from sphinx_rtd */ +.rst-content .admonition-title, +.wy-alert-title { + color: var(--color-text-body-light); +} + +.rst-content .hint, +.rst-content .important, +.rst-content .tip, +.rst-content .wy-alert-success, +.wy-alert.wy-alert-success { + background: var(--color-success-body); +} + +.rst-content .hint .admonition-title, +.rst-content .hint .wy-alert-title, +.rst-content .important .admonition-title, +.rst-content .important .wy-alert-title, +.rst-content .tip .admonition-title, +.rst-content .tip .wy-alert-title, +.rst-content .wy-alert-success .admonition-title, +.rst-content .wy-alert-success .wy-alert-title, +.wy-alert.wy-alert-success .rst-content .admonition-title, +.wy-alert.wy-alert-success .wy-alert-title { + background-color: var(--color-success-title); +} + +.rst-content .admonition-todo, +.rst-content .attention, +.rst-content .caution, +.rst-content .warning, +.rst-content .wy-alert-warning, +.wy-alert.wy-alert-warning { + background: var(--color-warning-body); +} + +.rst-content .admonition-todo .admonition-title, +.rst-content .admonition-todo .wy-alert-title, +.rst-content .attention .admonition-title, +.rst-content .attention .wy-alert-title, +.rst-content .caution .admonition-title, +.rst-content .caution .wy-alert-title, +.rst-content .warning .admonition-title, +.rst-content .warning .wy-alert-title, +.rst-content .wy-alert-warning .admonition-title, +.rst-content .wy-alert-warning .wy-alert-title, +.rst-content .wy-alert.wy-alert-warning .admonition-title, +.wy-alert.wy-alert-warning .rst-content .admonition-title, +.wy-alert.wy-alert-warning .wy-alert-title { + background: var(--color-warning-title); +} + +.rst-content .danger, +.rst-content .error, +.rst-content .wy-alert-danger, +.wy-alert.wy-alert-danger { + background: var(--color-danger-body); +} + +.rst-content .danger .admonition-title, +.rst-content .danger .wy-alert-title, +.rst-content .error .admonition-title, +.rst-content .error .wy-alert-title, +.rst-content .wy-alert-danger .admonition-title, +.rst-content .wy-alert-danger .wy-alert-title, +.wy-alert.wy-alert-danger .rst-content .admonition-title, +.wy-alert.wy-alert-danger .wy-alert-title { + background: var(--color-danger-title); +} + +.rst-content .note, +.rst-content .seealso, +.rst-content .wy-alert-info, +.wy-alert.wy-alert-info { + background: var(--color-info-body); +} + +.rst-content .note .admonition-title, +.rst-content .note .wy-alert-title, +.rst-content .seealso .admonition-title, +.rst-content .seealso .wy-alert-title, +.rst-content .wy-alert-info .admonition-title, +.rst-content .wy-alert-info .wy-alert-title, +.wy-alert.wy-alert-info .rst-content .admonition-title, +.wy-alert.wy-alert-info .wy-alert-title { + background: var(--color-info-title); +} + + /* Links */ a, a:visited, .wy-menu-vertical a, a.icon.icon-home, .wy-menu-vertical li.toctree-l1.current > a.current { - color: #7253ed; + color: var(--color-text-anchor); text-decoration: none; } a:hover, .wy-breadcrumbs-aside a { - color: #7253ed; /* reset */ + color: var(--color-text-anchor); /* reset */ } .rst-versions a, .rst-versions .rst-current-version { - color: #7253ed; + color: #var(--color-text-anchor); } .wy-nav-content a.reference, .wy-nav-content a:not([class]) { - background-image: linear-gradient(#eeebee 0%, #eeebee 100%); + background-image: linear-gradient(var(--color-border) 0%, var(--color-border) 100%); background-repeat: repeat-x; background-position: 0 100%; background-size: 1px 1px; @@ -159,14 +355,16 @@ a:hover, .wy-breadcrumbs-aside a { } .wy-menu-vertical a:hover, -.wy-menu-vertical li.current a:hover { - background: #ebedf5 !important; +.wy-menu-vertical li.current a:hover, +.wy-menu-vertical a:active { + background: var(--color-bg-side-nav-hover) !important; + color: var(--color-text-body); } .wy-menu-vertical li.toctree-l1.current>a, .wy-menu-vertical li.current>a, .wy-menu-vertical li.on a { - background-color: #ebedf5; + background-color: var(--color-bg-side-nav-hover); border: none; font-weight: normal; } @@ -188,7 +386,7 @@ a:hover, .wy-breadcrumbs-aside a { .wy-menu-vertical li.toctree-l8 a, .wy-menu-vertical li.toctree-l9 a, .wy-menu-vertical li.toctree-l10 a { - color: #5c5962; + color: var(--color-text-body); } @@ -196,8 +394,8 @@ a:hover, .wy-breadcrumbs-aside a { .rst-content code, .rst-content tt, code { padding: 0.25em; font-weight: 400; - background-color: #f5f6fa; - border: 1px solid #eeebee; + background-color: var(--color-bg-code-block); + border: 1px solid var(--color-border); border-radius: 4px; } @@ -206,7 +404,8 @@ a:hover, .wy-breadcrumbs-aside a { margin-top: 0; margin-bottom: 0.75rem; overflow-x: auto; - background-color: #f5f6fa; + background-color: var(--color-bg-side-nav); + border-color: var(--color-border); border-radius: 4px; box-shadow: none; } @@ -219,12 +418,27 @@ a:hover, .wy-breadcrumbs-aside a { border-top-right-radius: 4px; } +.highlight .go { + color: inherit; +} + +.highlight .nt { + color: var(--color-text-code-nt); +} + +.rst-content code.literal, +.rst-content tt.literal { + border-color: var(--color-border); + background-color: var(--color-border); + color: var(--color-text-code-inline) +} + /* Search */ .wy-side-nav-search input[type=text] { border: none; border-radius: 0; - background-color: #f5f6fa; + background-color: transparent; font-family: inherit; font-size: .85rem; box-shadow: none; @@ -243,7 +457,7 @@ a:hover, .wy-breadcrumbs-aside a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f002"; - color: #dde0ee; + color: var(--color-text-alt); position: absolute; left: 1.5rem; top: .7rem; @@ -275,7 +489,6 @@ a:hover, .wy-breadcrumbs-aside a { padding: 10px 12px; } - /* Buttons */ .btn { display: inline-block; @@ -286,7 +499,7 @@ a:hover, .wy-breadcrumbs-aside a { font-size: inherit; font-weight: 500; line-height: 1.5; - color: #7253ed; + color: #var(--color-text-anchor); text-decoration: none; vertical-align: baseline; background-color: #f7f7f7; @@ -305,7 +518,17 @@ a:hover, .wy-breadcrumbs-aside a { } .rst-content .btn-neutral, .rst-content .btn span.fa { - color: #5c5962 !important; + color: var(--color-text-body) !important; +} + +.btn-neutral { + background-color: var(--color-btn-neutral-bg) !important; + color: var(--color-btn-neutral-text) !important; + border: 1px solid var(--color-btn-neutral-bg); +} + +.btn:hover, .btn-neutral:hover { + background-color: var(--color-btn-neutral-bg-hover) !important; } @@ -331,7 +554,7 @@ a:hover, .wy-breadcrumbs-aside a { .wy-nav-top > i { font-size: 24px; padding: 8px 0 0 2px; - color:#7253ed; + color:#var(--color-text-anchor); } .rst-content table.docutils td, @@ -343,209 +566,15 @@ a:hover, .wy-breadcrumbs-aside a { padding: 8px 14px; } -/* Dark mode */ -@media (prefers-color-scheme: dark) { - body:not(.color-scheme-light), - .wy-nav-content { - background: #161618; - color: #abb2bf; - } - - .wy-side-nav-search > a, .wy-nav-top a, .wy-nav-top i { - color: #7253ed; - } - - .wy-side-nav-search > div.version, - #rtd-search-form:before { - color: rgba(0255, 255, 255, 0.5) - } - - .wy-nav-side, - .wy-side-nav-search, - .wy-nav-top, - .wy-side-nav-search input[type=text], - .wy-side-nav-search>a:hover { - background: #1c1c1f; - } - - .wy-side-nav-search input[type=text] { - color: #abb2bf; - } - - .wy-menu-vertical li.current li[class^=toctree-] > a { - background-color: transparent !important; - } - - .wy-menu-vertical li.toctree-l1.current>a, - .wy-menu-vertical li.current>a, - .wy-menu-vertical li.on a { - background-color: #101216; - color: #8e97a9; - } - - .wy-menu-vertical li.current li[class^="toctree-"] a { - color: #8e97a9; - } - - .wy-menu-vertical a:hover, - .wy-menu-vertical li.current a:hover { - background: #101216 !important; - } - - .wy-nav-side, - .wy-side-nav-search, - .wy-nav-top, - .wy-side-nav-search > div[role="search"], - hr { - border-color: #47494f; - } - - .wy-nav-content a.reference, .wy-nav-content a:not([class]) { - background-image: linear-gradient(#47494f 0%, #47494f 100%); - } - - .rst-content div[class^=highlight], .rst-content pre.literal-block { - background-color: #101216; - border-color: #47494f; - } - - .rst-content code, .rst-content tt, code { - background-color: #101216; - border-color: #47494f; - } - - .highlight .go { - color: inherit; - } - - .rst-content code.literal, - .rst-content tt.literal { - background-color: #47494f; - color: #abb2bf; - } - - .rst-content .btn-neutral, .rst-content .btn span.fa { - color: #abb2bf !important; - } - - .btn, .btn-neutral { - background-color: #242529 !important; - border: 1px solid #242528; - } - - .btn:hover, .btn-neutral:hover { - background-color: #101216 !important; - } - - .rst-content .btn:focus { - border: 1px solid #070708; - outline: none; - } - - .rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td, .wy-table-backed, .wy-table-odd td, .wy-table-striped tr:nth-child(2n-1) td { - background-color: #242529; - } - - .rst-content table.docutils, - .wy-table-bordered-all, - html.writer-html5 .rst-content table.docutils th { - border-color: #47494f; - } - - html.writer-html5 .rst-content table.docutils th { - color: #abb2bf; - } - - .rst-content table.docutils td, - .wy-table-bordered-all td { - border-color: #47494f; - } - - /* Ridiculous rules are taken from sphinx_rtd */ - .rst-content .admonition-title, - .wy-alert-title { - color: #abb2bf; - } - - .rst-content .hint, - .rst-content .important, - .rst-content .tip, - .rst-content .wy-alert-success, - .wy-alert.wy-alert-success { - background: #041b17; - } - - .rst-content .hint .admonition-title, - .rst-content .hint .wy-alert-title, - .rst-content .important .admonition-title, - .rst-content .important .wy-alert-title, - .rst-content .tip .admonition-title, - .rst-content .tip .wy-alert-title, - .rst-content .wy-alert-success .admonition-title, - .rst-content .wy-alert-success .wy-alert-title, - .wy-alert.wy-alert-success .rst-content .admonition-title, - .wy-alert.wy-alert-success .wy-alert-title { - background-color: #02120f; - } - - .rst-content .admonition-todo, - .rst-content .attention, - .rst-content .caution, - .rst-content .warning, - .rst-content .wy-alert-warning, - .wy-alert.wy-alert-warning { - background: #371d06; - } - - .rst-content .admonition-todo .admonition-title, - .rst-content .admonition-todo .wy-alert-title, - .rst-content .attention .admonition-title, - .rst-content .attention .wy-alert-title, - .rst-content .caution .admonition-title, - .rst-content .caution .wy-alert-title, - .rst-content .warning .admonition-title, - .rst-content .warning .wy-alert-title, - .rst-content .wy-alert-warning .admonition-title, - .rst-content .wy-alert-warning .wy-alert-title, - .rst-content .wy-alert.wy-alert-warning .admonition-title, - .wy-alert.wy-alert-warning .rst-content .admonition-title, - .wy-alert.wy-alert-warning .wy-alert-title { - background: #1b0e03; - } - - .rst-content .danger, - .rst-content .error, - .rst-content .wy-alert-danger, - .wy-alert.wy-alert-danger { - background: #1b0503; - } - - .rst-content .danger .admonition-title, - .rst-content .danger .wy-alert-title, - .rst-content .error .admonition-title, - .rst-content .error .wy-alert-title, - .rst-content .wy-alert-danger .admonition-title, - .rst-content .wy-alert-danger .wy-alert-title, - .wy-alert.wy-alert-danger .rst-content .admonition-title, - .wy-alert.wy-alert-danger .wy-alert-title { - background: #120902; - } - - .rst-content .note .admonition-title, - .rst-content .note .wy-alert-title, - .rst-content .seealso .admonition-title, - .rst-content .seealso .wy-alert-title, - .rst-content .wy-alert-info .admonition-title, - .rst-content .wy-alert-info .wy-alert-title, - .wy-alert.wy-alert-info .rst-content .admonition-title, - .wy-alert.wy-alert-info .wy-alert-title { - background: #020608; - } - - .rst-content .note, - .rst-content .seealso, - .rst-content .wy-alert-info, - .wy-alert.wy-alert-info { - background: #06141e; - } +.dark-mode-toggle { + position: absolute; + top: 14px; + right: 15px; + height: 20px; + width: 20px; + z-index: 1000; + border: none; + background-color: transparent; + color: inherit; + opacity: 0.7; } diff --git a/docs/_static/js/darkmode.js b/docs/_static/js/darkmode.js new file mode 100644 index 000000000..49cf0eeec --- /dev/null +++ b/docs/_static/js/darkmode.js @@ -0,0 +1,47 @@ +let toggleButton; +let icon; + +function load() { + "use strict"; + + toggleButton = document.createElement("button"); + toggleButton.setAttribute("title", "Toggle dark mode"); + toggleButton.classList.add("dark-mode-toggle"); + icon = document.createElement("i"); + icon.classList.add("fa", darkModeState ? "fa-sun-o" : "fa-moon-o"); + toggleButton.appendChild(icon); + document.body.prepend(toggleButton); + + // Listen for changes in the OS settings + // addListener is used because older versions of Safari don't support addEventListener + // prefersDarkQuery set in + if (prefersDarkQuery) { + prefersDarkQuery.addListener(function (evt) { + toggleDarkMode(evt.matches); + }); + } + + // Initial setting depending on the prefers-color-mode or localstorage + // darkModeState should be set in the document to prevent flash + if (darkModeState == undefined) darkModeState = false; + toggleDarkMode(darkModeState); + + // Toggles the "dark-mode" class on click and sets localStorage state + toggleButton.addEventListener("click", () => { + darkModeState = !darkModeState; + + toggleDarkMode(darkModeState); + localStorage.setItem("dark-mode", darkModeState); + }); +} + +function toggleDarkMode(state) { + document.documentElement.classList.toggle("dark-mode", state); + document.documentElement.classList.toggle("light-mode", !state); + icon.classList.remove("fa-sun-o"); + icon.classList.remove("fa-moon-o"); + icon.classList.add(state ? "fa-sun-o" : "fa-moon-o"); + darkModeState = state; +} + +document.addEventListener("DOMContentLoaded", load); diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html new file mode 100644 index 000000000..cf648b606 --- /dev/null +++ b/docs/_templates/layout.html @@ -0,0 +1,13 @@ +{% extends "!layout.html" %} +{% block extrahead %} + + {{ super() }} +{% endblock %} diff --git a/docs/conf.py b/docs/conf.py index 8e96542a7..19efbbdf8 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -15,7 +15,7 @@ extensions = [ ] # Add any paths that contain templates here, relative to this directory. -# templates_path = ['_templates'] +templates_path = ["_templates"] # The suffix of source filenames. source_suffix = ".rst" @@ -125,6 +125,10 @@ html_css_files = [ "css/custom.css", ] +html_js_files = [ + "js/darkmode.js", +] + # Add any extra paths that contain custom files (such as robots.txt or # .htaccess) here, relative to this directory. These files are copied # directly to the root of the documentation.