Automatic Dark Theme for Docs (Reads Device Preference)
Hell yeah!
This commit is contained in:
parent
aa1e44781a
commit
892774665d
@ -1,8 +1,137 @@
|
||||
/* Main colors adapted from pytorch doc */
|
||||
:root{
|
||||
--main-bg-color: #343A40;
|
||||
/* Define default light theme colors */
|
||||
:root {
|
||||
--bg-color: #f8f8f8;
|
||||
--text-color: #404040;
|
||||
--header-bg-color: #343A40;
|
||||
--header-text-color: #b3b3b3;
|
||||
--code-bg-color: #f8f8f8;
|
||||
--link-color: #005cc5;
|
||||
--link-hover-color: #003d99;
|
||||
--side-bar-bg-color: #343131:
|
||||
}
|
||||
|
||||
/* Auto-toggle dark mode based on system preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-color: #1a1a1a;
|
||||
--text-color: #d1d1d1;
|
||||
--header-bg-color: #262626;
|
||||
--header-text-color: #d1d1d1;
|
||||
--code-bg-color: #333333;
|
||||
--link-color: #4da6ff;
|
||||
--link-hover-color: #1a8cff;
|
||||
--side-bar-bg-color: #343131;
|
||||
}
|
||||
|
||||
.method dt, .class dt, .data dt, .attribute dt, .function dt,
|
||||
.descclassname, .descname {
|
||||
background-color: #525252 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.toc-backref {
|
||||
color: grey !important;
|
||||
}
|
||||
|
||||
code.literal {
|
||||
background-color: #2d2d2d !important;
|
||||
border: 1px solid #6d6d6d !important;
|
||||
}
|
||||
|
||||
.wy-nav-content-wrap {
|
||||
background-color: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #191919 !important;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
background-color: #2b2b2b !important;
|
||||
}
|
||||
|
||||
.xref, .py-meth {
|
||||
color: #7ec3e6 !important;
|
||||
}
|
||||
|
||||
.admonition, .note {
|
||||
background-color: #2d2d2d !important;
|
||||
}
|
||||
|
||||
.wy-side-nav-search {
|
||||
background-color: inherit;
|
||||
border-bottom: 1px solid #fcfcfc;
|
||||
}
|
||||
|
||||
.wy-table thead, .rst-content table.docutils thead, .rst-content table.field-list thead {
|
||||
background-color: #b9b9b9;
|
||||
}
|
||||
|
||||
.wy-table thead th, .rst-content table.docutils thead th, .rst-content table.field-list thead th {
|
||||
border: solid 2px #e1e4e5;
|
||||
}
|
||||
|
||||
.wy-table thead p, .rst-content table.docutils thead p, .rst-content table.field-list thead p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.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: #343131;
|
||||
}
|
||||
|
||||
.highlight .m {
|
||||
color: inherit
|
||||
}
|
||||
|
||||
/* Literal.Number */
|
||||
.highlight .nv {
|
||||
color: #3a7ca8
|
||||
}
|
||||
|
||||
.wy-menu-vertical li code {
|
||||
color: #E74C3C;
|
||||
}
|
||||
|
||||
.wy-menu-vertical .xref {
|
||||
color: #2980B9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main colors adapted from pytorch doc */
|
||||
.wy-side-nav-search, .wy-nav-top {
|
||||
background-color: var(--header-bg-color);
|
||||
}
|
||||
|
||||
.wy-body-for-nav, .wy-nav-content, .wy-nav-content-wrap {
|
||||
background-color: var(--bg-color);
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.caption[role="heading"] {
|
||||
background-color: var(--side-bar-bg-color);
|
||||
}
|
||||
|
||||
a.icon.icon-home {
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
/* Apply the colors */
|
||||
body, h1, h2, .rst-content .toctree-wrapper p.caption, h3, h4, h5, h6, legend, p.caption, .field-list .xref.py.docutils, .field-list code.docutils, .field-list .docutils.literal.notranslate {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.codeblock, pre.literal-block, .rst-content .literal-block, .rst-content pre.literal-block, div[class^='highlight'] {
|
||||
background-color: var(--code-bg-color);
|
||||
}
|
||||
|
||||
/* Justify and Center */
|
||||
.justify {
|
||||
text-align: justify;
|
||||
}
|
||||
@ -11,37 +140,9 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* Header fonts y */
|
||||
h1, h2, .rst-content .toctree-wrapper p.caption, h3, h4, h5, h6, legend, p.caption {
|
||||
font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* Docs background */
|
||||
.wy-side-nav-search{
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
/* Mobile version */
|
||||
.wy-nav-top{
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
a.icon.icon-home {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
/* Make code blocks have a background */
|
||||
.codeblock,pre.literal-block,.rst-content .literal-block,.rst-content pre.literal-block,div[class^='highlight'] {
|
||||
background: #f8f8f8;;
|
||||
}
|
||||
|
||||
/* Change style of types in the docstrings .rst-content .field-list */
|
||||
.field-list .xref.py.docutils, .field-list code.docutils, .field-list .docutils.literal.notranslate
|
||||
{
|
||||
/* Docstring styles */
|
||||
.field-list .xref.py.docutils, .field-list code.docutils, .field-list .docutils.literal.notranslate {
|
||||
border: None;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
color: #404040;
|
||||
}
|
||||
@ -42,5 +42,12 @@ html_favicon = "_static/imgs/icon.svg"
|
||||
epub_show_urls = 'footnote'
|
||||
html_static_path = ['_static']
|
||||
|
||||
html_context = {
|
||||
'display_github': True,
|
||||
'github_user': 'ALRhub',
|
||||
'github_repo': 'fancy_gym',
|
||||
'github_version': 'release/docs/source',
|
||||
}
|
||||
|
||||
def setup(app):
|
||||
app.add_css_file("style.css")
|
||||
Loading…
Reference in New Issue
Block a user