Website Dark Mode: Is Your Logo Vanishing on Phones?

The clocks went back on Sunday, so it is dark before most shops have locked up. That small seasonal change quietly alters how a lot of your customers see your website, because many phones now switch their whole screen to dark mode at sunset, or the moment the battery runs low.

You have probably never looked at your own site that way. Your phone is set up the way you like it, the website looks the way you approved it, and nobody rings to tell you the logo has gone missing. They just leave.

The Version of Your Website You Have Never Seen

Dark mode is a phone setting that swaps bright white screens for dark grey and black. People turn it on because it is easier on the eyes at night, and Google's Android developer guidance says it "reduces power usage by a significant amount, depending on the device's screen technology". It is not always a deliberate choice, either. Google's Android help warns that "when battery saver is on, Dark theme may turn on automatically", and Pixel phones offer a schedule that turns it on from sunset to sunrise.

So a customer browsing your site at seven in the evening may be seeing it in dark mode without ever having decided to. Their battery ran low on the commute. The sun went down. That is all it takes.

When that setting is on, your website ends up in one of three states:

Untouched. The browser shows the site exactly as designed. Bright, light, fine.
Switched by your theme. Your WordPress theme carries its own set of dark colours and swaps to them automatically. Browsers pass on the visitor's preference through a standard signal that MDN, Mozilla's developer reference, describes as a way "to detect if a user has requested light or dark color themes".
Repainted by the browser. The site has no dark design at all, so the browser builds one on the fly by recolouring backgrounds and text.

States two and three are where things go wrong. And the visitor's phone picks which state they get. Not you.

Your customers are split across very different browsers

I would rather use Irish numbers than the American ones vendors usually quote. StatCounter's figures for Ireland put Apple at a little under half of the mobile phones browsing the web in September 2026, with Samsung at roughly four in ten. On the browser side, Chrome carried a bit over half of mobile browsing, Safari just under four in ten and Samsung's own browser something like one visit in twenty. Those shares drift from month to month, but the spread is the point. Each of those browsers has its own idea of what dark mode should do to your site.

How many of those people actually browse in dark mode? I have not seen a figure from Apple or Google that I would trust, and I would treat anyone quoting you a precise percentage with some suspicion. What matters is that the setting exists on every one of those phones, and some of it switches on without the owner touching anything.

Four Places Your Website Gets Repainted

Where your visitor is	What decides how your site looks	What you can control
Safari on iPhone	Your theme, and nothing else	Whether your theme has dark styles
Chrome on Android	Your theme, plus an optional browser setting	Your theme, and a one-line opt-out
Samsung Internet	The browser's own dark mode settings	Very little, so design defensively
Links opened inside apps	The app's developer	Almost nothing, so verify anyway

Safari on iPhone

Apple's approach is the most predictable of the four. When Apple's WebKit team announced dark mode support for the web, they were blunt: "Safari and WebKit do not auto-darken web content", and pages "will need to opt-in to dark mode". If your theme has no dark styles, an iPhone in dark mode shows your site exactly as it would at noon. Where your theme does include them, they switch on automatically, and that is usually where the vanishing logo starts.

Chrome on Android

Chrome honours your theme's dark styles in the same way. Google has also built a feature that its Chrome developers describe as applying "an automatically generated dark theme to light themed sites" for people who have chosen dark mode on their phone. Going by Google's documentation, the visitor has to switch that on themselves in Chrome's theme settings, so it is a choice rather than a default. For the people who do switch it on, though, your carefully chosen brand colours become whatever an algorithm decides they should be.

Samsung Internet

This is the one that catches people out. On Samsung's own developer blog in 2021, a Samsung developer advocate wrote that the browser would support forced dark mode for users who expect dark web pages once their phone is set to dark. The settings have moved around between versions since, and one long-running thread on Samsung's developer forum is titled, plainly, "Websites' dark mode gets overridden by Samsung Internet's dark mode". One visit in twenty is not a rounding error when that visitor is trying to book with you.

Links opened inside Instagram and Facebook

Tap a link inside a social app and it often opens in a small browser built into that app rather than in Chrome or Safari. On Android, those built-in browsers rely on a component called WebView, and Google's Android documentation makes clear that the app's own theme and settings decide whether your page gets darkened. Not you, and not the visitor's browser of choice. The app.

What Breaks First When Your Site Goes Dark

The failures are predictable once you know where to look.

Your logo. The most common one by a distance. A dark logo saved with a transparent background sits beautifully on a white header. Put that same header on near-black and the logo is still there, technically. Dark ink on a dark background. Gone.
Words inside images. Opening hours, prices or an offer saved as part of a picture keep their original colours. Dark lettering in a graphic with a transparent background disappears the same way the logo does, and a white-boxed image glares out of an otherwise dark page.
Buttons in brand colours. An automatic repaint has no idea whether your Book Now button still has enough contrast to read. Samsung's own developer guidance reminds designers that normal text needs a contrast ratio of at least 4.5:1 for accessibility, and an algorithm guessing at your colours does not check.
Forms. Input boxes can end up with dark text on a dark field, so the customer cannot see what they have typed into your enquiry form.
Embedded boxes from other companies. Maps, booking calendars and payment panels follow their own rules. A bright white booking widget in the middle of a dark page looks broken, even when it works perfectly.

Consider a scenario that suits this time of year almost too well. A mobile sauna operator on the Donegal coast takes most of its winter bookings in the evening, from people scrolling on the sofa after dark. The logo is a navy wordmark saved on a transparent background, and the theme switches to dark colours whenever the visitor's phone does. Every evening visitor with a phone set to change at sunset gets a header with no business name in it and a booking button whose label has faded into the button itself.

Nobody complains. They assume the site is unfinished, and an unfinished-looking site does not get a deposit. Meanwhile the owner checks the website at lunchtime, on a phone in light mode, and sees nothing wrong all winter.

That is the real cost. Not a crash, not an error message, just a steady trickle of customers who concluded you looked less established than you are. It is the same snap judgement behind the three-second home page test, only now part of that test happens in the dark.

A dark logo on a transparent background does not break. It simply stops being visible.

How to Verify Your Site in Dark Mode in Ten Minutes

Do this on your own phone. Nothing else is needed.

Switch your phone to dark mode. On an iPhone, open Settings, then Display & Brightness, and choose Dark; on most Android phones, go to Settings, then Display, and turn on Dark theme.
Load production in every browser you have. Open your home page in Safari or Chrome, then in Samsung Internet if your phone has it, and look at the header first, because if the logo has gone you have found your first conflict.
Open the link from inside an app. Send your web address to yourself in an Instagram or Facebook message and tap it there, since that is how plenty of customers actually arrive.
Walk the customer's path. Go from the home page to your contact or booking page, type something into a field, and make sure you can read what you typed and every button label.
Screenshot anything wrong. A screenshot from the phone itself is what you, or whoever helps you, will need to fix it, because the problem will never show up on a laptop in an office.

Afterwards, some owners leave their phone in dark mode for a week to catch anything the first pass missed. Not a bad habit.

Two Honest Ways to Fix It

There are two sensible routes. Either one beats leaving it to chance.

Support dark mode properly

Keep, or choose, a theme that handles dark mode deliberately, then give it what it needs. Mostly that means a logo that works on both backgrounds (a light version, or a version sitting on a solid shape of its own) and no essential information trapped inside images. Some WordPress themes treat dark mode as a switch you turn on. Twenty Twenty-One, one of WordPress's own default themes, describes its dark mode support as opt-in, set from the Customizer under Colors & Dark Mode, and it adds a visible toggle so visitors can choose for themselves.

Tell browsers your site is light-only

If your brand only works on white, you can say so. Chrome's developer documentation gives a single line for the head of your pages:

<meta name="color-scheme" content="only light">

That line tells Chrome not to apply its automatic dark repaint. Anyone comfortable adding code to a theme header can do it in five minutes; for everyone else, it is a short request to whoever supports the site. Google's developers would rather you built a proper dark theme, for battery and accessibility reasons, and that is a fair argument if you have the time.

What neither option can promise

No fix can guarantee that every phone in the country sees what you see. Judging by the complaints on Samsung's own forum, its forced dark mode has overridden sites that tried to control their own appearance, and in-app browsers follow the app developer's choices rather than yours. You are cutting the odds of a broken first impression, not removing them. That is why the ten-minute check is worth repeating every time you change your logo or theme.

In fairness, there are businesses for whom all of this is a much bigger job. If your brand is built around a carefully art-directed dark identity across hundreds of product pages, and you want hand-tuned light and dark versions of every page looked after by a developer on retainer, premium managed hosts paired with an in-house design team genuinely suit that workload better than a self-built site. But that is not most local businesses. For a sauna, a solicitor or a sandwich bar, a logo that survives both backgrounds and a ten-minute check covers nearly all of the risk.

Where Your Hosting Platform Comes In

Every fix above means changing your design, and the risky moment is the change itself. Swap the logo or switch on a theme's dark mode directly in production on a busy evening, and anyone halfway through a booking sees the half-finished result.

A sensible setup gives you three things. Somewhere safe to try the change first. The access to make it yourself without waiting on anyone. And a quick way back if it goes wrong.

That is the standard, and it is why Web60 sites come with one-click staging environments for testing changes before customers see them. Clone the site, change the logo and the dark mode settings in staging, verify the result on your own phone in both modes, then deploy to production. If something still looks off afterwards, automatic nightly backups with one-click restore mean a rollback is a click, not a rebuild.

You also have full WordPress access from day one, the same WordPress that W3Techs counts on roughly four in ten of all websites. Swapping a logo becomes a two-minute job you do yourself, not a change request billed at €75 to €150 an hour by whoever built the site. If the code line above is outside your comfort zone, Web60's Irish-based support team are real people who can talk it through with you. And if you are starting from nothing, you can see an AI-built WordPress site take shape in under a minute, then put it through the same dark mode check on your own phone before committing to anything. Hosting, SSL, backups, staging and support all sit inside the €60 a year.

The Practical Upshot

Dark mode is not a design trend you need an opinion on. It is a setting your customers already use, often without choosing it, and it changes how your website looks for a real share of the people who visit. You do not need a redesign to deal with it. You need a logo that survives a dark background, no vital information trapped inside images, and ten minutes on your own phone with dark mode switched on, repeated whenever the design changes. Do that once and you will know, rather than hope, what your customers are looking at.

Frequently Asked Questions

Why does my website look different on someone else's phone?

Usually for one of three reasons. Their phone may be in dark mode (sometimes switched on automatically by battery saver or a sunset schedule), they may be using a different browser such as Samsung Internet, or they opened your link inside an app like Instagram or Facebook, whose built-in browser follows the app's own settings. Ask which phone and browser they were using, then switch your own phone to dark mode and look again.

Does dark mode affect my Google rankings?

Google has not said that dark mode support is a ranking factor, and there is no good reason to expect it to be. The cost is commercial rather than technical: if visitors cannot read your logo, buttons or form fields, they leave, and that loses you enquiries wherever you rank.

How do I stop my website going dark on phones?

A colour-scheme tag set to 'only light' in the head of your pages tells Chrome not to apply its automatic dark repaint, and if your theme has its own dark mode you can usually switch that off in the theme settings. Neither guarantees that every browser and app will comply, so the safest defence is still a logo and buttons that read clearly on both light and dark backgrounds.

What kind of logo file works in dark mode?

One that stays readable on both a white and a near-black background. In practice that means a logo sitting on its own solid background shape, a version with a light outline, or a separate light version your theme can swap in when dark colours are active. Verify it by viewing your site on your phone with dark mode switched on, not by looking at the file on your computer.

Is dark mode the same as night mode or a blue light filter?

No. Features such as Night Light on Android tint the whole screen red or amber to cut blue light, but they do not change your website's colours. Dark mode is different: it can make your theme switch to its dark colours, or make the browser recolour your page itself.

Website Dark Mode: Why Your Logo Vanishes on Some Customers' Phones