Demo and colour switchers

Two small buttons help people explore the template: the Demos tab on the left edge lists every demo, and the palette button on the right lets visitors try other colour schemes. You'll usually remove both from your finished website.

The easy way#

Build your site with npm run site -- <demo>. Both switchers are left out automatically.

Turning them off in the source files#

src/config/site.json

"showDemoSwitcher": false,
"colorSwitcher": false

To keep the colour switcher on some demos only, leave colorSwitcher on in site.json and add "colorSwitcher": false to the demo.json of the others.

Removing them from the HTML files#

Near the end of every page, delete these three blocks (from the opening tag to its closing tag):

HTML

&lt;button class="demo-switcher-btn" …&gt; … &lt;/button&gt;
&lt;div class="offcanvas offcanvas-start demo-switcher" id="demoSwitcher" …&gt; … &lt;/div&gt;
&lt;div class="color-switcher" data-color-switcher="…"&gt; … &lt;/div&gt;

How the colour switcher works#

It offers the default colours plus the demo's colors list (up to 9 more). See Colours and fonts.
A visitor's choice is remembered in their browser for that demo, so it stays as they move between pages.
Text colours adjust automatically so buttons stay readable on light schemes.