iOS 13 brings dark mode to iPhones today, and websites stay as they are unless built to change. Dark logos on transparent backgrounds can vanish in emails and browser tabs, so fix those first.

A darker iPhone tonight

Apple releases iOS 13 today, and with it a dark mode for the whole iPhone: settings, messages, mail, the keyboard and Safari's own toolbars. Owners can switch it on for good or have it come on at sunset.

Many will try it tonight, and some will keep it.

For your website, very little changes by itself. Safari does not repaint websites dark; a page designed on white stays white unless the site has been built to change.

What does change is everything around the page, and a handful of places where your logo now sits on a background nobody designed it for.

What a visitor in dark mode sees

Your site, exactly as before, framed by dark toolbars. At night, a bright white page inside a dark phone reads as glaring. Not broken, just bright.

From today, Safari on the iPhone can also tell a website that its visitor prefers dark mode. A stylesheet can read that through a media query, the same mechanism that lets a page rearrange itself for a phone.

Safari on the Mac has done this since the spring, Firefox since May and Chrome since version 76 this summer. Android 10, released earlier this month, has a system-wide dark theme of its own.

Where dark mode reaches your brand

The first is where most businesses will notice it this week. A dark signature logo on a transparent background sits on whatever the mail app puts behind it.

Transparent logos

A logo saved as a PNG with a transparent background has no background of its own. It borrows whatever sits behind it: white on a white page, dark grey in a dark mail app.

Dark lettering on dark grey is effectively invisible. Thin dark outlines and dark symbols disappear the same way.

There are three fixes. Give the image a background of its own, such as a white block around the logo. Use a version with a light outline. Or, on your own site, swap in the reversed version in dark mode.

The first suits email signatures, where you cannot control what sits behind the image. The third needs the site to have a dark version, which is a larger decision.

Emails in dark mode

Mail apps differ more than browsers do. Some leave an email's design alone, some darken its background, some reverse most of its colours, and the behaviour is still changing from app to app.

So test rather than predict. Send your newsletter and an ordinary email with your signature to a phone in dark mode, and look at both.

The usual problems are dark text disappearing, a logo vanishing, and buttons whose text changes colour while the button does not. Whoever builds your emails can usually adjust the template for both.

The icon in the tab

The small icon in a browser tab, the favicon, sits on a dark tab bar when a computer or browser is set to dark mode, which Macs and Chrome have allowed for some time.

A black favicon with a transparent background disappears there, leaving a gap where your brand should be.

The fix is small: an icon with its own background shape, or one in a colour that reads on light and dark alike. Google's mobile results now show favicons beside each listing too, so it is worth getting right.

A worked example

A small family winery on the Saanich Peninsula sends a monthly newsletter about new releases and tasting room events, and its staff sign every email with the winery's logo.

The logo is a black line drawing of a vine leaf above the winery's name, saved as a PNG with a transparent background, the file the designer supplied for the website.

A staff member who had tried iOS 13 early found that in dark mode her signature showed a gap above the phone number, and the newsletter header had no logo at all.

The designer supplied a signature version set on a small white block, and a header version with a thin white outline. The favicon, also black on transparent, became the vine leaf in white on a deep red square.

The website itself stayed as it was: white, readable, and unaffected by the phone's setting.

A dark version of your site

A site can offer a dark version that appears automatically for visitors whose device asks for one. Everybody else sees the site as before.

It is more work than it sounds. Every colour needs a dark counterpart rather than a simple inversion: text, backgrounds, borders, buttons, form fields and shadows. Brand colours chosen for white often need adjusting to read on dark.

Photographs usually survive. Logos, icons and illustrations often need their own versions, and embedded maps, booking widgets and review feeds from other companies stay light, sitting in bright rectangles on a dark page.

Both versions then have to be tested, on every kind of page, for as long as the site runs.

Whether it is worth it

For most small business sites, not yet. A well-built light site is perfectly readable in dark mode; it is simply bright.

A dark version makes most sense where people read for a while, often in the evening: long articles, a menu read at a dim table, program notes for a performance.

The counter-case

Dark mode is a preference, and plenty of iPhone owners will never switch it on. Nothing about a light website breaks today, and no visitor is turned away by one.

A logo in a single mid-tone colour may already read well on both backgrounds, with nothing to change.

And a business planning a redesign within the year should put dark mode in that brief rather than patch the current site.

For everybody else: fix the transparent logos in emails and tabs now, and decide on a dark version at the next redesign.

Tonight, on your own phone

  1. Update a phone and switch dark mode on.
  2. Open your website and read a page.
  3. Send yourself an email with your signature.
  4. Open your last newsletter in the mail app.
  5. Check your favicon on a dark tab.
  6. Replace transparent logos where they vanish.
  7. Add dark mode to the next redesign brief.

Step three is where most businesses find something to fix. The signature goes out on every email the business sends, so a logo that vanishes there vanishes in front of every customer reading in the dark.

The versions every logo needs are covered in a logo that only works on white.

Frequently asked questions

Will my website turn dark on iPhones?

No. Safari does not repaint websites, so a page designed on white stays white unless the site has been built with a dark version.

Why does my logo vanish in dark mode?

Because it is dark lettering on a transparent background. It borrows whatever sits behind it, and in a dark mail app or tab bar that is dark grey.

How do I fix a vanishing email signature?

Use a version of the logo set on its own white or brand-coloured block, so it looks the same whatever the mail app puts behind it.

Do mail apps all treat dark mode alike?

No. Some leave an email's design alone, some darken the background, and some reverse most colours. Test your newsletter and signature on a phone in dark mode.

Should my website have a dark version?

Not yet, for most small business sites. Every colour needs a dark counterpart and every logo a new version, which suits a redesign better than a retrofit.

How does a site know a visitor prefers dark?

The browser reports it, and the site's stylesheet can read it through a media query. Safari on iPhones does this from today; Safari on Macs, Chrome and Firefox already do.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Logo that vanishes on dark backgrounds?

Send us your logo files. We will check your emails, tabs and site in dark mode this week.

Start a Conversation