Modify the theme

Learn how to build your own theme by changing the templates or CSS.

On this page

Modify the templates
Modify CSS files

Modify the templates

You can apply styles in the templates with Tailwind’s utility classes.

shell

./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
```
<header class="md:sticky top-0 bg-gray-900 ...">
<header class="md:sticky top-0 bg-orange-500 ...">
```
Build the theme:
shell
```
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.

shell

./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. For example, if you want to change the appearance of links from the default blue to an orange, open the file theme-src/css/links.css and change:
css
```
p:not(.admonition-title),
.nav-toc,
.search,
.toctree-wrapper,
.contents.local {
   & a {
      @apply text-blue-700;
      @apply text-orange-500;
   }
}
```
Build the theme:
shell
```
yarn build
```