https://first-folio.demo.lobb.ie/tags/dark-mode/Recent content in Dark-Mode on first-folio.demo.lobb.ieHugoen-GB-oed© 2023-2026 Taḋg Paul — Apache License 2.0Tue, 20 May 2025 00:00:00 +0000https://first-folio.demo.lobb.ie/journal/dark-mode-setup/Tue, 20 May 2025 00:00:00 +0000https://first-folio.demo.lobb.ie/journal/dark-mode-setup/<p>The theme supports four dark mode strategies, configured via <code>params.mode</code> in your <code>hugo.yaml</code>.</p> <h2 id="mode-options">Mode Options</h2> <h3 id="auto-recommended"><code>auto</code> (recommended)</h3> <p>Follows the operating system preference using <code>prefers-color-scheme: dark</code>. When the user switches their OS to dark mode, the site follows automatically.</p> <div class="code-block" data-lang="yaml"><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">params</span>: </span></span><span style="display:flex;"><span> <span style="color:#f92672">mode</span>: <span style="color:#ae81ff">auto</span></span></span></code></pre></div></div> <h3 id="toggle"><code>toggle</code></h3> <p>Adds a toggle button in the header. Users can switch between light and dark mode regardless of their OS setting. Their preference is stored in <code>localStorage</code>.</p> <div class="code-block" data-lang="yaml"><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">params</span>: </span></span><span style="display:flex;"><span> <span style="color:#f92672">mode</span>: <span style="color:#ae81ff">toggle</span></span></span></code></pre></div></div> <h3 id="dark"><code>dark</code></h3> <p>Forces dark mode for all visitors.</p>