Theme selector with previous dark theme colors

[fcoveram]

Description

On staging, I noticed that after changing from system (default) to dark, the component kept showing the previous color scheme (dark pink shade).

Reproduction

mode.selector.recording.mp4

1. Go to staging.openverse.org
2. On homepage's footer, click on the theme select
3. Select "Dark"
4. Click out of the component to unfocus
5. See the color mismatch

[dhruvkb]

This is specific to Safari so I have reduced the priority to low.

It is caused by the combination of two factors:

• Safari doesn't support the click event on the <select> field.
• Safari isn't storing cookies from staging.openverse.org or openverse.org.

The second factor should be extracted into a separate issue.

[obulat]

@dhruvkb, why doesn't Safari store cookies? That would be a big problem for rendering, wouldn't it?

[obulat]

One more problem I can see in Safari: the select becomes white inside on the light mode.

I've also noticed it being pink in the dark (or system, I'm not sure now) mode in Arc, but I couldn't reliably reproduce it.

[dhruvkb]

I have not observed this problem at all in Arc or Firefox but it does occur in Safari. That's because Safari does not handle click events on <select>. I've pushed a fix for Safari in PR #5216 to use focus event instead of click, which also works on other browsers.

As for the cookies, after debugging this for an entire day, all I could tell is that Safari is very finicky about cookies (in the name of privacy) and does not store any cookies for Openverse.org at all. It's receiving the cookies in the response, parsing them too but then discarding them instead of storing. I need to try this again without extensions to be certain it's not one my extensions that's responsible for this behaviour.