Prefers-dark-interface (Dark Mode for Websites)

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.

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

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

1 Like

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:

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.

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);
}
1 Like

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.

1 Like

I think it is good that there is css support

But for me personally, I have been using dark mode for a while and finally turned it off last week.

For me it is too dark and contrasting in everyday workspaces and I find I am sometimes confused with windows from one app to another as they all started look the same at a glance tucked behind each other. That little bit of colour here and there I think is key to recognise each apps windows

1 Like

With the latest macOS update, Safari now supports Dark Mode. So, to test this out, I added Dark Mode styles to my site.

It’s basically just a Media Query.

@media (prefers-color-scheme: dark)

Hype can support that, as you can add custom CSS. Just chuck some code in the HTML head…

<style>
@media (prefers-color-scheme: dark) {
	div {
	background-color: #222 !important;
	}
}
</style>

However, I was wondering if there was a way to trigger this with JavaScript, as that would make it easier to work with. (Hype doesn’t show the dark styles in design mode.) David Walsh posted a hack…

What do you think? While not all of the styles are set, as the menu could use some work, Photics.com has a dark mode style.

Do you like the way Dark Mode looks on Photics.com?

  • Yes
  • No

0 voters

1 Like

Should Tumult.com support Dark Mode?

  • Yes
  • No

0 voters