Skip to content

Instantly share code, notes, and snippets.

@jerclarke
Last active October 30, 2023 15:28
Show Gist options
  • Save jerclarke/47665e0302bb54ac1688153dd8ff4db1 to your computer and use it in GitHub Desktop.
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.
@-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;
}
}
}
@rohit-kumar-j
Copy link

@jerclarke
Copy link
Author

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