Change The Colors of The Sphinx Read The Docs Theme

Change the colors of the Sphinx Read The Docs theme?

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

How to change the rtd background color?

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.

unable to change the text color of sphinx_rtd_theme sidebar

If you need to change a specific class and having a hard time finding which css attributes you need to change, by inspecting your website using inspector on your browser will help you identify which class/id specifically you need.

Right click on the area you want to see then click inspect then you will be able to see all the elements that the page is using.

Modifying content width of the Sphinx theme 'Read the Docs'

Another option is to create a stylesheet in source/_static with just the css you want, e.g.

.wy-nav-content {
    max-width: none;
}

or

.wy-nav-content {
    max-width: 1200px !important;
}

Make sure the directory is referenced in source/conf.py - I believe by default there's a line to do this, i.e.

# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']

Then create a custom layout in source/_templates/layout.html and do something like this to include your stylesheet

{% extends "!layout.html" %}
{% block extrahead %}
    <link href="{{ pathto("_static/style.css", True) }}" rel="stylesheet" type="text/css">
{% endblock %}

Assuming you called your stylesheet style.css

How do I customize Sphinx RtD Theme default search settings?

See Templating in the Sphinx documentation.

To customize the output of your documentation you can override all the templates (both the layout templates and the child templates) by adding files with the same name as the original filename into the template directory of the structure the Sphinx quickstart generated for you.

Sphinx will look for templates in the folders of templates_path first, and if it can’t find the template it’s looking for there, it falls back to the selected theme’s templates.

In your case, copy the RTD Sphinx theme's search.html from your installed package into your template directory, and modify it to your liking. Then set the value of templates_path in your conf.py to its location.

Customize sphinxdoc theme

All I wanted is to add ReST strikethrough in my sphinx doc. Here is how I did it:

$ cd my-sphinx-dir
$ mkdir -p theme/static
$ touch theme/theme.conf
$ touch theme/static/style.css

In theme/theme.conf:

[theme]
inherit = default
stylesheet = style.css
pygments_style = pygments.css

(this makes it look like the default theme (l. 2))

In theme/static/style.css:

@import url("default.css"); /* make sure to sync this with the base theme's css filename */

.strike {
    text-decoration: line-through;
}

Then, in your conf.py:

html_theme = 'theme' # use the theme in subdir 'theme'
html_theme_path = ['.'] # make sphinx search for themes in current dir

More here: https://sphinx.readthedocs.io/en/master/theming.html.

(Optional) In global.rst:

.. role:: strike
   :class: strike

and in a example.rst:

.. include:: global.rst

:strike:`This looks like it is outdated.`

---

Related Topics