Prefers-dark-interface


#1

Here’s a heads-up…

With macOS 10.14, Dark Mode is going to be a popular feature. Since I do a lot of WebView apps, I was wondering if there was some way to detect if the user was using Dark Mode.

While the feature is not here yet, it looks like there’s some discussion on the matter. That could be pretty cool. Apparently, there might a media query in the works… prefers-dark-interface.

So, I’m happy and sad. I’m happy because that’s less work right now. HA HA. I can’t add a feature that’s impossible. I’m sad because I’m hitting all my other benchmarks for the KEEN app update, so it would have been nice to have Dark Mode support for 10.14.

Well… I suppose it’s not totally impossible. I suppose I could use Swift to detect the mode. :thinking:

…but obviously browser support would be easier and better. (If the detection was browser based, it would work in apps and on the web.)

Anyway, this is just something to be aware of. If this does become a thing one day, it might be a nice add-on for Hype. If not, and “prefers-dark-interface” is a thing, it’s pretty easy to manually add that to your Hype project.


#2

Looks like Dark Mode for websites is going to be a thing…

https://webkit.org/blog/8475/release-notes-for-safari-technology-preview-68/


(Rick) #3

Ok I’m still a version behind (afraid my old pre-subscription photoshop breaks even more :rofl:) so I can’t try it myself but why would your Hype/website design matter with a dark themed OS? I’ve seen hacks for years with dark themes and no-one screaming for a website skin that’s parented with that.

:thinking:


(Loves Hype) #4

I can see that being a „little“ thing on specific sites like blogs or listings etc. … meaning when things are not only design oriented but convey a lot of information and one reads and researched a lot in them.

A bright site really pops out of Mohave/Safari (Chrome is still overdue) set to a dark pattern. Specially at night on a laptop. My expirence. Let’s see where this goes.


#5

Not yet, but this change suggests it could be an expected website behavior in the future.

Desktop Safari represents a tiny percentage of web browser usage, but Mobile Safari is very popular. The next logical step for this feature, once it’s in the desktop browser, is to add it to the mobile Safari browser – iOS. Once Apple is doing it with all of their products, it’s reasonable to suspect that Google will then add the standard to Chrome / Android.

Boom, that’s nearly total web browser coverage in just a few short years.

But true, it’s not like you need to wait. This technology already exists. You could just get the time. I imagine the code would look something like this…

var now = new Date();
var h = now.getHours();
if (h >= 19 || h <= 7) {
     hypeDocument.startTimelineNamed('darkmode', hypeDocument.kDirectionForward);
}

(Loves Hype) #6

My point is that I don’t expect an intentional design to offer an dark mode. That is interfering with corporate identity, design and the „artists“ intent. As Hype falls mainly into this categories I don’t see the need for it in Hype in many of the cases. The main purpose and origin is in my opinion the ebook and its app counterparts. Also in the desktop the OLED-tech is becoming more available. Blacks and dark colors save battery if I am not mistaken and hence give your laptops that longer runtime. Looking from the ebook apps perspective the color scheme just isn’t such a wear on the eyes. I am guessing and thinking this will be a thing for content driven sites.