11ty Logo

Eleventy Edge: Dark Mode Toggle

← Return to the Full list of Eleventy Edge Demos


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 action="{{ page.url }}">
{% 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 %}
<button type="submit">Save</button>

Edge Function