Theme variables and CSS

This section covers a few ways that you can control the look and feel of your theme via your own CSS and theme variables.

Custom CSS stylesheets#

Custom styles should be added to /assets/css/my_css.css (where my_css can be any name, other than those already in the theme).

CSS theme variables#

Color variables#

We mostly rely on PyData Sphinx Theme’s color variables.

However, we …

Code styling#

To enable code styling, add the following to your config file:

markup:
  highlight:
    noClasses: false

The default theme is Witch Hazel, but with a blue background. To use a different theme, generate a new stylesheet using:

hugo gen chromastyles --style=monokai > /assets/css/code-highlight.css

You can replace monokai with any of the themes supported by Chroma, as listed in their gallery.

Then, use fenced code blocks and remember to specify the language:

```python
def foo(x):
    return x**2
```