# How Gmail dark mode changes your email colours (tested on Android and the web) Which colours Gmail changes in dark mode, and whether it applies prefers-color-scheme. Measured colour values from Gmail for Android and Gmail on the web. Dark mode has quietly become the default for a lot of people. They switch their phone over once and never switch it back. For email designers that creates an odd situation: some email apps respond by recolouring your email for the reader, and you never get a say in the new colours. Most of the time the result is fine. White backgrounds go dark, black text goes light, and the email stays readable. But it is easy to get caught out. A logo with dark lettering can vanish into a dark background. A red warning can turn orange. A light grey panel can blend into the page. And because it only happens on the reader's phone, you rarely see it until someone sends you a screenshot. Gmail is the obvious place to start, so we tested exactly what it changes. This guide shows the results colour by colour, explains what Gmail does with your own dark-mode CSS (spoiler: nothing), and covers what to check before you send. ## How dark mode works in email ### Two ways an app can handle dark mode An email app can deal with dark mode in two broad ways. It can leave the email alone and only darken its own interface around it, or it can recolour the email itself, deciding which of your colours to swap for darker or lighter ones. Some apps also honour a dark version that you design yourself in CSS. ### Your own dark-mode CSS The standard way to design that dark version is a `prefers-color-scheme: dark` media query, a CSS rule that applies only when the reader's device is in dark mode. Some designers also add Outlook-specific selectors such as `[data-ogsc]`. Whether these rules do anything depends entirely on the app. ## How we tested Gmail dark mode ### The test email We built a dark mode test email with the kinds of colours real emails use: a white page, black text, a navy panel, green and blue buttons, a light grey panel, red text, a transparent logo and a black border. It also contains two dark-mode CSS rules, the standard `prefers-color-scheme` media query and the Outlook-specific selector. If either rule applies, its line turns purple. ### What we compared We opened the email in Gmail for Android and Gmail on the web, once in light mode and once in dark mode, and measured the colours from the pixels in the screenshots. Our Gmail for Android test device reads mail through an IMAP account. These results are from our November 2026 tests. Checking this by hand means switching a phone into dark mode and sending yourself every revision. We used MailSlurp, an email testing platform that can capture Gmail for Android in both light and dark mode automatically. ## How automated device rendering works Choose the devices and email services you want to test, and MailSlurp gives you a special email address. Send your campaign to that address. MailSlurp opens the email in the selected apps and webmail services, then captures screenshots automatically. The screenshots come back together, ready to compare across phones, tablets and computers. Check the layout, images and buttons, then share a result link so your team can review the same version of the email. ![One email branches to an iPhone, a desktop computer and a tablet for automated rendering.](/_astro/automated-device-rendering-v1.DkA8n4lC_20VMnF.webp) ## What Gmail for Android changes in dark mode ### The same email, light and dark Here is the test email in Gmail for Android, first in light mode and then in dark mode. Notice which colours change and which stay put. Gmail for Android (light) ![Dark mode test email in Gmail for Android in light mode with a white background, navy panel, green and blue buttons, grey panel, red text and a green logo](/_astro/gmail-android-light.BZWgxVeO_2fQsjg.webp) Gmail for Android (dark) ![The same email in Gmail for Android in dark mode with a near-black background, white text, unchanged green, blue and navy, a dark grey panel, orange-red text and neither dark-mode rule applied](/_astro/gmail-android-dark.Dtp9sSKK_hnXMk.webp) Gmail for Android darkens light colours and lightens dark text, but leaves brand colours alone. Neither dark-mode CSS rule turned purple. ### Every colour change we measured | In the email | Gmail for Android, dark mode | Gmail on the web, dark theme | |---|---|---| | White background `#ffffff` | `#121212` | Unchanged | | Black text `#111111` | `#ffffff` | Unchanged | | Black border `#111111` | `#575757` | Unchanged | | Red text `#d50000` | `#ff562d` | Unchanged | | Light grey panel `#f2f4f7` | `#222426` | Unchanged | | Navy panel `#0b1f3a` | Unchanged | Unchanged | | Brand green `#00a651` | Unchanged | Unchanged | | Brand blue `#0069c2` | Unchanged | Unchanged | | `prefers-color-scheme: dark` rule | Not applied | Not applied | | Outlook `[data-ogsc]` rule | Not applied | Not applied | ### The pattern behind the numbers Gmail for Android changes the light parts of your email and the very dark text, and leaves everything in between alone. White became near-black, black text became white, and the pale grey panel turned dark grey. The saturated colours, our green and blue buttons and the navy panel, kept their exact values. Red text was the one coloured element that shifted, to a lighter orange-red that reads better on a dark background. ### Your dark-mode CSS is ignored Neither of our dark-mode rules turned purple. In the Gmail app, Gmail decides your dark colours, not your stylesheet. You can still include a `prefers-color-scheme` block for the apps that use it, but don't design around it for Gmail. ## What Gmail on the web does With Gmail's dark theme turned on, Gmail on the web darkened its own interface and left our message body exactly as sent, with its white background and original colours. So a reader using Gmail in a dark browser theme sees your light email surrounded by a dark frame. ## What to check before you send ### Logos Check logos on a `#121212` background. A transparent PNG logo with dark lettering will sit on a near-black background in the Gmail app. Our green logo stayed readable; a black wordmark would not. Give dark logos a light outline or a solid light background with a little padding. ### Colours that carry meaning Expect warning colours to shift. Our red `#d50000` became the orange-red `#ff562d`. If colour carries meaning, such as an overdue balance or an error, add a word or an icon as well. ### Buttons Buttons in saturated colours are safe. Gmail kept our green and blue buttons as they were, so white button text stayed readable. ### Light panels Light grey panels lose contrast with the page. Our `#f2f4f7` panel became `#222426` on a `#121212` page, which is hard to tell apart. Use a border if the panel's edge matters. ### Test your email in Gmail dark mode on Android today Send your campaign or template to MailSlurp and compare light and dark screenshots from Gmail for Android, Gmail on the web and Outlook for Android. [Preview your email](https://app.mailslurp.com/sign-up/?onboardingRequest=devicePreview) ## How other apps compare Outlook for Android takes the opposite approach. It darkened our brand green from `#00a651` to `#005a09`, lightened the navy panel, and applied both dark-mode CSS rules. The [dark mode colour map](/guides/email-client-support/dark-mode-colour-map/) shows what both Android apps did to 99 colours, the [November 2026 report](/guides/email-client-support-report/#dark-mode) has the side-by-side comparison, and the [dark mode email preview guide](/blog/dark-mode-email-preview/) explains how to check your own email. ## What these tests don't cover - **Gmail for iOS in dark mode.** - **The Gmail app signed in to a Google account.** Our Gmail for Android test device reads an IMAP account. - **Apple Mail and Outlook for Windows in dark mode.** So far we have measured dark mode in Gmail and Outlook for Android and Gmail on the web. The test email is free to download: [dark mode test email (HTML)](/resources/email-client-support/2026-11/dark-mode.html). More results by app are on the [email client support hub](/guides/email-client-support/). ## Frequently asked questions ### Does Gmail support prefers-color-scheme? Not in our tests. Gmail for Android and Gmail on the web both ignored our `prefers-color-scheme: dark` media query. ### Why does my logo disappear in Gmail dark mode? Gmail for Android turns the white background to `#121212` but leaves image pixels alone, so dark parts of a transparent logo end up on a near-black background. Give the logo a light outline or a solid background. ### Does Gmail on the web change email colours in dark mode? Not in our test. With Gmail's dark theme on, the message body kept its original white background and colours. ### How do I preview my email in Gmail dark mode? You can switch your own phone to dark mode and send yourself a test, or use a device preview service that captures Gmail in dark mode for you. See [how to preview email in Gmail for Android dark mode](/guides/how-to-preview-email-in-gmail-android-dark-mode/).