Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 856
falling cat Avatar asked Jun 28 '17 04:06

falling cat


People also ask

What is the theme of Sphinx?

Sphinx theme is skin that changes the appearance of HTML version of the documentation. It contains HTML templates, CSS stylesheets, and static files like images, favicon, fonts, etc.

What is Sphinx RTD?

This Sphinx theme was designed to provide a great reader experience for documentation users on both desktop and mobile devices. This theme is commonly used with projects on Read the Docs but can work with any Sphinx project.


2 Answers

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

like image 114
Aidan Fitzpatrick Avatar answered Sep 19 '22 03:09

Aidan Fitzpatrick


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;
}
like image 27
Gustavo Bezerra Avatar answered Sep 20 '22 03:09

Gustavo Bezerra