work.suroh.tk/_includes/components/theme-switcher.webc

<label class="switch-input">
  <span class="visually-hidden">Enable setting</span>
  <input type="checkbox" role="switch" class="visually-hidden" />
  <span class="switch-input__thumb" aria-hidden="true"></span>
</label>


<script type="module">
customElements.define('theme-switcher', class extends HTMLElement {
  currentTheme
  preferDark

  constructor() {
    super()

    this.preferDark = window.matchMedia("(prefers-color-scheme: dark)")
  }

  connectedCallback() {
    const checkbox = this.querySelector('input[type="checkbox"]')
    this.currentTheme = localStorage.getItem('theme')

    if (this.currentTheme == 'dark') {
      checkbox.checked = true
      document.body.classList.toggle('dark')
    } else if (this.currentTheme == 'light') {
      checkbox.checked = false
      document.body.classList.toggle('light')
    } else {
      console.log(this.preferDark)
      checkbox.checked = this.preferDark
    }

    checkbox.addEventListener('click', () => {
      let theme
      if (this.preferDark.matches) {
        document.body.classList.toggle("light")
        theme = document.body.classList.contains("light")
          ? "light"
          : "dark"
      } else {
        document.body.classList.toggle("dark")
        theme = document.body.classList.contains("dark")
          ? "dark"
          : "light"
      }

      localStorage.setItem("theme", theme)
    })
  }
})
</script>

<style webc:scoped>
/* Styles */
:host {
  --switch-input-thumb-size: 0.88em;
  --switch-input-thumb-bg: var(--bg-colour);
  --switch-input-thumb-stroke: 1px solid var(--primary-colour-25);
  --switch-input-off-bg: var(--neutral-100);
  --switch-input-off-text: var(--neutral-900);
  --switch-input-on-bg: var(--neutral-100-25);
  --switch-input-on-text: var(--neutral-100);
  --switch-input-gutter: 1px;
  --switch-input-decor-space: var(--switch-input-gutter) 0.5ch;
  --switch-input-focus-stroke: 2px solid #ff6978;
  --switch-input-font-weight: bold;
  /* --switch-input-font-family: sans-serif; */
  --switch-input-font-size: 50cqw;
  --switch-input-transition: inset 50ms linear;

  display: grid;
}

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

.switch-input {
  width: calc(
    (var(--switch-input-thumb-size) * 2) + (var(--switch-input-gutter) * 3)
  );
  height: calc(
    var(--switch-input-thumb-size) + (var(--switch-input-gutter) * 2)
  );
  border-radius: calc(
    var(--switch-input-thumb-size) + var(--switch-input-gutter)
  );
  padding: var(--switch-input-gutter);
  background: var(--switch-input-off-bg);
  color: var(--switch-input-off-text);
  text-align: left;
  text-transform: uppercase;
  font-family: var(--switch-input-font-family);
  font-weight: var(--switch-input-font-weight);
  position: relative;
  cursor: pointer;
  container-type: inline-size;
}

.switch-input__decor {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  padding: var(--switch-input-decor-space);

  /* Font size lives here because we wanna use container units */
  font-size: var(--switch-input-font-size);

  /* Legacy */
  display: flex;
  width: 100%;
  /* align-items: center; */

  /* Future */
  /* align-content: center; */
  /* display: block;
  block-size: 100%; */
  user-select: none;
}

.switch-input__decor[data-switch-input-state="off"] {
  justify-content: flex-end;
}

.switch-input__thumb {
  display: block;
  width: var(--switch-input-thumb-size);
  height: var(--switch-input-thumb-size);
  border-radius: var(--switch-input-thumb-size);
  background: var(--switch-input-thumb-bg);
  border: var(--switch-input-thumb-stroke);
  z-index: 1;
  position: absolute;
  inset-block-start: var(--switch-input-gutter);
  inset-inline-start: var(--switch-input-gutter);
  transition: var(--switch-input-transition);
}

/* Could do this */
/* .switch-input:has(:focus) .switch-input__thumb {
  outline: var(--switch-input-focus-stroke);
} */

/* Better pointer experience. Still uses has because focus visible would have to be put direct on the checkbox */
.switch-input:has(:focus-visible) .switch-input__thumb {
  outline: var(--switch-input-focus-stroke);
}

.switch-input:has(:checked) {
  background: var(--switch-input-on-bg);
  color: var(--switch-input-on-text);
}

.switch-input:has(:checked) .switch-input__thumb {
  inset-inline-start: calc(
    var(--switch-input-thumb-size) + (var(--switch-input-gutter) * 2)
  );
}
</style>