Spirit templates can be overridden the regular Django way. The issue with overriding is keeping up with all the changes a new Spirit version may introduce to those templates. To avoid this, Spirit has some specific templates that can be safely overridden.

Extend the HTML head section

Extending the head section is the best way to override the CSS style, add JS scripts, add some font, etc.

Let’s override the theme colors to make it green-ish:

{# templates/spirit/_base.html #}

{% extends "spirit/_base.html" %}
{% block custom_head_extra %}
    :root {
      --st-text-prim: #e7e7e7;
      --st-text-sec: #c9c9c9;
      --st-bg-prim: #010e00;
      --st-bg-sec: #012700;
      --st-bg-ter: #012100;
      --st-bg-qua: #011a00;
      --st-bg-qui: #011500;
      --st-text-selected-prim: #5cba58;
      --st-highlight-prim: #830000;
      --st-text-button: var(--st-text-sec);
      --st-bg-input: var(--st-bg-qui);
      --st-bg-checkbox: #black;
      --st-bg-comment-user-admin: #979733;
      --st-bg-comment-user-mod: #2e8f38;
      --st-bg-comment-user-topic-owner: #2e658f;
      --st-bg-message-info: var(--st-bg-qui);
      --st-text-message-info: #023800;
      --st-bg-message-error: #5e0000;
      --st-bg-selection: white;
      --st-text-selection: black;
      --st-bg-unread: #13232f;
      --st-bg-comment-diff-ins: #979733;
      --st-bg-comment-diff-del: #5e0000;
{% endblock %}

The templates folder must be next to the static and media folders.

There is a bunch more of CSS color variables in the Sass colors file. There is also a dark-mode that is active when the OS is in dark-mode, but it can be set as the default or as the only theme the same way.

Extend other sections

The HTML body can be extended as well, before and after the Spirit layout section. This is useful to add an extra nav-bar at the top, or to add some JS snippet or footer at the bottom.

Let’s just add some minimal text this time:

{# templates/spirit/_base.html #}

{% extends "spirit/_base.html" %}
{% block custom_before_spirit_body %}
  <div style="background-color:yellow;color:black;text-align:center;">
    My extra nav bar
{% endblock %}
{% block custom_after_spirit_body %}
  <div style="background-color:yellow;color:black;text-align:center;">
    My extra footer
{% endblock %}

I’ve inlined the style in the elements, but a better way is to style things in the head section, see Extend the HTML head section.