Skip to content

Instantly share code, notes, and snippets.

@ErikKalkoken
Created June 15, 2022 12:12
Show Gist options
  • Save ErikKalkoken/0baf538c767774bc11c0e8d4028972e6 to your computer and use it in GitHub Desktop.
Save ErikKalkoken/0baf538c767774bc11c0e8d4028972e6 to your computer and use it in GitHub Desktop.
Dark mode for Sphinx ReadTheDocs theme
/*!
* @name Readthedocs
* @namespace http://userstyles.org
* @description Styles the documentation pages hosted on Readthedocs.io
* @author Anthony Post
* @homepage https://userstyles.org/styles/142968
* @version 0.20170529055029
*
* Modified by Aloïs Dreyfus: 20200527-1037
* Modified by Erik Kalkoken: 20220615
*/
@media (prefers-color-scheme: dark) {
a:visited {
color: #bf84d8;
}
pre {
background-color: #2d2d2d !important;
}
.wy-nav-content {
background: #3c3c3c;
color: aliceblue;
}
.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
}
/* Name.Variable */
body {
text-align: justify;
}
.rst-content .section .admonition ul {
margin-bottom: 0;
}
li.toctree-l1 {
margin-top: 5px;
margin-bottom: 5px;
}
.wy-menu-vertical li code {
color: #E74C3C;
}
.wy-menu-vertical .xref {
color: #2980B9 !important;
}
}
@ErikKalkoken
Copy link
Author

ErikKalkoken commented Jun 15, 2022

This CSS adds dark mode styling to the ReadTheDocs theme for Sphinx. It will automatically render your docs in dark or light mode based on the current system's setting.

It is an add-on to this sphinx extension: sphinx-rtd-theme

To install add this CSS to your Sphinx configuration (conf.py) and render your docs:

html_css_files = [
    'css/rtd_dark.css',
]

The location of the folder depends on your setup of the html static path. Here is how my setup usually looks like:

docs/
    static/
        css/
            rtd_dark.css
        images/
            ...

To make that work you need to also define the static path in conf.py:

html_static_path = ["_static"]

Here is an example project that uses that configuration: https://gitlab.com/ErikKalkoken/django-eveuniverse

@mendax1234
Copy link

mendax1234 commented Jun 28, 2022

html_css_files = [
    'css/rtd_dark.css',
]

@ErikKalkoken Where should l create the /css folder?
And how to enable the dark mode?

@mendax1234
Copy link

How to change the theme automatically?

@mendax1234
Copy link

@ErikKalkoken
Copy link
Author

@mendax1234 Hey, I update the description to make the folder structure more clear.

@mendax1234
Copy link

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment