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.)