tdarb.org > Dear Apple, Please Fix Safari's Default Dark Mode Link Color

// 640 words // 3 minute read

Dear Apple, Please Fix Safari's Default Dark Mode Link Color

Supporting dark mode on the modern web falls under the realm of accessibility and should not be ignored. It is extremely important and helps keep the visual flow of your content to match that of your users' operating system UI. Not to mention, it's actually very easy to implement and keep consistent across browsers.

Support Dark Mode with Zero CSS

A common practice is to include a @media query via CSS to target styling changes based on whether or not dark-mode is active. I tend to believe for most basic websites - this is overkill. Many developers don't seem to be aware of the HTML color-scheme parameter. (This very website is using it in place of CSS media queries)

HTML "color-scheme"

Simply adding the following meta tag inside your document's head element, you can enable dark mode instantly with zero configuration:

<meta name="color-scheme" content="dark light" />

There are, of course, some very minor caveats:

  1. You should not be specifying any background styling to your body or html elements
  2. You should be not specifying any color styling across any of your readable content (paragraphs, headings, lists, blockquotes, etc)

That's it! In case you were also curious, all major browsers support this color scheme meta tag: https://caniuse.com/mdn-html_elements_meta_name_color-scheme

But Wait, What's This About Safari?

Even though by adding the color-scheme meta tag we get ourselves some very 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:

Firefox dark mode link color
Firefox's default dark mode link color
Safari dark mode link color
Safari's default dark mode link color - yuck!

Luckily for us there is a simple solution using very minimal amounts of CSS 1:

@supports (color-scheme: dark light) {
    @media screen and (prefers-color-scheme: dark) {
        a:link {color: #9e9eff;}
        a:visited {color: #d0adf0;}
        a:active {color: red;}
    }
}

So we are essentially brute-forcing Safari to implement the same color HEX codes used by both Firefox and Chrome browsers. How such a horrible accessibility oversight could happen within a company as large as Apple is astounding...

Apple: Fix Your Browser's Dark Mode

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 team2. It's an unbelievably easy fix and would save developers the headache of overriding these things ourselves.

Thanks for reading and happy dark mode to you all!


Footnotes

  1. Special thanks to Seirdy for suggesting the use of :link and :active support. I highly recommend you check out his take on dark mode / theme support. ↩︎

  2. Apparently this is already an open ticket through Webkit Bugzilla. ↩︎



Leave a comment

To make a comment, please send an e-mail using the button below. Your e-mail address won't be shared and will be deleted from my records after the comment is published. If you don't want your real name to be credited alongside your comment, please specify the name you would like to use. If you would like your name to link to a specific URL, please share that as well. Thank you.

Comment via email

Comments (2)
  1. njb
    Wow, there's a meta tag for light/dark themes? Didn't know that. I've been adding prefers-color-scheme media queries to my site, and I'm pleased with the results so far. I'm using light green for active links, and tomato red for visible links. Hopefully people like that.

  2. Pablo Vill
    Yes, I've also used prefers-color-scheme until now. Great article!