Change the colors of the Sphinx Read The Docs theme?
I am creating documentation for my API library and I have readthedocs.io to host the documentation and it is maintained by Sphinx. I have the Read The Docs theme installed for Sphinx using pip install
the documentation already running on the Read the Docs site.
I would like to change the colors of my documentation. I did some searching on their GitHub repository at GitHub.com and saw conversations about editing files sass
. However, I cannot find where these files are located.
An example of reading documents with different colors
Any help is appreciated!
source to share
I believe the canonical way is to create a _static
folder, include the CSS files in it, and then link to that CSS in your templates with the inclusion in the folder _templates
.
To demonstrate this, you can try a simple file override layout.html
: first create a file _templates
in your documents folder if it doesn't already exist, then create a file there named layout.html
.
Fill it in 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 %}
After you've rearranged your documents, you should see a vibrant sidebar and header. (I used a similar technique with our implementation of the Sphinx / Read The Docs theme. View the source code and so on to see which bits we are overriding.)
source to share
You can change the theme colors by adding your own CSS file to _static
. For Sphinx to use this file, add it to yours conf.py
:
def setup(app):
app.add_css_file('custom.css')
Example 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;
}
source to share