Modify the theme
Learn how to build your own theme by changing the templates or CSS.
Modify the templates
You can apply styles in the templates with Tailwind’s utility classes.
./src/
├sphinxawesome_theme/
└theme-src/
To modify these styles, follow these steps:
Install the Python and JavaScript dependencies:
See Set up a development environment for more information.
Make your change.
For example, to change the background color of the header to orange, open the file
sphinxawesome_theme/header.html
and change:html<div class="bg-gray-900 ..."><div class="bg-orange-500 ...">Build the theme:
terminalyarn build
Modify CSS files
Everything that’s part of the main content, including everything that’s converted from
reStructuredText to HTML is styled using Tailwind’s @apply
directive.
./src/
├sphinxawesome_theme/
└theme-src/
└css/
To modify these styles, follow these steps:
Install the Python and JavaScript dependencies.
See Set up a development environment for more information.
Make your change.
The CSS files are arranged according to the elements they apply to.
Build the theme:
terminalyarn build