My iPad has iOS 17.4.1, but I do have access to an old iPhone with iOS 15.8.2. The dark scheme partially works on it, but I see that the logo is not changing. It shows the elephant and unicorn logos instead of the dragon horse and (fairy) princess logos even when it is in dark mode. By substituting an older CSS file in index.html, I could tell that color-mix was not working, and blue but especially indigo did not contrast well with the dark background. I found this iPhone had the same problems in both Firefox and Chrome. At least using custom properties instead of color-mix has fixed the problem with the link text color.
To get the logo to change, I tried using the <picture> tag. As I feared, it would not work unless dark mode was selected at the browser level. This is why I normally use CSS to switch the logo. Chrome and Safari did not provide me any means to select dark mode at the browser level, though Firefox did. But when I selected dark mode in Firefox at the browser level, it wasn't working. Using test pages, I got it to work for browser selected dark mode by removing a test using :not. But doing this disabled the ability to select the light scheme from the menu when the browser's dark mode is turned on. I tried to fix this, and while my fix works on my desktop, it does not work in the Firefox app on this iPhone. So, I have no solution for getting the right logo to show up on this older iPhone that would work equally well with both methods of selecting the color scheme.
My iPad has iOS 17.4.1, but I do have access to an old iPhone with iOS 15.8.2. The dark scheme partially works on it, but I see that the logo is not changing. It shows the elephant and unicorn logos instead of the dragon horse and (fairy) princess logos even when it is in dark mode. By substituting an older CSS file in index.html, I could tell that color-mix was not working, and blue but especially indigo did not contrast well with the dark background. I found this iPhone had the same problems in both Firefox and Chrome. At least using custom properties instead of color-mix has fixed the problem with the link text color.
To get the logo to change, I tried using the
<picture>tag. As I feared, it would not work unless dark mode was selected at the browser level. This is why I normally use CSS to switch the logo. Chrome and Safari did not provide me any means to select dark mode at the browser level, though Firefox did. But when I selected dark mode in Firefox at the browser level, it wasn't working. Using test pages, I got it to work for browser selected dark mode by removing a test using :not. But doing this disabled the ability to select the light scheme from the menu when the browser's dark mode is turned on. I tried to fix this, and while my fix works on my desktop, it does not work in the Firefox app on this iPhone. So, I have no solution for getting the right logo to show up on this older iPhone that would work equally well with both methods of selecting the color scheme.