Skip to content

Commit 551b22e

Browse files
alexanderbyalexanderby
committed
Publish 2025-10-16
1 parent 31ed5d9 commit 551b22e

File tree

3 files changed

+98
-116
lines changed

3 files changed

+98
-116
lines changed

‎images/safari/safari-mode.png‎

668 KB
Loading

‎images/safari/safari-themes.png‎

663 KB
Loading

‎safari/index.html‎

Lines changed: 98 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@
33

44
<head>
55
<meta charset="utf-8" />
6-
<title>Dark Reader for Safari</title>
6+
<title>Dark Reader for Safari — the original dark mode extension</title>
77
<meta name="color-scheme" content="dark">
88
<meta name="theme-color" content="#1d1e22" />
99
<meta name="viewport" content="width=device-width, initial-scale=1" />
1010
<link rel="shortcut icon" href="../images/icon-256.png" />
11+
<meta name="description" content="Enable dark mode in Safari on Mac, iPhone, and iPad. Dark Reader brings dark themes to every website for eye comfort and night browsing." />
1112
<meta property="og:type" content="website" />
1213
<meta property="og:site_name" content="Dark Reader" />
1314
<meta property="og:url" content="https://darkreader.org/safari" />
1415
<meta property="og:title" content="Dark Reader for Safari — dark mode for every website" />
1516
<meta property="og:image" content="https://darkreader.org/images/darkreader-safari-preview.png" />
16-
<meta property="og:description" content="Dark mode on all websites. Take care of your eyes, use Dark Reader for night and daily browsing. For Chrome and Firefox." />
17+
<meta property="og:description" content="Enable dark mode in Safari on Mac, iPhone, and iPad. Dark Reader brings dark themes to every website for eye comfort and night browsing." />
1718
<style>
1819
html {
1920
background-color: #1d1e22;
@@ -39,6 +40,22 @@
3940
width: 100%;
4041
}
4142

43+
.mode,
44+
.mode_image {
45+
display: grid;
46+
margin: 0 auto;
47+
width: 70%;
48+
place-items: center;
49+
}
50+
51+
.themes,
52+
.themes_image {
53+
display: grid;
54+
margin: 0 auto;
55+
width: 70%;
56+
place-items: center;
57+
}
58+
4259
a {
4360
color: #68aed7;
4461
}
@@ -51,156 +68,121 @@
5168
</a>
5269

5370
<p>
54-
<a href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone" target="_blank"
71+
<a href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180" target="_blank"
5572
rel="noopener" data-s="drios-safari-text">
5673
Dark Reader for Safari</a>
57-
(iOS, iPadOS, macOS) is available on the App Store.
74+
(iPhone, iPad and Mac) is available on the App Store.
5875
</p>
59-
76+
6077
<p>
61-
<a href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone" target="_blank"
62-
rel="noopener" data-s="drios-safari-badge">
78+
<a href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180" target="_blank"
79+
rel="noopener" data-s="drios-safari-badge" style="text-decoration: none;">
6380
<img src="../images/app-store-badge.svg" width="200">
6481
</a>
82+
<img src="../images/qr-code.png" style="margin-left: 1rem; max-width: 4rem;" loading="lazy" alt="Dark Reader for Safari QR code" />
6583
</p>
6684

67-
<h3>Update 2023: Dark Reader for Safari 2.0 is available for macOS</h3>
85+
<h1>Dark mode for Safari</h1>
6886

6987
<p>
70-
You can now create your own colorful theme,
71-
enable native dark theme detection
72-
and manage a list of sites where the extension is enabled.
88+
<img src="../images/safari/safari-mode.png" style="max-width: 32rem;" loading="lazy" alt="Dark Reader — Dark Mode for Safari preview" />
7389
</p>
7490

7591
<p>
76-
As we switched from an old <em>Safari App Extensions</em> platform
77-
to a modern <em>Safari Web Extensions</em> platform,
78-
there could be some problems that are out of our control.
79-
If the extension wasn't activated for you after the update,
80-
or the extension's settings page doesn't show up,
81-
or the dark theme looks broken,
82-
try the following:
83-
84-
<ul>
85-
<li>
86-
<strong>Quit</strong> Safari.
87-
</li>
88-
<li>
89-
<strong>Open</strong> Safari again. Go to <strong>Settings...</strong> menu.
90-
</li>
91-
<li>
92-
Go to <strong>Extensions</strong> tab.
93-
</li>
94-
<li>
95-
If you see two Dark Reader instances, <strong>disable</strong> the one that has version <strong>1.4.6</strong>.
96-
</li>
97-
<li>
98-
<strong>Enable</strong> Dark Reader <strong>2.0.0</strong>.
99-
</li>
100-
<li>
101-
If you still see any issues, please <strong>restart</strong> the browser or the system, reinstall the app.
102-
</li>
103-
<li>
104-
Your settings from 1.4.6 will not be transferred to 2.0.0.
105-
</li>
106-
<li>
107-
The app will no longer work in macOS High Sierra 10.13.
108-
</li>
109-
</ul>
110-
111-
We apologize if you faced any of these issues.
112-
The platform migration should make the further updates easier and more frequent.
92+
This browser extension helps protect your eyes by applying a dark theme to web pages.
93+
Select from a range of stylish color themes, ot design a personalized look by adjusting the background and text colors.
11394
</p>
11495

115-
<h3>Update 2021: Dark Reader for iOS is available in App Store</h3>
11696
<p>
117-
This version of Dark Reader works in all Apple devices that support iOS 15 or iPadOS 15.
97+
This version of Dark Reader works in all Apple devices that support iOS 15, iPadOS 15, or macOS 15.
11898
<a class="i-link" href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone">Install Dark Reader for iOS and iPadOS</a>.
11999
</p>
120100

121-
<p><em>
122-
By purchasing this app you get dark mode for safari browser in all platforms (macOS, iOS, iPadOS).
123-
If you purchased the Mac app before, you don't have to pay again.
124-
Due to an App Store bug you will see a price for the iOS app.
125-
Simply proceed with the payment and you will see a message saying that you have already paid.
126-
Enjoy!
127-
</em></p>
128-
101+
<h2>
102+
How to enable dark mode on iPhone
103+
</h2>
129104
<p>
130-
Install Dark Reader for Safari from the <a class="s-link" href="https://itunes.apple.com/us/app/dark-reader-for-safari/id1438243180">App Store</a>.
105+
With <a href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone" target="_blank"
106+
rel="noopener" data-s="drios-safari-textios">
107+
Dark Reader extension for iOS</a>, web pages will become high contrast and easy to read. No more glaring light at night.
131108
</p>
109+
<p>
110+
<a href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone" target="_blank"
111+
rel="noopener" data-s="drios-safari-badgeios" style="text-decoration: none;">
112+
<img src="../images/app-store-badge.svg" width="200">
113+
</a>
114+
<img src="../images/qr-code.png" style="margin-left: 1rem; max-width: 4rem;" loading="lazy" alt="Dark Reader for Safari QR code" />
115+
</p>
116+
<iframe width="560" height="315" src="https://www.youtube.com/embed/9nQjBBe8K44?rel=0" frameborder="0" allow="autoplay;"
117+
allowfullscreen></iframe>
118+
<p>
132119

120+
<h3>
121+
Best dark mode extension for Safari
122+
</h3>
133123
<p>
134-
Dark Reader for Safari partially uses code from the original Dark Reader, some part of the extension is rewritten in
135-
Swift. Most of the features will be ported soon.
124+
Started as a hobby project in 2014, today Dark Reader is #1 dark mode add-on trusted by 10,000,000 users.
125+
Beware of cheap clones with manipulated ratings.
126+
Use the original app made with precision and care.
127+
Available for both macOS and iOS.
128+
</p>
129+
<p>
130+
<img src="../images/ios-photo-side.webp" style="max-width: 16rem;" loading="lazy" alt="Dark Reader iPhone picture" />
136131
</p>
137132

138-
<h3>How to use it</h3>
133+
<h3>How to activate dark mode in macOS</h3>
139134
<iframe width="560" height="315" src="https://www.youtube.com/embed/3bP6Dq5cF0o?rel=0" frameborder="0" allow="autoplay;"
140135
allowfullscreen></iframe>
141-
<p>
142-
<ul>
143-
<li>
144-
Open Safari <strong>preferences</strong>.
145-
</li>
146-
<li>
147-
Open <strong>Extensions</strong> tab.
148-
</li>
149-
<li>
150-
Click <strong>checkbox</strong> near Dark Reader.
151-
</li>
152-
<li>
153-
Adjust the settings for your taste.
154-
</li>
155-
</ul>
156-
</p>
136+
<ul>
137+
<li>
138+
Open Safari <strong>preferences</strong>.
139+
</li>
140+
<li>
141+
Open <strong>Extensions</strong> tab.
142+
</li>
143+
<li>
144+
Click <strong>checkbox</strong> near Dark Reader.
145+
</li>
146+
<li>
147+
Adjust the settings for your taste.
148+
</li>
149+
</ul>
157150

158151
<h3>Customize theme for specific website</h3>
159152
<iframe width="560" height="315" src="https://www.youtube.com/embed/X75j1YvWhYU?rel=0" frameborder="0" allow="autoplay;"
160153
allowfullscreen></iframe>
161-
<p>
162-
<ul>
163-
<li>
164-
Click <strong>More theme options</strong> button.
165-
</li>
166-
<li>
167-
Click <strong>domain.name.com</strong> button at top.
168-
</li>
169-
<li>
170-
Configure the theme.
171-
</li>
172-
<li>
173-
Click again if you would like to use global theme settings.
174-
</li>
175-
</ul>
176-
</p>
154+
<ul>
155+
<li>
156+
Click <strong>More theme options</strong> button.
157+
</li>
158+
<li>
159+
Click <strong>domain.name.com</strong> button at top.
160+
</li>
161+
<li>
162+
Configure the theme.
163+
</li>
164+
<li>
165+
Click again if you would like to use global theme settings.
166+
</li>
167+
</ul>
177168

178169
<h3>Known issues</h3>
179170
<p>
180171
Some issues happen due to problems of Safari browser and cannot be fixed at the moment.
181-
<ul>
182-
<li>
183-
<strong>Extension doesn't work after install or update, doesn't show up in Safari Preferences or wrong version number is displayed</strong>
184-
— Quit Safari and open again.
185-
</li>
186-
<li>
187-
<strong>IFrames are not inverted</strong>
188-
— Safari has no API to determine the address of the web page, where the IFrame is hosted, when it has a different domain name.
189-
</li>
190-
<li>
191-
<strong>On some websites a dialog asking for credentials appears</strong>
192-
— Dynamic mode loads CSS files and images for analysis, but some websites require authentication to access these resources. Please use Filter mode for such websites.
193-
</li>
194-
<li>
195-
<strong>After 1.3.0 update there is too much Sepia</strong>
196-
— Please, click Settings, then click Theme, scroll down, reduce Sepia from 100% to 0%.
197-
</li>
198-
<li>
199-
<strong>macOS Catalina Auto appearance doesn't work correctly</strong>
200-
— Please, go to General System Preferences, select Light appearance, then switch to Auto again.
201-
</li>
202-
</ul>
203172
</p>
173+
<ul>
174+
<li>
175+
<strong>Extension doesn't work after install or update, doesn't show up in Safari Preferences or wrong version number is displayed</strong>
176+
— Quit Safari and open again.
177+
</li>
178+
179+
<li>
180+
<strong>If you see the "Pay" button after payment</strong>
181+
— Due to an App Store bug you will see a price for the iOS app.
182+
Simply proceed with the payment and you will see a message saying that you have already paid, you don't have to pay again.
183+
By purchasing this app you get dark mode for safari browser in all platforms (macOS, iOS, iPadOS).
184+
</li>
185+
</ul>
204186

205187
<h3>Contacts</h3>
206188
<p>

0 commit comments

Comments
 (0)