Dark mode has gone from being a fringe setting to a mainstream toggle over the last several years, but the mode isn’t properly supported everywhere yet. While OS-level dark mode settings cover almost all apps and system menus, the web is a different story.
Many sites don’t support dark mode natively, offer a poor dark mode, or are inconsistent with this. Because I love dark mode and can’t stand light modes, I’ve set up a simple solution to get dark mode everywhere. This is easier on my eyes and makes my everyday usage more consistent—plus you can save battery life using dark mode.
The basics: change your device settings
The first step in getting dark mode on as many sites as possible is to make sure your OS is set to dark mode. While this may seem obvious, it’s important because many sites follow your system settings when deciding whether to display light or dark mode.
On Windows 11, head to Settings > Personalization > Colors and set Choose your mode to Dark. On macOS, click the Apple menu, then System Settings > Appearance > Dark.
For iPhone, go to Settings > Display & Brightness and choose Dark. On Android, the location varies by device; if you can’t find it under Settings > Display, then typing “dark” into the Settings menu’s search bar should bring you to the right place.
Once you’ve done this, sites that support dark mode should change to reflect your system preference. For the ones that don’t have a dark mode, you’ll need the next steps.
Desktop: Dark Reader
Dark Reader has been one of my crucial browser extensions for a long while. As the name suggests, its purpose is to enable dark mode across all websites. Don’t be alarmed that the extension needs permission to access every site you visit; the tool’s privacy policy states that it does not collect any data. Dark Reader is free with no ads.
Grab it for Chrome, Firefox, Safari, or Edge using the links on its website; I’m using Chrome. If you are too, I recommend pinning the extension for easy access. Click the puzzle piece icon to the right of the address bar, then click the Pin icon next to Dark Reader. This lets you open its configuration options without loading the full extension menu every time.
Once Dark Reader is installed, all sites will instantly flip to dark. While you don’t need to modify anything for it to work, there are some settings and caveats to be aware of that will give you a better experience.
Dark Reader won’t work on protected browser pages (like the Chrome Web Store).
Configuring Dark Reader
Click the extension to show its options. The top-left button lets you disable Dark Reader for the current site, while the top-right button lets you disable it entirely.
The gear under the site button lets you choose if you want inversion enabled by default; there’s also a useful Detect dark theme option that will disable Dark Reader when a site is already dark. Having Dark Reader enabled on an already-dark site can result in wonky visuals, so it’s good to double-check this.
I recommend utilizing the option to set a keyboard shortcut that toggles the extension on the current site. Because some sites have issues with dark mode, being able to quickly see the unmodified version of the site is useful. Also, if you suspect that something on a page isn’t showing correctly with dark filters on, temporarily disabling Dark Reader will provide an answer.
The Configure automation link on the right site lets you set Dark Reader to activate on a schedule, in case you don’t want dark mode all the time. Options include within certain hours, between sunset and sunrise for your location, and when your device is set to dark mode.
Site filters and other options
Under Filter, the various options let you adjust how dark reader handles the page. I haven’t felt the need to adjust these much, but they can make certain pages look better.
The Only for [current site] button at the bottom is important. Enable this, and all the configurations you change above it will only apply to your current site. Otherwise, the changes you make are global.
On the Site List tab, you’ll find two options with accompanying lists. Not invert listed is the default behavior; it makes all sites dark except those for which you’ve disabled the extension (or entered manually here). Invert listed only leaves all sites in their normal mode unless you explicitly invert them.
Finally, under More, you can change the font and text stroke thickness, though I haven’t bothered with this. The most relevant option there is Theme generation mode. For this, the best option in most cases is Dynamic; it uses more resources but provides the best look. The other options are more basic and will likely cause issues with ugly backgrounds, re-inverting dark parts of the page, and similar.
The only place I’ve had to switch this option is on Google Sheets. Recently, the Dynamic option started hiding parts of the screen (and sometimes it entirely) unless I play around with it. Filter looks best, though it does change the hue of some colors.
Mobile: Brave
While Dark Reader is also available for iPhone, it costs $5 and only supports Safari. Since I rarely use Safari, I turned to another browser for dark mode on my phone: Brave.
Brave has a simple toggle for enabling dark mode across the browser; it provides the same experience as Dark Reader with fewer customization options. To access it, tap the three-dot menu at the bottom-right, choose Show all, and toggle Night Mode on. For easier access, I recommend tapping Edit to the right of My Actions, then dragging Night Mode to the top.
Like with Dark Reader, you might occasionally have issues where Brave inverts an already-dark website, or the inversion causes some elements to disappear. Toggle off dark mode to check when you’re not sure.
Brave is an excellent browser; its built-in ad blocking further beautifies webpages.
Dark mode for stubborn apps
While this works for any site you visit in a browser, it won’t help with apps that haven’t implemented dark mode yet. Two of the holdouts that frustrate me the most are Amazon and Authy.
On iPhone, you can use an accessibility feature called Smart Invert to force apps into dark mode; the results aren’t always perfect, but it’s worth a try.
For maximum convenience, visit Settings > Accessibility > Per-App Settings, pick the app you want to customize, and then enable Smart Invert for it. That way, you won’t have to toggle this every time you open an affected app.
On Android, there’s a similar accessibility setting called Color inversion under Accessibility > Color and motion. If you don’t see it, try searching the Settings app for it. Depending on your version of Android, there should also be an option to assign a shortcut for this function.
Dark mode everywhere
Thanks to a simple yet powerful browser extension and a solid mobile browser, I use dark mode on every website I can. Most of the time, it looks great using these methods. You’ll occasionally find a site that doesn’t play well with dark mode filters, but those are usually sites I’m in and out of anyway.
This is a great method for anyone who loves dark mode, whether for stylistic reasons or to prevent eye strain while using your device for long periods.
