Fancy Theme Toggle

A fancy theme toggle web component

As seen on https://www.instagram.com/reel/C4bA-9cC0kZ/

Import

import { FancyThemeToggle } "fancy-theme-toggle";
customElements.define("my-theme-toggle", FancyThemeToggle);

Initial value

<!-- Unchecked (light mode) -->
<fancy-theme-toggle></fancy-theme-toggle>

<!-- Checked (dark mode) -->
<fancy-theme-toggle checked></fancy-theme-toggle>

Listening to changes

<fancy-theme-toggle></fancy-theme-toggle>

<script>
  const toggle = document.querySelector("fancy-theme-toggle");

  toggle.addEventListener("change", (event) => {
    const isDark = event.target.checked;
  });
</script>

Updating toggle programmatically

<fancy-theme-toggle></fancy-theme-toggle>

<script>
  const toggle = document.querySelector("fancy-theme-toggle");

  toggle.setAttribute("checked", ""); // dark
  toggle.removeAttribute("checked"); // light
  toggle.click(); // toggle between light and dark
</script>

Styling

Animations

The animation duration can be customised by overwriting the --ftt-duration custom property.

fancy-theme-toggle {
  --ftt-duration: 600ms;
}

Size

The toggle is 32x80 pixels by default.
You can customize this by overwriting the --ftt-height custom property. The width of the toggle will update accordingly.

fancy-theme-toggle {
  --ftt-height: 64px;
}

Display

The fancy-theme-toggle element uses display: inline-grid.
If you want it to be block level, you can use display: grid instead.

fancy-theme-toggle {
  display: grid;
}