Researcher in Computational Trust, Privacy, Security and Artificial Intelligence Zola 2026-08-05T00:00:00+00:00 https://www.anirbanbasu.com/tags/themes/atom.xml 2026-08-05T00:00:00+00:00 2026-08-05T00:00:00+00:00 Anirban Basu https://www.anirbanbasu.com/musings/zola-themes/ <p>As mentioned in <a href="/musings/bye-hugo-hello-zola/">my post on switching to Zola</a>, I made a long overdue transition for my website from the Hugo static site generator to Zola. Since then, I have been exploring the Zola theme ecosystem and started to make my own.</p> <h2 id="tapestry-a-terminus-extension"><code>tapestry</code>: a <code>terminus</code> extension<a class="post-anchor" href="#tapestry-a-terminus-extension" aria-label="Anchor link for: tapestry-a-terminus-extension"><span aria-hidden="true">#</span></a> </h2> <p>Since my website's transition to Zola, I have been using the <a rel="external" href="https://github.com/ebkalderon/terminus"><code>terminus</code></a> theme for a minimalistic and clean look. Then, I wanted to add some more customisations from theme colour scheme, to layout and typography. These were significant enough to warrant a new theme. Hence <a rel="external" href="https://www.getzola.org/themes/tapestry/"><code>tapestry</code></a> was born. Released under MIT license, it extends the <code>terminus</code> theme with the following key differences.</p> <ul> <li>Five presentation style groups, each with a number of variants (e.g., <em>creative</em>'s <em>editorial-zine</em>) replace the <code>extra.color_scheme</code> setting of the <code>terminus</code> theme.</li> <li>Each presentation style and its variants are available in both light and dark modes with mode switcher always available.</li> <li>Additional shortcodes, such as for showing the colour palette.</li> </ul> <p>The full documentation for the <code>tapestry</code> theme is available, under <em>docs</em> in the navigation menu, on its demo site: <a rel="external" href="https://ghp-tapestry.anirbanbasu.com">https://ghp-tapestry.anirbanbasu.com</a> and mirrored on Netlify: <a rel="external" href="https://ghp-tapestry.netlify.app">https://ghp-tapestry.netlify.app</a>.</p> <section class="alert info" role="note" aria-labelledby="&#x2F;ex6qSyb"> <div class="alert-icon alert-icon-info"></div> <div class="alert-content" role="presentation"> <strong id="&#x2F;ex6qSyb" class="alert-title" aria-hidden="true">Some things to keep in mind</strong> <ul> <li>The <code>tapestry</code> theme is still in its early stages of development.</li> <li>This website uses the <code>tapestry</code> theme with the presentation style switcher disabled.</li> <li>A pre-determined style and its variant is chosen, which changes from time to time. The currently active one named below with its colour palette.</li> </ul> <div style="margin:2rem 0;" class="presentation-palette" data-palette-style="creative" data-palette-variant="collage-mixed-media"> <p><strong>Style:</strong> <code class="presentation-palette-style-name">creative</code> &middot; <strong>Variant:</strong> <code class="presentation-palette-variant-name">collage-mixed-media</code> </p> <div style="display:flex; flex-wrap:wrap; gap:2rem; margin:1rem 0;"> <div style="flex:1 1 240px;"> <p style="font-weight:600; margin-bottom:0.5rem;">Light mode</p> <div style="display:flex; flex-wrap:wrap; gap:0.5rem;"> <div style="width:88px;" class="presentation-palette-swatch" data-palette-token="bg_primary" data-palette-mode="light"> <div style="height:48px;border-radius:6px;border:1px solid rgba(0,0,0,0.15);background:#faf3e7;" class="presentation-palette-swatch-color"></div> <small style="display:block;font-size:0.7rem;">bg-primary<br><span class="presentation-palette-swatch-hex">#faf3e7</span></small> </div> <div style="width:88px;" class="presentation-palette-swatch" data-palette-token="text_heading" data-palette-mode="light"> <div style="height:48px;border-radius:6px;border:1px solid rgba(0,0,0,0.15);background:#201607;" class="presentation-palette-swatch-color"></div> <small style="display:block;font-size:0.7rem;">text-heading<br><span class="presentation-palette-swatch-hex">#201607</span></small> </div> <div style="width:88px;" class="presentation-palette-swatch" data-palette-token="accent_primary" data-palette-mode="light"> <div style="height:48px;border-radius:6px;border:1px solid rgba(0,0,0,0.15);background:#7d6118;" class="presentation-palette-swatch-color"></div> <small style="display:block;font-size:0.7rem;">accent-primary<br><span class="presentation-palette-swatch-hex">#7d6118</span></small> </div> <div style="width:88px;" class="presentation-palette-swatch" data-palette-token="accent_secondary" data-palette-mode="light"> <div style="height:48px;border-radius:6px;border:1px solid rgba(0,0,0,0.15);background:#6b3f57;" class="presentation-palette-swatch-color"></div> <small style="display:block;font-size:0.7rem;">accent-secondary<br><span class="presentation-palette-swatch-hex">#6b3f57</span></small> </div> </div> </div> <div style="flex:1 1 240px;"> <p style="font-weight:600; margin-bottom:0.5rem;">Dark mode</p> <div style="display:flex; flex-wrap:wrap; gap:0.5rem;"> <div style="width:88px;" class="presentation-palette-swatch" data-palette-token="bg_primary" data-palette-mode="dark"> <div style="height:48px;border-radius:6px;border:1px solid rgba(255,255,255,0.15);background:#201812;" class="presentation-palette-swatch-color"></div> <small style="display:block;font-size:0.7rem;">bg-primary<br><span class="presentation-palette-swatch-hex">#201812</span></small> </div> <div style="width:88px;" class="presentation-palette-swatch" data-palette-token="text_heading" data-palette-mode="dark"> <div style="height:48px;border-radius:6px;border:1px solid rgba(255,255,255,0.15);background:#fbf5e9;" class="presentation-palette-swatch-color"></div> <small style="display:block;font-size:0.7rem;">text-heading<br><span class="presentation-palette-swatch-hex">#fbf5e9</span></small> </div> <div style="width:88px;" class="presentation-palette-swatch" data-palette-token="accent_primary" data-palette-mode="dark"> <div style="height:48px;border-radius:6px;border:1px solid rgba(255,255,255,0.15);background:#d9b24c;" class="presentation-palette-swatch-color"></div> <small style="display:block;font-size:0.7rem;">accent-primary<br><span class="presentation-palette-swatch-hex">#d9b24c</span></small> </div> <div style="width:88px;" class="presentation-palette-swatch" data-palette-token="accent_secondary" data-palette-mode="dark"> <div style="height:48px;border-radius:6px;border:1px solid rgba(255,255,255,0.15);background:#c98fb0;" class="presentation-palette-swatch-color"></div> <small style="display:block;font-size:0.7rem;">accent-secondary<br><span class="presentation-palette-swatch-hex">#c98fb0</span></small> </div> </div> </div> </div> </div></div> </section> <h2 id="the-future">The future<a class="post-anchor" href="#the-future" aria-label="Anchor link for: the-future"><span aria-hidden="true">#</span></a> </h2> <p>I am trying out other designs, so new themes are bound to emerge in the future.</p>