SVG, CSS Style, dark-mode, and Apple

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.

Safari on Mac
Chrome on Mac
Firefox on Mac

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.

iOS14 Date Time Picker Rant

I upgraded to iOS14 as soon as it was released just because I almost always keep my devices running the most up to date software I can. I don’t care about the widgets or interface customization options that were introduced with iOS14. I think much of that customization is actually what has kept me away from running Android.

The one thing that I really hate that was introduced was the date time picker in iOS14. I’ve included screenshots from my iPhone 11 Pro Max running the new version and my iPhone 7 running the old version.

The old version had the issue that it was not intuitive to be able to pick a minute that didn’t align to five minute increments, but was very easy to select the day, hour, or minute individually and scroll to a reasonable number for the start time, then switch the the end time and do the same. The keyboard was only shown when I was typing the name of the appointment or the location.

The new one uses half of the screen to pick just the day, as well as displaying the keyboard, which does not seem to affect the time. I touch the tiny display with the time, and if I can select the hour, I can scroll my finger up and down over the entire screen to scroll the number. If I miss the number slightly, the screen moves to show my another part of the entry field. Then I have to repeat the same solution with the minute. When I’m trying to hit the hour, I hit the minute, and vice versa.

Because of the size of the calendar entry, I have to scroll the entire screen to find where the end time might be.

This change just feels like change for change sake, and poorly implemented. I wonder if it’s even worse on a smaller screen.

Old Man Yells at Cloud

iOS14.1 was released today, and I’ve already upgraded to it, but don’t see anything I’d consider an improvement to this issue.