Jonathan Batchelor

Plug and Play theme switcher using WebC

2026-10-09T00:00:00Z

When I started dabbling with 11ty (now Build Awesome) I quickly found the fantastic resource of 11tybundle by Bob Monsour. I noticed that it had a pretty nifty theme switching toggle button. I also read about a new type of component that Zach Leatherman (the creator of 11ty) had built - WebC. This led me to wonder if a theme switching component could be made in WebC that could be easily dropped into an 11ty site and be up and running with minimal configuration. Bob was happy for me to use the code from 11tybundle (written by Damian Walsh) to give it a go...

WebC

A WebC component is a mostly self-contained package of HTML, CSS and Javascript. WebC support currently needs enabling in 11ty/Build Awesome - the 11ty documentation is the best place to go for that information (Build Awesome WebC documentation). Once done, I drop my entire theme-switcher.webc file into the _components folder and can then import into my base template (details below). Note: This article describes my component as it is at the time of writing, but it may have changed since then - feel free to check out the page source and I'll try and make sure the webc file linked at the bottom is the current version.

Now we'll look at the structure of the .webc file.
(A download link for the full file is at the bottom of the page)

HTML

We start with a form for the switcher itself:

<form id="theme-switcher-form" class="hidden">
  <fieldset>
    <legend class="visually-hidden">Theme</legend>
    <label>
      <input type="radio" name="theme" value="auto" />
      <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" eleventy:ignore>
        <use href="#theme-switcher-icon-sun-moon"></use>
      </svg>
      Auto</label>
    <label>
      <input type="radio" name="theme" value="light" />
      <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" eleventy:ignore>
        <use href="#theme-switcher-icon-sun"></use>
      </svg>
      Light</label>
    <label>
      <input type="radio" name="theme" value="dark" />
      <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" eleventy:ignore>
        <use href="#theme-switcher-icon-moon"></use>
      </svg>
      Dark</label>
  </fieldset>
</form>

Sprite Sheet

To keep everything as self contained as possible, we include a small spritesheet with icons that can be re-used. I've pulled sun-moon, sun and moon from the Lucide project:

<svg width="0" height="0" aria-hidden="true" id="theme-switcher-icon-sheet" viewbox="0 0 24 24">
  <defs>
    <g id="theme-switcher-icon-sun-moon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-moon preview-icon">
      <path d="M12 2v2"/><path d="M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715"/><path d="M16 12a4 4 0 0 0-4-4"/><path d="m19 5-1.256 1.256"/><path d="M20 12h2"/>
    </g>
    <g id="theme-switcher-icon-moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79" />
    </g>
    <g id="theme-switcher-icon-sun" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      <circle cx="12" cy="12" r="5"></circle>
      <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
    </g>
  </defs>
</svg>

CSS

Following the HTML, some basic CSS styling is added with a few CSS variables with fallback defaults to enable styling in the main stylesheet: --theme-switcher-background-color, --theme-switcher-border-color, --theme-switcher-hover-color and --theme-switcher-hover-text-color. More variables could be broken out, but this works for me.

<style webc:scoped>
  .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .hidden,
  #theme-switcher-icon-sheet {
    display: none;
  }

  form {
    background: var(--theme-switcher-background-color, white);
  }

  fieldset {
    border: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs, 2rem);
    justify-content: center;
    transition:
      opacity 150ms ease-in-out 25ms,
      transform 150ms ease-in-out 25ms;
  }

  [type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  label {
    display: flex;
    gap: var(--space-3xs, 1rem);
    align-items: center;
    justify-content: center;
    padding: var(--space-2xs, 2rem) var(--space-xs, 3rem);
    cursor: pointer;
    width: max-content;
    border: 1px solid var(--theme-switcher-border-color, gray);
    border-radius: 999px;
    transition-property: background-color;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;

    &:hover {
      background: var(--theme-switcher-hover-color, lightyellow);
      color: var(--theme-switcher-hover-text-color, gray);
    }
  }
</style>

Javascript

Finally the javascript is based on that from 11tybundle with just a few tweaks to choose the appropriate icons from the sprite sheet etc.

<script>
  function setInitialTheme() {
    const savedTheme = localStorage.getItem("theme");
    let effectiveTheme;
    if (savedTheme && savedTheme !== "auto") {
      effectiveTheme = savedTheme;
    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      effectiveTheme = "dark";
    } else {
      effectiveTheme = "light";
    }
    document.documentElement.setAttribute("data-theme", effectiveTheme);
  }
  setInitialTheme();

  function updateThemeToggleButton(theme) {
    const btn = document.querySelector(
      'button.theme-switcher[aria-controls="theme"]',
    );
    if (!btn) return;
    const use = btn.querySelector("use");
    if (!use) { console.log("can't access btn.querySelector"); return;}
    if (theme === "dark") {
      use.setAttribute("href", "#theme-switcher-icon-moon");
    } else if (theme === "light") {
      use.setAttribute("href", "#theme-switcher-icon-sun");
    } else {
      use.setAttribute("href", "#theme-switcher-icon-sun-moon");
    }
  }

  document.addEventListener("DOMContentLoaded", () => {
    const savedTheme = localStorage.getItem("theme");
    updateThemeToggleButton(savedTheme || "auto");

    const themeButton = document.querySelector(
      'button.theme-switcher[aria-controls="theme"]',
    );
    const themeForm = document.getElementById("theme-switcher-form");
    if (!themeForm) return;
    const themeRadios = themeForm.querySelectorAll('input[type="radio"]');

    function updateTheme(theme) {
      if (theme === "auto") {
        localStorage.setItem("theme", "auto");
        const prefersDark = window.matchMedia(
          "(prefers-color-scheme: dark)",
        ).matches;
        document.documentElement.setAttribute(
          "data-theme",
          prefersDark ? "dark" : "light",
        );
      } else {
        document.documentElement.setAttribute("data-theme", theme);
        localStorage.setItem("theme", theme);
      }
      updateThemeToggleButton(theme);
    }

    function initializeControls() {
      const savedTheme = localStorage.getItem("theme");
      if (savedTheme) {
        const el =
          themeForm.querySelector(`input[value="${savedTheme}"]`) ||
          themeForm.querySelector('input[value="auto"]');
        if (el) el.checked = true;
      } else {
        const el = themeForm.querySelector('input[value="auto"]');
        if (el) el.checked = true;
      }
    }

    themeButton.addEventListener("click", () => {
      const themeForm = document.getElementById("theme-switcher-form");
      themeForm.classList.toggle("hidden");
      themeForm.classList.toggle("visible");

      const expanded = themeButton.getAttribute("aria-expanded") === "true";
      themeButton.setAttribute("aria-expanded", String(!expanded));
    });

    themeRadios.forEach((radio) => {
      radio.addEventListener("change", (e) => {
        updateTheme(e.target.value);
      });
      radio.addEventListener("click", () => {
        const themeButton = document.querySelector(
          'button.theme-switcher[aria-controls="theme"]',
        );
        if (themeButton) {
          themeButton.click();
        }
      });
    });

    const mql = window.matchMedia("(prefers-color-scheme: dark)");
    const mqlHandler = (e) => {
      const isAuto = themeForm.querySelector('input[value="auto"]')?.checked;
      const saved = localStorage.getItem("theme");
      if (isAuto || saved === "auto") {
        document.documentElement.setAttribute(
          "data-theme",
          e.matches ? "dark" : "light",
        );
        updateThemeToggleButton("auto");
      }
    };
    if (typeof mql.addEventListener === "function") {
      mql.addEventListener("change", mqlHandler);
    } else if (typeof mql.addListener === "function") {
      mql.addListener(mqlHandler);
    }

    initializeControls();
  });
</script>

Adding to the site template

Once webc is set up and the .webc file is added to the 11ty install, you can include the component in your site's main template.

First of all, add a <button> to trigger the theme switch:

<button class="theme-switcher" aria-controls="theme" data-target="theme" aria-label="Theme settings">
    <svg class="icon" height="24px" width="24px" viewBox="0 0 24 24"><use href="#theme-switcher-icon-sun-moon"></svg>
</button>

This can use an icon from the theme switcher's sprite sheet as above.

Then include the theme switcher itself - I am currently using Liquid (but it's the same for Nunjucks) for my templates and after installing the RenderPlugin in the 11ty configuration, you can include it in your template:

{% renderTemplate "webc" %}<theme-switcher></theme-switcher>{% endrenderTemplate %}

This can be placed wherever you need it, but I place it immediately after my button within the <li> element, meaning I can use my site's stylesheet to position it where I want it:

.primary-navigation ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  min-height: 24px;

  li:has(button.theme-switcher){
    position: relative;
  }

  button.theme-switcher {
    border: 0;
    background: transparent;
    color: var(--accent);
    svg { 
        stroke-width: 1.5px; 
    }
  }
}

theme-switcher {
  position: absolute;
  top: 100%;
  --theme-switcher-border-color: var(--border);
  --theme-switcher-hover-color: var(--bg);/* contrast-color(var(--accent-2));*/
  --theme-switcher-hover-text-color: var(--accent-2);
  --theme-switcher-background-color: var(--surface);
  form {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--space-3xs);
    border: var(--border);
    font-size: var(--step--1);
  }
}

Loading the WebC component's CSS and Javascript

There is one last step - getting the CSS and Javascript from the WebC component into the template. I have added these two lines to my site template's <head> section which pull them in as dynamically created files along with any other styles and js from other components:

<link rel="stylesheet" href="{% getBundleFileUrl 'css' %}"/>
<script src="{% getBundleFileUrl 'js' %}"></script>

You can also have them put directly into the head if you prefer.

Et voilà!

A re-usable theme switching component in WebC!

Feel free to download the full file as used on my site from here: theme-switcher.webc (If you get a blank page, view the source!)

Let me know how you're using it or if you have any improvements via my Mastodon!

Plant monitor alert with Home Assistant and M5Stack Atom Lite

2025-05-01T10:05:54Z

After following this guide on YouTube from The Home Automation Guy, I thought I’d try and take it one step further and add an alert function using the M5Stack’s LED.

In the ESP Home configuration for the Atom, I added the following section to add a control for the LED:

light:
  - platform: neopixelbus
    type: GRB
    variant: SK6812
    pin: 27
    num_leds: 1
    id: status_led
    name: "Status LED"
    internal: False
    default_transition_length: 2s
    effects: 
      - pulse:
          name: "Slow Pulse"
          transition_length: 1s
          update_interval: 3s
    initial_state:
      state: False

This appears in Home Assistant as a light entity.

As the M5Stack Atom Lite is in the bedroom (mounted behind the TV), I didn’t want it lighting up in the night when we’re sleeping. I added a Helper Schedule defining awake hours - schedule.awake_hours.

Then I added an automation to Home Assistant using the automation builder. It produced the following YAML for me:

alias: Water Swiss Cheese Plant
description: ""
triggers:
  - trigger: state
    entity_id:
      - plant.swiss_cheese_plant
    from: null
    to: null
    id: swiss_cheese_plant_state_change
  - trigger: state
    entity_id:
      - schedule.awake_hours
    from: null
    to: null
conditions: []
actions:
  - if:
      - condition: state
        entity_id: schedule.awake_hours
        state: "on"
    then:
      - if:
          - condition: state
            entity_id: plant.swiss_cheese_plant
            state: problem
        then:
          - action: light.turn_on
            metadata: {}
            data:
              rgb_color:
                - 255
                - 0
                - 0
              effect: Slow Pulse
            target:
              entity_id: light.m5stackatom_status_led
        else:
          - if:
              - condition: state
                entity_id: plant.swiss_cheese_plant
                state: ok
              - condition: trigger
                id:
                  - swiss_cheese_plant_state_change
            then:
              - action: light.turn_on
                metadata: {}
                data:
                  rgb_color:
                    - 0
                    - 255
                    - 0
                  effect: None
                target:
                  entity_id: light.m5stackatom_status_led
              - delay:
                  hours: 0
                  minutes: 1
                  seconds: 0
                  milliseconds: 0
              - action: light.turn_off
                metadata: {}
                data: {}
                target:
                  entity_id: light.m5stackatom_status_led
            else:
              - action: light.turn_off
                metadata: {}
                data: {}
                target:
                  entity_id: light.m5stackatom_status_led
    else:
      - action: light.turn_off
        metadata: {}
        data: {}
        target:
          entity_id: light.m5stackatom_status_led
mode: single

This will be triggered either by the plant state changing or by the awake hours schedule changing.

If it is within the awake hours (schedule.awake_hours is on) then it checks to see if the plant is in a problem state and if so turns on the led with a red slow pulse effect. If the plant isn’t in a problem state then it checks to see if the plant triggered the automation and if so sets the led to green for one minute then turns it off. If the plant is in an ok state and didn’t trigger the automation (i.e. the schedule did) then the led is turned off.

Finally if the automation is triggered but it’s outside the schedule time (or the schedule changes to off) then the led is turned off.

Adding Single Sign On (SSO) to Caddy

2023-03-02T13:30:39Z

I'd previously used Authelia to have SSO on my Traefik setup so was looking for something similar to this on Caddy. This led me to caddy-security and the associated https://authp.github.io, however nothing was very clear as to where to go with this. Fortunately I found this blog post which went a long way to explaining things!

Install

Rather than messing about with any downloads, initially I simply swapped out the image: line in my docker-compose.yml:

    # image: caddy:2
    image: "ghcr.io/authp/authp:v1.0.1"

I realise that this is possibly risky in that it uses caddy:latest, so doesn't pin a specific version of Caddy. Copying the Dockerfile from https://github.com/authp/authp/blob/main/Dockerfile and updating for your requirements could be a better option and one that I will investigate at a later date.

Running docker compose up -d --build caddy pulled and built a new image, which I verified had the extra modules:

$ docker compose exec -w /etc/caddy caddy caddy list-modules
[...]
dns.providers.cloudflare
http.authentication.providers.authorizer
http.handlers.authenticator
http.handlers.trace
security
security.secrets.aws_secrets_manager

  Non-standard modules: 6

I checked at this point that everything was still working.

Configuration

Trying to keep things simple I wanted to just secure some sites for just me using a local user database. To start with I didn't want any external authentications, signups or service listings, but these are all possible.

I started with adding the following to the global section of my Caddyfile, just underneath the email setting (shown here for completeness):

{
	email example@example.com
	order authenticate before respond
	order authorize before reverse_proxy

	security {
                local identity store localdb {
                        realm local
                        path /etc/caddy/auth/local/users.json
                }

                authentication portal auth {
                        enable identity store localdb
                        cookie domain example.com
                        cookie lifetime 86400 # 24 hours in seconds
                	
			transform user {
				match origin local
				action add roll authp/user
			}
		}

		authorization policy user_policy {
			set auth url https://auth.example.com
			allow rolls authp/user
		}
	}
}

(Update example.com to your domain)

I reloaded caddy to check things were still working and to generate the local identity store and secrets:

$ docker compose exec -w /etc/caddy caddy caddy reload

Everything looked good and was still working.

$ sudo tree caddy
caddy
├── auth
│   └── local
│       └── users.json
└── Caddyfile

I then updated the users.json to change the default user to my details and change the password hash appropriately.[^1] [^1]: I used the info from the authp site here: https://authp.github.io/docs/authenticate/local/password-management With the bcrypt-cli binary ending up at ~/go/bin/bcrypt-cli after using the go install command.

Finally I added the auth endpoint and a test site to the Caddyfile:

auth.example.com {
        authenticate with myportal
}

test.example.com {
        authorize with users_policy
        root * /sites/test.example.com
        file_server
}

Et volia! Navigating to my test site requires now requires me to log in via my SSO portal. :tada:

Changing Passwords

I never worked this out in Authelia, but with one extra line in the transform user section, a link is added for logged in users at your portal site to change their settings including their password:

ui link "Portal Settings" /settings icon "las la-cog"

Multi Factor Authentication (MFA)

When I was running Authelia, I set up MFA using TOTP in my password manager, fortunately this is quite easy to add to Caddy!

After adding the Settings link as above, add a further line to the transform user section:

require mfa

Reload Caddy and use the Settings page on the portal to add your MFA app. Thats it!

Final thoughts

Now that I've got past the first barrier of the authp docs where the Getting Started section was a bit sparse, it seems pretty easy to get this working. Hopefully this write up will help others make this work!

Please go to this post on Mastodon to add any comments or suggestions!

Self-hosting with Caddy and Docker

2023-02-20T13:35:48Z

After re-building my VPS because things were a bit messy, I decided to move away from the rather complicated Traefik setup that I had before and move over to Caddy. This took a little while to get my head around, but ultimately is much simpler!

Docker compose

I'm running Caddy within a docker compose environment using a pretty basic setup in a docker-compose.yml file:

version: "3.7"

networks:
  default:
    name: caddy-proxy

volumes:
  caddy_data:
    external: true
  caddy_config

services:
  caddy:
    image: caddy:2.6.4
    container_name: caddy
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
      - "443:443/udp"
    volumes:
      - $PWD/caddy:/etc/caddy
      - $PWD/sites:/sites
      - caddy_data:/data
      - caddy_config:/config

Caddyfile

My Caddyfile sits in the caddy subdirectory and is really very simple:

{
	email: example@example.com
}

www.example.com {
	redir https://example.com{uri}
}

example.com {
	root * /sites/example.com
	file_server
}

Here I'm removing the www with a redirect, then I'm serving files from a directory under the mounted /sites directory which was mounted into the caddy container by docker. I can then just copy over my public folder from hugo to serve up this site. Caddy handles all the letsencrypt certificates and things without any messing about!

More services

With this setup it's pretty simple to add more services and use Caddy as proxy, for example FreshRSS:

Addition to the services section of docker-compose.yml:

  freshrss:
    image: freshrss/freshrss:latest
    container_name: freshrss
    restart: unless-stopped
    logging:
      options:
        max-size: 10m
    volumes:
      - $PWD/freshrss/data:/var/www/FreshRSS/data
      - $PWD/freshrss/extensions:/var/www/FreshRSS/extensions
    environment:
      - TZ=Europe/London
      - CRON_MIN='2,32'

and the Caddyfile addition:

freshrss.example.com {
	reverse_proxy freshrss:80
}

Comments

Please go to this post on Mastodon to add any comments or suggestions!