Now that macOS Mojave has a dark mode, wouldn't it be neat if all websites automatically switched to dark mode along with the system interface? It's possible using the Dark Reader extension for Safari, Chrome, and Firefox.
While we're talking about the same extension, the implementations are different between Safari and Chrome (along with Firefox). We'll cover both versions below.
How to Use Dark Reader in Chrome and Firefox
The Dark Reader extension for Chrome and Firefox is simple and straightforward to use. If you've ever used an extension in the browser before, you'll feel right at home.
Once you've installed the Dark Reader Chrome or Firefox extension (links above), click on the "Dark Reader" extension icon.
Click on the "On" button to enable dark mode. All open websites will instantly switch to a dark theme.
All black text and white backgrounds will be inverted. When it comes to colors and images, nothing will be touched.
To disable the dark mode on a given site, click on the extension and then select the "Toggle Current Site" button.
In the "Filter" tab, you'll find the dark mode settings. From here, you can switch to light mode and change the contrast ratio. You can also add a sepia or a grayscale filter.
To manage the blacklist, click on the "Sites" tab. From here, you can add or remove websites that will always be shown in the light mode.
Chrome's interface supports Mac's system appearance. So when you enable dark mode on your Mac, the Chrome UI will also switch to dark mode. But that doesn't apply to the Dark Reader extension.
Chrome also has a built-in brute-force dark mode. You can go to the Flags section and enable the "Force Dark Mode for Web Contents" flag to get dark mode on all websites. Read our guide for detailed instructions for enabling the flag.
How to Use Dark Reader in Safari
Safari handles extensions differently than Chrome and Firefox. Safari extensions are now distributed as apps on the App Store. This is one of the reasons why Dark Reader costs $4.99 on the Mac App Store while it's available for free on Chrome and Firefox.
The Safari version has one major advantage: It syncs with the global dark mode in macOS. So when you enable the dark mode in macOS (easily done using the NightOwl utility), all the websites will instantly shift to a dark theme as well.
Once you've purchased the Dark Reader extension, open the app. From the app window, click on the "Activate for Safari" button.
This will open the Extensions panel in Safari. Click on the checkmark next to "Dark Reader" to activate the extension.
You'll now see a Dark Reader icon in the Safari toolbar. Click on the "Dark Reader" button to see all options and settings.
To enable the dark mode for all websites, click the "On" button. Switch to the "Auto" mode to automatically toggle dark mode based on your Mac's system preferences.
If the images and icon don't look quite right to you, make sure the "Dynamic Mode" is enabled (it's much better than the Filter mode).
If you want to disable dark mode for the current website, click on the "Enabled For Current Website" button. You can change the brightness and the contrast using the slider in the extension menu.
Click on the "Settings" button for more options. From here, you can disable the dark mode for all websites by default. The "Theme" option will let you set up a custom theme for every website.
Now that you have a system-wide dark mode on the Mac, learn how you can enable it on your iPhone or iPad running iOS 13, iPadOS 13, or higher.