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.

terminal

./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:
terminal
```
yarn 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.

terminal

./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:
terminal
```
yarn build
```