Modify the theme

Modify the templates

You can

Styles in the templates are applied via Tailwind’s utility classes.

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

To modify these styles, follow these steps:

1. Install the Python and JavaScript dependencies:

   See Set up a development environment for more information.

2. 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 ...">
   

3. 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.

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

To modify these styles, follow these steps:

1. Install the Python and JavaScript dependencies.

   See Set up a development environment for more information.

2. 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;
      }
   }
   

3. Build the theme:

   shell

   yarn build