Change the colors of the Sphinx Read The Docs theme?

Question

I'm building documentation for my API library and I'm having readthedocs.io host the documentation, and is backed with Sphinx. I have the Read The Docs theme installed for Sphinx using pip install, and the Read the Docs website currently has the documentation running.

I would like to change the colors of my documentation. I have done some searching through their GitHub repository GitHub.com and have seen some talk that editing the sass files. However, I can't seem to find where these files are located.

Solution 1

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

Solution 2

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;
}

Solution 3

If you only want to change the color of the navigation header, you can do that by using the html_theme_options variable in conf.py. There is parameter called 'style_nav_header_background'.

https://sphinx-rtd-theme.readthedocs.io/en/stable/configuring.html#theme-options

Solution 4

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

View more solutions