Theme switching (light/dark)

[joeroe]

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

Originally posted by @BachoSeven in #50 (comment)

[jrgn9]

I looked into how hard it would be to do myself and stumbled upon this: https://yonkov.github.io/post/add-dark-mode-toggle-to-hugo/

I haven't looked too closely on it. But it would be fantastic to be able to just set dark and light palette, and then get a switch for it.

[BachoSeven]

On my site, I ended up implementing it as in #50 (comment) but even simpler, still using the media query (without any button):

BachoSeven/bachoseven.github.io@aa597a2#diff-96dd75a968976edd5e03170268ed9085733f75c3fb24f992ae613c89e6de42dc

This uses an additional paletteLight variable in [params.theme] for configuration.

[elMuso]

I have done a similar thing as the solutions described above but i use 2 palettes one for dark and one for light. This one just modifies the head.html like this

<!-- risotto theme -->
{{ $light := .Site.Params.theme.palette_light | default "base16-light" }}
{{ $dark := .Site.Params.theme.palette_dark | default "base16-dark" }}

<link id="ht-l" rel="stylesheet" href="{{ printf "css/palettes/%s.css" $light | absURL }}">
<link id="ht-d" rel="stylesheet" href="{{ printf "css/palettes/%s.css" $dark | absURL }}">

<script>
(function() {
  const get = (i) => document.getElementById(i);
  
  const apply = (t) => {
    get('ht-l').disabled = (t === 'dark');
    get('ht-d').disabled = (t === 'light');
    localStorage.setItem("htheme", t);
  };

  window.toggleTheme = () => {
    apply(get('ht-l').disabled ? "light" : "dark");
  };

  // Determine starting theme
  const saved = localStorage.getItem("htheme");
  const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  
  // Logic: Use saved, else use system
  const initial = saved || (systemDark ? "dark" : "light");
  
  apply(initial);
})();
</script>
<!-- Rest of css -->
<link rel="stylesheet" href="{{ "css/risotto.css" | absURL }}">
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">

Then in the hugo.toml i just specify the palettes like this

[params.theme]
palette_light = "tokyo-night-light"
palette_dark = "tokyo-night-dark"

toggleTheme is a function exposed globally, as a downside, you really don't know when a theme is active unles you check the htheme variable, but for me this is more than enough.

[joeroe]

I think this is a good approach and would be very grateful for a PR.