Search code examples
csscolorspython-sphinxread-the-docsdarkmode

Change the colors of the Sphinx Read The Docs theme?


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.

Example of a Read The Docs with other colors


Solution

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