How to Enable Dark Mode on Webpages in Safari
Learn when Safari Reader can darken a page, how to enable it on iPhone, iPad, and Mac, and what to use when Reader is unavailable.
Safari does not have one switch that recolors every webpage. Its built-in option is Reader, which creates a simplified reading view for supported pages. On iPhone or iPad, open the Page Menu and choose Show Reader. For repeat visits, enable Use Reader Automatically in Website Settings, or use Settings > Apps > Safari > Reader > All Websites. On Mac, go to Safari > Settings > Websites > Reader and turn the site on. Pages that do not support Reader need a Safari extension for broader dark styling.
1. Turn on dark reading mode on iPhone or iPad
- Open the webpage in Safari.
- Tap the Page Menu button on the left side of the search field.
- Tap Show Reader when it appears.
Reader reformats the page to show the relevant text and images. It is designed for articles and similar content, so navigation, forms, complex layouts, and interactive controls may be removed or changed. When Reader is active, use the text or appearance controls in the Page Menu to adjust the reading presentation, including a darker background when that control is offered by your Safari version.
Make Reader automatic for one website
- Open the site in Safari.
- Tap the Page Menu.
- Tap Website Settings.
- Turn on Use Reader Automatically.
This preference applies to that website on supported pages. A page can still show the normal view if Safari cannot identify it as Reader-compatible.
Enable automatic Reader on supported sites
For a broad preference, open Settings > Apps > Safari > Reader > All Websites. This affects websites that support Reader; it does not force every webpage into a dark theme.
2. Turn on Reader automatically on Mac
- Open Safari.
- Choose Safari > Settings.
- Click Websites.
- Select Reader in the left column.
- Find the site and set it to On.
Safari will use Reader automatically for articles on that site. You can also open an individual article in Reader when the site default is off. The exact appearance controls can vary by macOS release, but the per-site Reader setting remains in Safari’s Websites preferences.
3. Understand what Safari’s dark mode changes
Reader is a reading view, not a universal dark-mode engine. It changes the page structure and presents the main text and images in a cleaner format. It does not promise to recolor every part of the original site.
| Situation | What to expect |
|---|---|
| Article supports Reader | Safari can show a simplified reading view and its available appearance controls. |
| Site has a complex app layout | Show Reader may be missing, or important controls may not work in Reader. |
| Forms, dashboards, shopping carts, or web apps | Use the normal page or a content-changing extension; Reader is not intended to preserve the full interface. |
| Page remains bright after enabling Reader | The page may not support Reader, or the original site may control its own colors. |
Apple documents Reader as a supported-page feature. Therefore, “dark Safari” and “dark webpages” are separate settings: Safari’s interface can be dark while the page itself stays light.
4. Use a Safari extension when Reader is unavailable
For pages that do not offer Reader, install a dark-mode extension from Apple’s App Store Extensions category. One current example is Dark Reader for Safari, whose listing says it creates dark themes for websites on the fly. The listing describes iPhone, iPad, and Mac support, per-site enable/disable controls, system dark-mode synchronization, and detection of already-dark websites. Its listed price was $4.99 when researched; App Store pricing and availability can change.
- Install the extension from the App Store.
- Open Safari’s extension controls on your device.
- Enable the extension.
- Grant website access requested by the extension.
- Turn it on for all sites or only selected domains, according to the extension’s controls.
Menu names differ between operating-system releases, so use the current Safari and Apple settings screens as the authority. Review the extension’s requested permissions before enabling it on sensitive sites.
Reader or extension?
| Factor | Safari Reader | Dark-mode extension |
|---|---|---|
| Coverage | Only pages Safari recognizes as Reader-compatible | Designed to style a wider range of webpages |
| Fidelity | Clean article layout; original layout may be removed | Usually keeps more of the original page while changing colors |
| Control | Per-site Reader defaults and supported global preference | Per-site and global rules depend on the extension |
| Platforms | iPhone, iPad, and Mac | Check the extension listing for current platform support |
| Privacy | Built into Safari | Review requested website permissions |
| Price | Included with Safari | Varies; the researched Dark Reader listing showed $4.99 |
5. Troubleshoot a page that stays white
Show Reader is missing
Cause: Safari does not consider the page Reader-compatible, or the page is an interactive application rather than an article.
Fix: Try the site’s article URL instead of its home page. If Reader is still unavailable, use a Safari dark-mode extension.
Reader opens but the layout is missing
Cause: Reader intentionally strips navigation, advertising, widgets, and some interactive controls.
Fix: Return to the normal page for forms or app controls. Use Reader only for the reading portion.
The site setting does not apply everywhere
Cause: Automatic Reader only affects supported pages on the configured website.
Fix: Check the exact domain and path, then confirm Use Reader Automatically (iPhone/iPad) or the site switch under Websites > Reader (Mac).
Safari’s chrome is dark but the webpage is bright
Cause: Device or Safari appearance settings do not override a site’s CSS.
Fix: Open Reader if available; otherwise enable a dark-mode extension with permission to modify that website.
An extension does not change a protected or embedded page
Cause: The extension may not have permission for that domain, or the content may be inside an embedded frame it cannot modify.
Fix: Recheck Safari extension permissions, reload the page, and test the top-level URL. Some embedded content remains outside an extension’s reach.
6. Performance, reliability, and privacy considerations
- Reader: It is the simplest option because Safari generates the reading view itself. It can be more reliable for long articles than trying to restyle every component of a complex page.
- Extensions: A broader styling extension must inspect and modify page content. This can add processing on large pages and may conflict with site styles or other extensions.
- Dynamic sites: Pages that render content after load can change after the initial dark theme is applied. Reloading or reopening the extension control may help.
- Permissions: A styling extension may request access to website content. Grant only the access needed for the sites you want to change.
- Cost: Reader is included with Safari. Extension pricing is set by its developer and can change; verify the current App Store listing before buying.
7. Or skip the browser setup
If you need repeatable dark-mode screenshots for documentation, QA, visual checks, or an AI workflow, ScreenshotNeo provides a website screenshot API and MCP server. You can set a dark-mode capture with a custom script or use its capture options without maintaining a browser.
See the ScreenshotNeo API documentation for the full option list. A basic capture looks like this:
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);For dark captures, use the API’s dark-mode option along with the viewport, device, full-page, wait, custom CSS, and JavaScript settings your page needs. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots, and every feature is available on every plan. Create a free ScreenshotNeo account.
8. FAQ
Can I make every Safari webpage black?
Safari Reader cannot do that because it works only on supported pages. Use a Safari dark-mode extension for broader coverage.
Does Reader change the original website for everyone?
No. Reader changes how Safari presents the page on your device; it does not edit the website.
Will Reader remember my choice?
Use the site’s Website Settings to enable automatic Reader, or configure the broader Reader preference in Safari settings on supported platforms.
Is a dark-mode extension the same as Reader?
No. Reader creates a simplified article view. An extension attempts to restyle the existing webpage and can preserve more of its original layout.
Why do colors look wrong on one site?
Custom CSS, images, embedded frames, and dynamically rendered components can conflict with a dark theme. Disable the extension for that site or use Reader when the article supports it.
