Implement live colour palette previews

[joeroe]

They're just CSS files, so should be possible to switch them without rebuilding the site. Maybe just on the example site, to avoid any JS dependencies.

[BachoSeven]

On a related note, how hard would it be to implement a theme-switching button for this template (aka light/dark mode)?

[aziis98]

A very bare bones solution for the example site could be to add the following HTML and JS

<select id="theme-selector">
  <option value="base16-light">Base16 Light</option>
  <option value="base16-dark">Base16 Dark</option>
  <option value="gruvbox-dark">Gruvbox Dark</option>
  <option value="gruvbox-light">Gruvbox Light</option>
  ...
</select>

const themeLinkEl = document.querySelector(`link[href^='https://risotto.joeroe.io/css/palettes']`)

document.getElementById('theme-selector').addEventListener('change', e =>
  themeLinkEl.href = `https://risotto.joeroe.io/css/palettes/${e.target.value}.css`
)

I tried doing this in the devtools and we just need to change the href of the <link> tag pointing to the right theme.

For a light/dark theme switch just change the <select> to only have two themes and add a default theme as follows

<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

(the link tag with the media query prevents the initial flickering and should even work with JS disabled)