How to Make Safari Dark Mode on Mac (Every Website)

How does macOS dark mode affect Safari websites?

When you switch macOS into dark mode, the operating system broadcasts a signal that the preferred colour scheme has changed. Browsers including Safari, Chrome, Firefox, and Edge all read this signal and expose it to websites through the prefers-color-scheme CSS media query. Websites that have implemented a dark theme listen for this query and switch their colours accordingly.

This means Safari itself isn't doing the work - it's acting as a messenger between macOS and each website's own dark mode implementation. The practical result is that well-maintained websites like GitHub, Notion, Linear, and most modern SaaS products go dark automatically when your Mac is in dark mode. Older or less actively maintained sites see no change at all.

According to a 2024 W3C survey, 47% of websites now support prefers-color-scheme dark mode. That's a significant majority of the web - but it still leaves more than half of sites unaffected by macOS dark mode alone. For those sites, you need one of the additional methods below.

There's also a battery benefit worth knowing: dark mode reduces battery drain on OLED displays by up to 47% (Google I/O 2018 data). MacBooks with OLED panels - and any iPhone used for web browsing - see real power savings from dark mode on websites, making this more than just an aesthetic preference.

How do you force dark mode on Safari websites that don't support it?

There are three ways to force dark mode on websites that haven't implemented their own dark theme. The right one depends on how technical you want to get and how many sites you need it to apply to.

Method 1: Enable macOS dark mode (covers ~47% of websites)

This is the starting point. To enable dark mode on Mac:

1. Open System Settings on your Mac
2. Click Appearance in the sidebar
3. Select Dark for permanent dark mode, or Auto to switch based on macOS's built-in sunrise/sunset schedule
4. Open Safari - any website that supports prefers-color-scheme will now appear in dark mode

This is the cleanest method because dark mode is applied by each website's own design team, using their intended colours and contrast ratios. It works across Safari, Chrome, Firefox, and Edge simultaneously.

Method 2: Safari Developer Tools - simulate dark colour scheme (for testing or one-off use)

Safari's Web Inspector has a feature that forces a page to render as if the system is in dark mode, even when it isn't. This is primarily a developer tool, but it works for personal use too:

1. Enable the Develop menu: go to Safari > Settings > Advanced and tick Show features for web developers
2. Open the page you want to view in dark mode
3. Click Develop in the menu bar, then Show Web Inspector (or press Option + Command + I)
4. In Web Inspector, click the Elements tab
5. Look for the colour scheme simulation icons in the bottom bar - click the dark moon icon to force prefers-color-scheme: dark

This only affects websites that have a dark theme. For sites with no dark CSS at all, the page won't change. It's also per-tab and per-session - you'd need to repeat it each time, which makes it impractical for everyday use.

What is Safari Reader View and does it support dark mode?

Reader View is Safari's built-in reading mode. It strips a page down to its core content - removing navigation, ads, sidebars, and other clutter - and presents it in a clean, reformatted layout. Crucially, Reader View has its own appearance controls that are entirely independent of the website's own styling.

This means Reader View can apply a dark background to any article, even one hosted on a site that has no native dark mode at all.

To use Reader View with a dark background:

1. Navigate to an article page in Safari (Reader View works best on text-heavy content like blog posts, news articles, and documentation)
2. Click View > Show Reader in the Safari menu bar, or click the Reader icon that appears in the address bar when available
3. Once Reader View is active, click the aA button in the address bar - this opens the display settings panel
4. Choose the dark background swatch (the black circle in the row of colour options)
5. Safari remembers this preference for all future Reader View sessions

The main limitation is that Reader View is only available on article-style pages. It won't activate on web apps, product pages, homepages, dashboards, or any page that isn't structured as a readable article. For those, you need the extension approach below.

Should you use a browser extension for dark mode in Safari?

For the most complete dark mode coverage - every website, every page type, every visit - a browser extension is the right tool. Dark Reader is the most capable option for Safari. It uses CSS overrides to force a dark colour scheme on any website, regardless of whether that site has implemented its own dark theme.

Dark Reader offers four rendering modes:

• Filter - inverts and adjusts the entire page using CSS filters. Fast, but can make images look odd
• Filter+ - improved filter mode that preserves photo colours by reinverting images. Better for image-heavy sites
• Static - applies a fixed dark stylesheet without analysing the page. Very lightweight, but less precise
• Dynamic - analyses each page's colour scheme and generates a tailored dark theme. The highest quality result, with a small performance cost on complex pages

To install Dark Reader in Safari:

1. Open the Mac App Store and search for Dark Reader for Safari
2. Install the app - the extension is activated through the companion app
3. Open Safari and go to Safari > Settings > Extensions
4. Tick the checkbox next to Dark Reader to enable it
5. Click the Dark Reader icon in the toolbar to configure brightness, contrast, and rendering mode
6. Use the per-site toggle to disable Dark Reader on websites that have a well-designed native dark theme you prefer

What are the limitations of forced dark mode on websites?

Forced dark mode - whether through the developer tool or Dark Reader - works by overriding a website's colours algorithmically. This produces reasonable results most of the time, but it has known failure modes:

• Image colour shifting - in Filter mode, photos and graphics are colour-inverted, which makes them look unnatural. Filter+ mode corrects this for most images, but occasionally misses some
• Broken contrast on some sites - if a website uses complex colour logic or embedded iframes with their own styles, forced dark mode may produce areas with poor contrast or near-invisible text
• Transparent elements - elements with transparent backgrounds can pick up dark colours unintentionally, creating visual artefacts
• Video and canvas elements - Dark Reader doesn't alter video content or HTML canvas elements, so they remain at their original brightness in an otherwise dark page
• Print and PDF previews - forcing dark mode on pages with print stylesheets can make print previews unreadable

For websites you visit regularly where forced dark mode causes issues, Dark Reader's per-site disable list lets you exclude individual domains. Those sites will render normally while everything else stays dark.

How does scheduling dark mode affect all your websites automatically?

All four methods above require manual action: you either keep macOS in dark mode permanently, open Developer Tools each time, activate Reader View per page, or manage the Dark Reader extension. None of them answer the question of when dark mode should be on.

The most comfortable approach is to have dark mode activate automatically - switching on at sunset or at a time you choose, without you doing anything. Because prefers-color-scheme is a system-level signal, scheduling dark mode at the macOS level cascades to Safari and every other browser at the same moment.

Solace is a macOS menu bar app designed specifically for this. It gives you three scheduling modes:

• Solar-based - dark mode activates at your local sunset and deactivates at sunrise, updated daily as the year progresses
• Custom times - set a fixed schedule, such as 9pm to 7am
• Weather-aware - switches to dark mode automatically on overcast or rainy days, regardless of the time

Because Solace is a system-level tool rather than a browser extension, when it toggles dark mode the change applies everywhere simultaneously: Safari, Chrome, Firefox, Edge, native macOS apps, and every website that respects prefers-color-scheme. You set a schedule once and the web adapts around it.

Pairing Solace with Dark Reader gives you the most complete coverage: Solace handles the scheduling and system-level switching, while Dark Reader fills in the gaps for websites without native dark theme support.

Summary: which method should you use?

The four methods cover different use cases. Here's how to decide:

For most people, the practical combination is: macOS dark mode via Solace's schedule for automatic switching, plus Dark Reader for sites without native dark support. This covers the entire web without any ongoing effort.

Frequently asked questions