Toggles have a problem: the state the toggle is in is the opposite of the action taken when the toggle is clicked.
E.G. if my toggle is on, it should display that it is on, but if I click the toggle, it should become off. So should the toggle visually indicate the state it is in ("on") or the action the user is taking ("off").
Is there a best practice for solving this dilemma?
I think you're forgetting that labelling doesn't need to be inherent to the switch/toggle mechanism's shape and size and can, therefore, exist outside of the visual representation of the switch/toggle's mechanic.
And this is exactly how a light toggle/switch works.
ON < === OFF
You push the toggle towards the state you want.
Obviously the thing I've failed to show is that this is normally vertical. But consider this... if you put the labels outside the toggle mechanism, there's no chance of ambiguity, and the toggle is now a perfectly understandable switch/state mechanism.
