Last active
October 30, 2023 15:28
-
-
Save jerclarke/47665e0302bb54ac1688153dd8ff4db1 to your computer and use it in GitHub Desktop.
Quick and dirty CSS dark theme for readthedocs.io and the Stylus browser extension.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@-moz-document regexp("https?:\\/\\/([a-z0-9][a-z0-9-]+[a-z0-9]\\.readthedocs\\.io)(\\S+)") { | |
@media (prefers-color-scheme: dark) { | |
/*Syntax Highlighting*/ | |
.rst-content pre.literal-block, .rst-content div[class^='highlight'] { | |
border-color: transparent; | |
} | |
pre { | |
background-color: #191919 !important; | |
font-weight: bold; | |
font-family: "JetBrains Mono", monospace; | |
} | |
.highlight .k { | |
color: #00c739; | |
} | |
.highlight .na { | |
color: #61b0ff; | |
} | |
.highlight .nc { | |
color: #ffcb6c; | |
} | |
.highlight .nf { | |
color: #ffcb6c; | |
} | |
.highlight .s1 { | |
color: #4bbcff; | |
} | |
.highlight .o { | |
color: #bcbcbc; | |
} | |
.highlight .nb { | |
color: #00e943; | |
} | |
.highlight .mi { | |
color: #ff7e3a; | |
} | |
.highlight .sd { | |
color: #7e9cff; | |
} | |
/*Other*/ | |
a { | |
color: #3ab1ff; | |
} | |
a:visited { | |
color: #bf84d8; | |
} | |
.wy-nav-content { | |
background: #232323; | |
color: aliceblue; | |
} | |
.wy-menu-vertical li.current { | |
background: #232323; | |
} | |
.wy-menu-vertical li.on a, .wy-menu-vertical li.current>a { | |
color: #404040; | |
background: #00375b; | |
border-color: transparent !important; | |
} | |
.wy-menu-vertical li.current ul { | |
display: block; | |
border-color: transparent !important; | |
} | |
.wy-menu-vertical li.current a:hover { | |
background: #444; | |
} | |
.wy-menu-vertical li.current a { | |
color: #f8f8f8; | |
border-color: transparent; | |
} | |
.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; | |
} | |
.wy-alert-title, .rst-content .admonition-title { | |
background: #00375b; | |
} | |
.wy-table-bordered-all, .rst-content table.docutils ,.rst-content table.docutils th, | |
.wy-table-bordered-all td, .rst-content table.docutils td { | |
border-color: #e1e4e5; | |
border-color: #3d3d3d !important; | |
} | |
constructed stylesheet | |
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: #363636; | |
} | |
.wy-table thead, .rst-content table.docutils thead, .rst-content table.field-list thead { | |
color: #e5e5e5; | |
} | |
.sidebar { | |
background-color: #191919 !important; | |
} | |
.sidebar-title { | |
background-color: #2b2b2b !important; | |
} | |
.xref, .py-meth { | |
color: #7ec3e6 !important; | |
} | |
.admonition, .note { | |
background-color: #2d2d2d !important; | |
} | |
} | |
} |
It's in a file called theme_overrides.css
, which makes me think this is a customization of the default RTD CSS.
In a case like this, you'll probably want to add a new Stylus custom sheet for that specific site that overrides it, along with the prefers-color-scheme: dark
wrapper like in my original version above.
Here's an example that I created and exported. You can just use this if you want, but I imagine you'll find other elements you want to change, so you should be ready to add more CSS overrides into it as you go:
@-moz-document domain("mujoco.readthedocs.io") {
@media (prefers-color-scheme: dark) {
.rst-content .toctree-wrapper>p.caption, h2, h3, h4, h5, h6, legend {
font-family: 'DM Sans', 'Helvetica Neue', 'Arial', sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 700;
color: rgb(174, 197, 255);
}
.rst-content .toctree-wrapper>p.caption, h1 {
font-size: 250%;
font-family: 'DM Serif Display', 'Times New Roman', serif;
font-weight: 400;
color: rgb(206, 225, 255);
}
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
link: https://mujoco.readthedocs.io/en/latest/overview.html