Change the colors of the Sphinx Read The Docs theme?
An easier way to add CSS files is to set html_css_files
in your conf.py:
# custom.css is inside one of the html_static_path folders (e.g. _static)
html_css_files = ["custom.css"]
See: https://docs.readthedocs.io/en/latest/guides/adding-custom-css.html
You can change the theme colors by adding a custom CSS file to _static
. To actually have Sphinx use that file, add this to your conf.py
:
def setup(app):
app.add_css_file('custom.css')
Sample CSS (custom.css
) to change the sidebar color to dark-green (based on @afit's answer):
.wy-side-nav-search, .wy-nav-top {
background: #0b750a;
}
I believe the canonical way is to create a _static
folder, include CSS files in that, and then reference that CSS in your templates with an include in the _templates
folder.
To demonstrate this, you can try a simple override of the layout.html
file: first, create _templates
in your docs folder if it doesn't already exist, then create a file there named layout.html
.
Populate that with the following:
{% extends "!layout.html" %}
{% block footer %} {{ super() }}
<style>
/* Sidebar header (and topbar for mobile) */
.wy-side-nav-search, .wy-nav-top {
background: #00ff00;
}
/* Sidebar */
.wy-nav-side {
background: #ff0000;
}
</style>
{% endblock %}
Once you've rebuilt your docs, you should see a garish side-bar and header. (I used a similar technique with our Sphinx / Read The Docs theme implementation. View source etc. to see which bits we override.)