Automatically ease Safari browser eye strain across all websites with the click of a button.
We Don’t See the Same
As we age, ability to focus diminishes. Reading may entail a battle with astigmatism, floaters, cataracts, or a combination thereof. Whether sharp vision is intact or not, pupils dilate in the darkness. This makes white light appear brighter.
On its devices, Apple introduced Dark Mode, Night Shift, and True Tone options.
- Night Shift warms colors.
- True Tone reduces brightness.
- Dark Mode reverses background and text throughly the operating system and supporting websites.
Any combination of the three can be set to activate between sunset and sunrise. You can also enable them at any time. To me, Dark Mode is now more pleasing most of the day.
Enable Dark Mode
Honestly, when Dark Mode came out, I wasn’t fond of it on anything but the Adobe Creative Suite, which includes its own independent dark interface option. My eyes enjoyed dark text against a light background. Dark Mode does not need to be black and white. Tweaking the colors can bring about pleasing options.
Several major websites, and some smaller tech-savvy sites, include a Dark Mode option. On the programming side, this requires a separate style sheet that selectively inverts colors. You can also add a bunch of conditions within your main style sheet that are triggered by notification of the Dark Mode option.
Some sites include a toggle. Others recognize operating system settings. With many styles, this is a labor intensive task, requiring much testing.
Browsing sites in Dark Mode and then happening upon one that does not support is jarring to the eyes. So if you’re a website administrator, perhaps you’re considering the task of coding the site you visit most—likely your own—to support Dark Mode. But maybe your preference for dark backgrounds is in the minority.
Noir to the Rescue
An inexpensive and instant option is to install an app. For less than 5 bucks, you can activate Dark Mode on all the sites that do not have it. One such app is called Noir. In personal testing, default settings work very well on the ClinicalPosters website. You can also enable and edit custom themes, which may be more useful for people with color blindness.
“Dark” is the default. It reverses colors. “Black” is a theme that mimics the standard Apple Dark Mode. You will notice a difference on sites that have background tints.
💡 There’s a downside to using JavaScript: You’ll likely see a quick flash of the light theme as JavaScript executes after the CSS. This could be misconstrued as a bug.
There are few Noir caveats. In some instances, there is a brief flash of the unmodified site colors before the alternate style loads. Available from the App Store, it only works with Safari iOS browsers on mobile devices. Noir has no effect on browsers embedded within mobile apps like Twitter or Pinterest.
In The Mix
Some sites use CSS styling called mix-blend-mode. This can darken or multiply colors and images to eliminate a white image background. This works well for light website backgrounds, but can make an image disappear if the background is dark.
Noir handles this well when mix-blend-mode is within your style sheet. It simply disables mix-blend-mode. But applying mix-blend-mode on the element level overrides style sheets. (Developer says a fix is in next update.) Noir handles it right! Overall, my eyes are pleased.
Within the MacOS App Store, you can purchase a desktop Safari version of Noir for continuity. Beware of a similarly named free desktop Safari extension called Neo Noir. I tried and deleted it since it does not handle mix-blend-mode and has fewer app options. If you are browsing with Noir, drop a comment below.
References
- A Complete Guide to Dark Mode on the Web. css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
- How to Create Dark/Light Mode for Website using JavaScript/jQuery? geeksforgeeks.org/how-to-create-dark-light-mode-for-website-using-javascript-jquery/
- How To - Toggle Dark Mode. w3schools.com/howto/howto_js_toggle_dark_mode.asp
- Dark theme. material.io/design/color/dark-theme.html
