Eleventy Edge: Dark Mode Toggle

Zero client-side JavaScript required. Disable JavaScript and try it out!
Supports overriding the system default without JavaScript.
Saves preference to a cookie without JavaScript (Secure/HttpOnly). Only you can reduce cookie fingerprinting 😅
Preference is applied site-wide, try navigating around to a different page!
Progressive Enhancement baseline, enhances with JS to autosubmit on element change.

Learn more on 11ty.dev: Eleventy Edge Plugin documentation

Source Code

Edge rendered Class in Layout file layout.liquid

<html lang="en"{% edge "liquid" %} class="theme-{{ eleventy.edge.cookies.appearance | default: "auto" | escape }}"{% endedge %}>

Edge rendered Form

With form-autosubmit web component to auto-submit the Form on radio change event.

<form-autosubmit>
  <form action="{{ page.url }}">
    <fieldset>
      <legend>Appearance</legend>
      {% edge %}
      {% assign appearance = eleventy.edge.cookies.appearance | default: "auto" | escape %}
      <label><input type="radio" name="appearance" value=""{% if appearance == "auto" %} checked{% endif %}>Auto (System Default)</label>
      <label><input type="radio" name="appearance" value="dark"{% if appearance == "dark" %} checked{% endif %}>Dark</label>
      <label><input type="radio" name="appearance" value="light"{% if appearance == "light" %} checked{% endif %}>Light</label>
      {% endedge %}
    </fieldset>
    <button type="submit">Save</button>
  </form>
</form-autosubmit>

Edge Function

./netlify/edge-functions/dark-mode.js