Dark Mode Safari - example websites

Darkened interfaces look good in apps, not so much on websites. The problem is, web content remains a major source of visual inconsistency as far as the popular Dark Mode feature is concerned. Thankfully, you can get a Dark Mode-alike environment on almost any website thanks to a handy Dark Mode V2 shortcut for your iPhone and iPad.

Dark Mode on the web

While there’s no official API as of yet that would let a website auto-adapt to a darkened look, Apple has been pushing a private media query so that websites could know if a visitor has Dark Mode enabled on their computer to have it use appropriate CSS style sheets accordingly.

Dark Mode web - the macOS Mojave desktop with Dark Mode on

System-wide Dark Mode is available on Mac with macOS Mojave

Safari Technology Preview 71.0 on macOS Mojave already applies this, allowing websites to automatically adjust their theme to complement macOS Mojave’s Dark Mode.

TUTORIAL: How to use Dark Mode on your Mac

So there you have it, Safari will soon implement dark mode support for websites. Other browser vendors are expected to follow suit, especially if this specification gets adopted as an HTML standard. Until that happens, however, workarounds like the handy Dark Mode V2 shortcut for iPhone and iPad by Reddit user “Ndh4k4” will have you covered.

TUTORIAL: How to toggle between Light and Dark mode for Mail’s composer

An officially sanctioned solution for iOS automation, Apple’s new Shortcuts app in iOS 12 lets you chain multiple actions together and assign them a custom voice command so complex, repetitive tasks can be performed just by asking Siri.

The Shortcuts app is based on Apple’s Workflow acquisition.

How to get Dark Mode on any website

To get this super-useful shortcut, visit the download page on iCloud on your iPhone or iPad with iOS 12 or later and tap the blue button labeled Get Shortcut (if asked whether to open Dark Mode V2 with the Shortcuts app, choose Open from the popup menu.

Dark Mode web - importing the shortcut

You might see a screen labeled Configure This Shortcut pop up. If so, don’t bother with it—just tap Done to finish importing the shortcut into your library within the Shortcuts app.

Dark Mode web - imported shortcut in the Shortcuts app

You can find your shortcuts under the Library tab in the Shortcuts app

The shortcut accepts Safari web pages. It’s been pre-configured to appear in iOS’s multi-purpose Share menus. To rename it to your liking, tap the three dots in the shortcut’s upper-right corner under the Library tab, then tap the Settings icon near the top right corner.

Dark Mode web - renaming the shortcut

You can rename shortcut to your liking so they’re easier to distinguish in Share sheets

Next, choose the field labeled Name, then type in a new name for your shortcut and tap Done to get back to the Settings screen. Finally, tap Done again to save your changes.

TUTORIAL: How to add any Apple Music album to your Home screen

To test how it works, navigate to a webpage in Safari such as the iDownloadBlog website. To view web content in a subdued appearance using a darkened colors scheme, tap Safari’s Share button and choose Shortcuts from the bottom row of icons (if not visible, tap the rightmost More icon, then slide the switch next to Shortcuts to the ON position.

Dark Mode safari - the iDownloadBlog homage example

This shortcut needs explicit user permission to interact with web content in Safari

You’ll be asked whether you’d like to give the shortcut permission to access the underlying website so it could interact with it. Don’t let the wording scare you off, just tap Allow (you only need to do this one per specific website). Dark Mode V2 works better with some websites than the others. Be sure to test it to see if it yields desired results with your favorite websites.

Dark Mode web howto enable dark mode on any website in Safari

Dark Mode 2 on the iDownloadBlog website

We’ve tried Dark Mode V2 on a number on popular websites and were generally pleased with the outcome. However, some websites like those which don’t use predominantly white backgrounds tend to look jarring after this shortcut is executed.

No matter how you look at it, tricks like this will be hit and miss until web standard bodies and browser vendors adopt and implement proper support for dark interfaces on the web.

We previously covered a bunch of useful shortcuts for iPhone and iPad, including ones for creating a folder full of shortcuts, bulk-messaging multiple recipients in separate texts, adding Apple Music albums and playlist to the Home screen and more.

Here’s our overview of the Shortcuts app when it launched as a developer beta in the summer.

Subscribe to iDownloadBlog on YouTube

You have probably noticed that Siri-powered suggestions for specific shortcuts appear on the Lock screen of your iOS device based on apps you use throughout your day. If you find these suggestions annoying, you can toggle them on or off for each app separately.

Need help? Ask iDB!

Do you like this how-to?

If so, do pass it along to your support folks and leave a comment below.

Got stuck? Not sure how to do certain things on your Apple device? Let us know via help@iDownloadBlog.com and a future tutorial might provide a solution.

Submit your own how-to suggestions via tips@iDownloadBlog.com.