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:

  1. Install the Python and JavaScript dependencies.

  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
    <div class="bg-gray-900 ...">
    <div class="bg-orange-500 ...">
    
  3. 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:

  1. Install the Python and JavaScript dependencies.

  2. Make your change.

    The CSS files are arranged according to the elements they apply to.

  3. Build the theme:

    terminal
    yarn build