The disagreement was actually all over whether the question was about a switch or a button, and so some people were answering as though it was a switch, and some people were answering as though it was a button - switches and buttons do indeed have opposite approaches usually (a switch usually shows the current state - such as "on" - but a button shows what action will be triggered by pressing it, such as "play").

There was a thread elsewhere asking whether a toggle should show current state or the state desired.

there it is

that post is about toggle buttons, not switches. e.g. a play pause button, when pressed, does it show play, or does it show pause?

It really depends on the type of control and what it's controlling. As this is a switch, you'd expect the current state to be what's shown on the same side as the slider-- in this case, the slider is a sun in dark mode and a moon in light mode, which is the opposite way.

The designer team once did a toggle button with the inverse logic and I was so confused when I had to implement that. It must be my antithesis.

I've wondered what this problem was for years but never cared to figure it out, because it always resolved after the first button press (just refresh the page and it all works properly). turns out it is something wrong with my use of local storage to save your theme state. if you don't have the key in local storage then it does what you mentioned. I just need to switch this to prefers-color-scheme anyway.

It works if you visited the website already but the first time it breaks: reloading fixes this while emptying the caches breaks it again. As another user pointed out the first click after emptying the cache doesn’t do anything at all even though the animation plays out just fine

EDIT: I’m on safari ios, latest stable (17.3.1 if I’m not mistaken)

It shouldn't be like that. on my computer it shows the sun when it's in light mode, moon in dark mode.