When Your Logo Vanishes: The 2026 Dark-Mode Asset Check for Small UK Brands

Dark mode is not a filter. It is a different display environment, with its own contrast rules and its own ways of making good assets look wrong. If your visual identity only works against white, it is not quite finished. The good news is that you do not need a full rebrand. You need an asset check.

Why switching the lights off breaks light-mode assets

Plenty of small UK brands still treat dark mode as a setting users choose and forget. In practice, it is where a lot of first impressions now happen: a phone at night, a laptop in a dim office, a link preview in a group chat. The lazy fix is to invert or dim every asset. That rarely works. A soft grey wordmark that feels calm on white can turn to mud on charcoal. A bright accent can become a neon stripe. A transparent PNG with dark lettering can vanish entirely. Inversion also flips brand colours you spent time choosing, while dimming can make a logo look tired or disabled.

Dark interfaces are not all the same. Apple's iOS and macOS use layered greys, Android varies by manufacturer, and web apps such as Gmail or Outlook can apply their own treatments. Your logo needs to survive more than one shade of near-black.

Start with the logo, not the whole website

The quickest test is to drop your current logo files onto four backgrounds: #121212, #1C1C1E, #0F0F0F and #202124. Then view them on a phone at arm's length. If the wordmark disappears, you need a reverse or dark-mode-specific version. Do not simply turn it white if your brand relies on a coloured accent. Adjust the accent for contrast and keep the shape recognisable. Test the horizontal logo, the stacked logo and the standalone icon separately. One may work while another fails.

Transparent PNGs are the usual culprit. A logo with a transparent background is only as good as its surroundings. Black text on transparency is invisible on dark surfaces. White text on transparency disappears on light invoices. If you supply a partner or client with a logo pack, include light and dark versions with clear file names, plus a one-page note on which to use where.

Icons, favicons and app tiles

Small icons have less room to recover. A favicon at 16 or 32 pixels cannot carry fine detail, and browser tabs can be light or dark. Test your favicon in both modes and at actual size. If it becomes a smudge, simplify it. App icons are usually displayed on a coloured or blurred background, and some platforms do not support transparency. Design a solid tile that works without relying on a white square. A monochrome mark can be a useful fallback, but check it still looks like you.

Screenshots and marketing images

Screenshots are another quiet failure point. A bright white app screenshot pasted into a dark landing page looks like a lightbox that never closes. Either provide dark-mode screenshots or frame the image deliberately so the brightness feels intentional. Product shots with white cut-outs can have the same effect. If you sell physical goods, a white-background packshot may be correct for a marketplace but wrong for a dark newsletter. Export separate versions rather than asking a designer to fix it later.

Email templates and social previews

Email is where dark mode gets messy. Apple Mail, Gmail and Outlook do not treat colour in identical ways. Images with baked-in white backgrounds can appear as glowing rectangles. Text colours may be adjusted by the client. Keep templates simple, test in at least two dark-mode email clients, and avoid relying on background images for contrast. If your logo is an image, make sure it has a transparent or dark-friendly version.

Social previews deserve the same attention. Open Graph images and link cards are often viewed in dark feeds, with text overlaid or cropped. Keep important text away from the edges, use strong contrast, and check how the card looks on a phone. A preview that reads well on a desktop design file can turn into a muddy rectangle in a group chat.

A small-brand dark-mode checklist

• Test logos on at least three near-black backgrounds and one light background.
• Keep separate light, dark and monochrome logo files with sensible names.
• Check transparent PNGs for invisible edges, glows and shadows.
• Simplify favicons and app icons until they work at small sizes.
• Export dark-friendly screenshots and packshots where needed.
• Preview emails in two dark-mode clients before sending.
• Check link previews on mobile, not just desktop.
• Add dark-mode notes to your brand asset folder.

None of this requires a huge budget. It requires accepting that dark mode is a real place where customers meet your brand. Treat it as a second canvas, not a filter, and your visual identity will hold up when the lights go down.