That's a very good point, but it requires a lot of code:

  <form id=theme>
    <label for=theme-l>light</label><input id=theme-l type=radio name=theme value=l>
    <input id=theme-d type=radio name=theme value=d checked><label for=theme-d>dark</label>
  </form>
  <style>
    input:checked{position:relative;z-index:1}
    input+input{margin-left:-1em}
  </style>

It is ugly, hard to style right, doesn't have toggle semantics, and needs strange code like theme.theme.value to get the value.

I'd much rather write:

  <select type=switch id=theme>
    <option value=l>light</option>
    <option value=d selected>dark</option>
  </select>

And it'd be an actual switch with one label on each side and I'd get the value with theme.value

If you nest the input and label you can get rid of "for" and "id":

  <label>light<input type=radio name=theme value=l></label>

That's totally valid HTML. Unfortunately, voice control software (Dragon NaturallySpeaking, macOS's feature) doesn't recognize the relationship unless it's explicit.

Radio buttons can be used to select one of any number of choices. Toggles are strictly limited to two.

Which is what a checkbox is. A switch element seems needlessly duplicative. A checkbox and a switch have the same purpose. I don't mind it entirely after all we have plenty of block level elements that do the same things as one another. This just feels like a solution in search of a problem.

Not really. A checkbox toggles between two binary states of a single option. A toggle switches between two different options.

UI design isn't simple. You can't just pick basic options. Getting it right takes a lot of effort.

A switch is not for choosing between two options. It has two states, on and off, and it should be named in a way that makes sense with that in mind ("Dark mode" not "Dark/Light").

A checkbox can actually have 3 states, checked, unchecked, indeterminate/mixed.