Modify the theme

Build your own theme by changing the templates or CSS.

Modify the templates

You can style the templates with Tailwind’s utility classes.

terminal

./src/
├sphinxawesome_theme/
└theme-src/

To modify these styles, follow these steps:

Install the Python and JavaScript dependencies.

See also

Set up a development environment
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:
terminal
```
yarn build
```

Modify CSS files

Everything that’s part of the main content, including everything that’s converted from reStructuredText or Markdown to HTML is styled using Tailwind’s @apply directive.

terminal

./src/
├sphinxawesome_theme/
└theme-src/
   └css/

To modify these styles, follow these steps:

Install the Python and JavaScript dependencies.

See also

Set up a development environment
Make your change.

The CSS files are arranged according to the elements they apply to.
Build the theme:
terminal
```
yarn build
```