In my recent GoveeBTTempLogger Project I’ve been writing SVG files as temperature graphs. I realized I could organize the color combinations with CSS Style descriptions inside the SVG instead of fully describing each element of the graphic. I am using transparent backgrounds by default, and loading the SVG files in a simple index html file like any other image.
Playing with CSS in the HTML, I came across the ability to support dark-mode. I thought that this would be really nice for when I bring up the graphs on my phone late at night, not having everything being in a bright white background.
@media screen and (prefers-color-scheme: dark) {
body {
background-color: black;
color: grey;
}
}
I added the previous block to my style in the index.html file, which overrides the default body style of background-color: white and color: black. It works nicely at the top level, but now the black lines and text in my SVG became invisible, since now they match the background.
I tried something similar in the style for my SVG and it was working great in Chrome or Microsoft Edge. But then I realized that it doesn’t work on my phone. After realizing that it wasn’t working correctly on the phone, I decided to try switching the defaults so my default used grey, and if light mode was selected it would use black. It still didn’t work! It seems that apple is paying attention to my color-scheme selection, but doing something different from any other browser.
<style>
text { font-family: sans-serif; font-size: 12px; fill: grey; }
line { stroke: grey; }
polygon { fill-opacity: 0.5; }
@media screen and (prefers-color-scheme: light) {
text { fill: black; }
line { stroke: black; }
}
</style>
I had a friend who works primarily on a Mac test to see if the problem was specific to the iPhone, or if it occurred in Safari on the desktop as well. Yes. Apple is handling my styles differently from the other browsers I tried.
You can see my choices displaying the way I want on Chrome and Firefox, with grey lines and text on a black background, while Safari isn’t showing the grey. Am I doing something explicitly wrong in my style that Chrome and Firefox are forgiving? Or is Apple not supporting the feature properly?
The frustrating thing is that all browsers on iPhones use the Apple rendering engine. That means there’s no way I know to get the functionality I want on my phone, where the phone uses dark mode overnight, but light mode during the day.
WimsWorld 