1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Dear Apple, Please Fix Safari's Default Dark Mode Link Color</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="dear-apple-please-fix-safaris-default-dark-mode-link-color">Dear Apple, Please Fix Safari’s Default Dark Mode Link Color</h1>
<p>2022-04-18</p>
<p>Supporting dark mode on the modern web falls under the realm of accessibility and should not be ignored. It is important and helps keep the visual flow of your content to match that of your users’ operating system UI. Not to mention, it’s easy to implement and keep consistent across browsers.</p>
<h2 id="support-dark-mode-with-zero-css">Support Dark Mode with Zero CSS</h2>
<p>A common practice is to include a <code>@media</code> query via CSS to target styling changes based on whether <code>dark-mode</code> is active. I tend to believe this is overkill for basic websites. Many developers aren’t aware of the HTML <code>color-scheme</code> parameter. (This website itself is using it in place of CSS media queries)</p>
<h3 id="html-color-scheme">HTML “color-scheme”</h3>
<p>Adding the following meta tag inside your document’s <code>head</code> element, you can enable dark mode instantly with zero configuration:</p>
<pre><code><meta name="color-scheme" content="dark light" />
</code></pre>
<p>There are minor caveats:</p>
<ol>
<li>You should not be specifying any <code>background</code> styling to your <code>body</code> or <code>html</code> elements</li>
<li>You should be not specifying any <code>color</code> styling across any of your readable content (paragraphs, headings, lists, blockquotes)</li>
</ol>
<p>That’s it! In case you were curious, all major browsers support this color scheme meta tag: <a href="https://caniuse.com/mdn-html_elements_meta_name_color-scheme">https://caniuse.com/mdn-html<em>elements</em>meta<em>name</em>color-scheme</a></p>
<h2 id="but-wait-whats-this-about-safari">But Wait, What’s This About Safari?</h2>
<p>Even though by adding the color-scheme meta tag we get ourselves good dark mode support across all browsers - Safari has one big oversight: link color. Take a look at the comparison screenshots below (based on one of my older articles). The first one is taken in Firefox, the second in Safari:</p>
<p>Luckily for us there is a simple solution using minimal amounts of CSS[^1]:</p>
<pre><code>@supports (color-scheme: dark light) {
@media screen and (prefers-color-scheme: dark) {
a:link {color: #9e9eff;}
a:visited {color: #d0adf0;}
a:active {color: red;}
}
}
</code></pre>
<p>We are brute-forcing Safari to implement the same color HEX codes used by both Firefox and Chrome browsers. How a horrible accessibility oversight could happen within a company as large as Apple is astounding…</p>
<h2 id="apple-fix-your-browsers-dark-mode">Apple: Fix Your Browser’s Dark Mode</h2>
<p>My hope if that even one Safari design or development team member stumbles across this article and raises this ticket to the rest of the team[^2]. It’s an unbelievably easy fix and would save developers the headache of overriding these things ourselves.</p>
<p>Thanks for reading and happy dark mode to you all!</p>
<h2 id="refs">Refs</h2>
<ol>
<li>Special thanks to <a href="https://seirdy.one/">Seirdy</a> for suggesting the use of :link and :active support. I recommend you check out his take on <a href="https://seirdy.one/2020/11/23/website-best-practices.html#dark-themes">dark mode / theme support</a>.</li>
<li>This has an open ticket through <a href="https://bugs.webkit.org/show_bug.cgi?id=209851">Webkit Bugzilla</a></li>
</ol>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
