How to change the rtd background color?

Question

I would like to change the background color of the Read the Docs theme for sphinx-doc.

The theme is written using sass and I find the variable $section-background-color which is defined no-where.

If I replace the #2980B9 with another value anywhere in the project, it doesn't work. This insane blue is still retrieved from somewhere.

Where is this background color defined?

I also tried to replace all the $blue with $red in _theme_variables_sass.

Answer 1

There are (at least) two ways to change sphinx_rtd_theme styling:

1. Edit the source SASS used to build the theme as outlined in the docs. Just be sure Sphinx is using your newly built sphinx_rtd_theme, rather than the PyPI-installed (original) version.
2. Override the desired CSS rules with a custom CSS file as answered here.

I find #2 to be much simpler. As an example, say I wanted to change the background color behind the title, logo and search bar in the side. Looking at the default build (inspecting the page styles), the background color is set in the class .wy-side-nav-search, so just create a custom.css file inside <project-dir>/_static/css with class

.wy-side-nav-search{ background-color:<#yourHexColor> }

Then, in conf.py add:

def setup (app): app.add_stylesheet('css/custom.css')

make clean, make build and viola.

As for where the background color is defined, I haven't looked far enough to be able to say, but hopefully this gets you (and future visitors) the desired outcome.