On/Off labels confuse me. I often click on ‘On’ when I want to enable something (this is how you do with a mechanical switch) only to discover that I likely disabled the thing. Old school checkbox is less confusing and doesn’t require additional words.
Is it? Dark mode/light mode toggles are very new and are now everywhere. It's a single image of either a sun or a moon with no text whatsoever. Half the sites show the sun when light mode is on and half the sites show the moon when light mode is on. Is the toggle supposed to reflect the current state? Or is it supposed to tell you what's going to happen when it gets clicked?
To me, the paradigm only works if both sides are labeled in both states.
Light [* ] Dark
This is essentially how a physical switch would be labeled, and is the best way to prevent ambiguity - the current state is the label that the switch is closest to.
But most implementations don’t do that. And I can understand why, because the following…
For example:
A checkbox with a good label [1] is fine, and it's better in the sense that it has a third state (for indeterminate).[1] https://blog.uidrafter.com/guidelines-for-checkboxes