Colors#

Adjust any color used by the theme — backgrounds, text, accents, admonitions — by overriding CSS variables inside a custom CSS file. Clarity Theme for Sphinx gives you complete control while keeping the defaults sensible.

Example: How to change website background

The page background is determined by CSS varaible --color-base-100. If you change it, also adjust article text and heading colors (--article-text--color and --article-heading--color) so they match and maintain good contrast.

See also

Complete list of available CSS variables you can override.

To support both color modes, supply values with the light-dark() function as described in Handling light and dark mode variants in custom CSS.

Create _static/styles/custom.css next to conf.py (other paths work too; but this is the convention).
In conf.py, ensure html_static_path = ["_static"] (or your chosen folder).

In custom.css add overrides:

:root {
  --color-base-100: light-dark(#ffe066, #5fbdff);
  --article-text--color: light-dark(#ff6f61, #ffd60a);
  --article-heading--color: light-dark(#ff6f61, #ffd60a);
}

Result: