A dark Gmail window can draw your eye to the surrounding interface before you've looked closely at the email. In the preview below, the sidebar and toolbar turn dark while the campaign stays white. The text and booking button still need their own inspection. This walkthrough uses MailSlurp's **Gmail.com Dark** target and a matching light preview. We'll send a fictional ClearRoof gutter-care offer, open the completed result and compare the photograph, service descriptions, price and final links. The Android comparison later in the guide shows why a browser check alone would leave another appearance unreviewed. ## Why check the email separately from Gmail's background? The app's appearance tells you where to start looking. Follow the message itself: the brand name, heading, body text, button label and quieter footer copy. Each element sits against a background that affects how easily someone can read it. Keep the same campaign for the light and dark views. Otherwise, a copy or styling edit can look like a change caused by the appearance setting. The [Gmail family guide](/guides/how-to-preview-an-email-in-gmail/) helps choose between the browser and phone apps; this guide tests the browser's dark target. Changing your own appearance setting is useful for a quick check. Repeating the exercise after several edits, with colleagues collecting phone screenshots as well, takes more coordination. MailSlurp collects the selected client results for the campaign so the team can review the same revision together. ## Step-by-step guide: preview Gmail web in dark mode You'll need device previews available in your MailSlurp workspace and enough preview credits for the selected target. We tested **Gmail.com Dark**, the Chrome browser target in dark mode, on **October 9, 2026 (NZDT)**. The ClearRoof example includes a hosted gutter photograph, two service descriptions, a starting price of $160 + GST, a booking action and pricing conditions. We sent the unchanged campaign separately to the light and dark web targets. The [Gmail web light tutorial](/guides/how-to-preview-email-in-gmail-web/) covers the matching light result. ### 1. Select Gmail.com Dark Open the [new device preview form](https://app.mailslurp.com/device-previews/create?onboardingRequest=devicePreview), or choose **Start new render** from **Device previews**. Expand **Custom target set** and select **Gmail.com Dark**. Confirm **1 target selected** for this check and make sure a saved profile has not added other clients. **Gmail.com** is the separate light target; **Gmail Android Dark** opens the Android app instead. ### 2. Copy the address after selecting the dark target Choose **Send email** and copy the address under **Send your email to this address**. Compare it with the recipient in your sending tool before sending. Copy the current address after selecting the intended target. Reusing an address from a previous light or phone check can send the campaign to a different client set. {{LANDING_SHORTCODE:ARTICLE_IMAGE:%7B%22src%22%3A%22asset%3Aguides%2Fhow-to-preview-email-in-gmail-web-dark-mode%2Fclearroof-send-email-full-window.jpg%22%2C%22alt%22%3A%22MailSlurp's%20complete%20preview%20workspace%20with%20one%20browser%20target%20selected%2C%20the%20generated-address%20field%20and%20the%20waiting%20control%22%2C%22width%22%3A%221920%22%2C%22height%22%3A%22907%22%2C%22caption%22%3A%22The%20Send%20email%20setup%20used%20for%20the%20Gmail.com%20Dark%20run.%20The%20generated%20address%20is%20hidden%20for%20privacy%3B%20use%20the%20current%20address%20from%20your%20own%20target%20selection.%22%7D}} ### 3. Send the campaign and wait for completion Send your campaign or test email to that address. Your email platform's test-send path lets you inspect the message it produces, including the latest personalization, links and footer. The subject here is **Before the next downpour: gutter care from $160 + GST**. You can [download the sample email](/resources/email-rendering/clearroof-seasonal-care-v2.eml) to inspect the source, hosted photograph and example links. Keep that source unchanged for a light/dark comparison. Choose **I have sent my email** to open the waiting view. Receipt starts the run automatically. Our matching subject appeared with **RUN CREATED**, then **View results** opened the run. Wait for **COMPLETE** and a **READY** Gmail.com Dark result. This run finished with one ready screenshot. If your result is still pending, inspect the existing message and run before sending another copy. ### 4. Open the campaign and inspect its colors Open the completed screenshot. The viewer identifies **Gmail.com Dark** and **Chrome browser render in dark mode**. Use the zoom controls for smaller text, or **Open** to view the complete image separately. Look at the Gmail interface around the message, then move into the email itself. Read the service descriptions and button label, and continue through the conditions and footer. {{LANDING_SHORTCODE:ARTICLE_IMAGE:%7B%22src%22%3A%22asset%3Aguides%2Fhow-to-preview-email-in-gmail-web-dark-mode%2Fclearroof-viewer-full-window.jpg%22%2C%22alt%22%3A%22MailSlurp's%20full-window%20Gmail.com%20Dark%20viewer%20at%20200%25%20zoom%2C%20showing%20a%20white%20campaign%20with%20dark%20text%2C%20two%20service%20columns%2C%20a%20yellow%20booking%20button%20and%20the%20complete%20footer%22%2C%22width%22%3A%221920%22%2C%22height%22%3A%22907%22%2C%22caption%22%3A%22The%20dark%20web%20result%20at%20200%25%20viewer%20zoom.%20The%20lower%20photograph%2C%20headline%2C%20services%2C%20price%20and%20complete%20footer%20are%20visible.%20The%20full%20comparison%20below%20also%20shows%20the%20top%20of%20the%20campaign%20and%20Gmail's%20surrounding%20interface.%22%7D}} ## Compare the same campaign in light and dark Both images use the same ClearRoof source and were captured on October 9, 2026. Start with the sidebar and toolbar, then compare the message surfaces and text. Open the full-size images when reading the smaller conditions and links. {{LANDING_SHORTCODE:ARTICLE_IMAGE_COMPARISON:%7B%22leftSrc%22%3A%22asset%3Aguides%2Fhow-to-preview-email-in-gmail-web%2Fclearroof-gmail-web-result.jpg%22%2C%22leftAlt%22%3A%22ClearRoof%20campaign%20in%20Gmail%20web%20light%20mode%2C%20with%20a%20light%20Gmail%20interface%20around%20a%20white%20email%2C%20gutter%20photograph%20and%20yellow%20booking%20button%22%2C%22leftWidth%22%3A%221440%22%2C%22leftHeight%22%3A%222200%22%2C%22leftLabel%22%3A%22Gmail%20web%20light%22%2C%22rightSrc%22%3A%22asset%3Aguides%2Fhow-to-preview-email-in-gmail-web-dark-mode%2Fclearroof-gmail-web-dark-result.jpg%22%2C%22rightAlt%22%3A%22The%20same%20ClearRoof%20campaign%20in%20Gmail%20web%20dark%20mode%2C%20with%20a%20dark%20sidebar%20and%20toolbar%20around%20a%20white%20email%2C%20dark%20prose%20and%20yellow%20booking%20button%22%2C%22rightWidth%22%3A%221440%22%2C%22rightHeight%22%3A%222200%22%2C%22rightLabel%22%3A%22Gmail%20web%20dark%22%2C%22caption%22%3A%22The%20Gmail%20interface%20changes%20while%20this%20campaign%20retains%20its%20white%20body%2C%20dark%20text%20and%20yellow%20action%20with%20a%20dark%20label.%20Both%20complete%20results%20include%20the%20photograph%20and%20full%20footer.%20Address%20details%20are%20hidden%20for%20privacy.%22%7D}} {{LANDING_SHORTCODE:POST_CTA_BANNER:%7B%22title%22%3A%22Start%20device%20rendering%20today%22%2C%22content%22%3A%22Check%20the%20same%20campaign%20across%20webmail%2C%20phone%20apps%2C%20desktop%20clients%20and%20available%20dark-mode%20targets%20before%20sending%20it%20to%20customers.%22%2C%22buttonHref%22%3A%22%2Fproduct%2Fdevice-previews%2F%22%2C%22buttonText%22%3A%22Explore%20device%20rendering%22%2C%22buttonTheme%22%3A%22blue%22%2C%22image%22%3A%22%22%2C%22imageAlt%22%3A%22%22%2C%22imageWidth%22%3A%22%22%2C%22imageHeight%22%3A%22%22%2C%22imagePosition%22%3A%22%22%7D}} ## What changed in Gmail web's dark view? Gmail's sidebar, search area and toolbar are dark. Inside that interface, the campaign remains white on its pale surround. The ClearRoof brand and service headings stay teal, with dark prose below them. The hosted gutter photograph appears in both results. The layout is also similar: **Time to clear your gutters?** and **Gutter cleaning from $160 + GST** each fit on one line. **Gutters cleared** and **Downpipes checked** share a row. **Book gutter cleaning** keeps its yellow fill and dark label. The conditions, signoff and full footer are present, including preferences, unsubscribe, the sample notice and photo credit. No clipping notice or separate exposed preheader text appears in this result. If your first reaction is "the email is still white", identify which surface you mean before editing the template. Here, the dark target is visible in Gmail's interface and the message keeps its light treatment. The screenshots show that outcome for this campaign; they don't identify which styling rule determined it. ## How does this differ from Gmail Android dark mode? The [Gmail Android dark-mode walkthrough](/guides/how-to-preview-email-in-gmail-android-dark-mode/) uses the same ClearRoof campaign. There, the body becomes near black with light text. The yellow booking action remains yellow, but its label becomes white. In this web result, the body remains white and the button label remains dark. Those are different reading conditions for the same offer. Keep the app name with any review note: "Gmail web dark" and "Gmail Android dark" point a colleague to different results. If you change a text or button color after reviewing Android, send the revised campaign to both web appearances too. Inspect the label and its background together in each result before approving the change. ## How to check the smaller text and images Read the action label against its fill, then the price conditions against their own background. The main heading can look clear while quieter text needs closer attention. Use the full-size result for the footer links as well as the offer. ClearRoof uses text for its brand name. If your campaign has a transparent logo, look for letters or details that fade into the background in each result. The [dark-mode email preview guide](/blog/dark-mode-email-preview/) covers that image and color review. Describe a problem by the visible element and target before changing the design. Then render the revised campaign in both appearances and check it again. ## MailSlurp features for repeated appearance checks A [saved target profile](/docs/device-rendering-profiles/) can keep web light/dark and phone selections together for regular campaign reviews. Send your platform's finished test message to the render address, or use [HTML, exported files or stored messages](/docs/device-rendering-sources/) while developing the template. The viewer's zoom and full-image access let a reviewer move between a small color detail and the whole offer. Use [comments and share links](/docs/device-rendering-review/) to draw a colleague's attention to a particular label or line of text. Application teams can retain these results with the message produced by a [CI test](/docs/device-rendering-ci/). ## Which other apps should you include? Use Gmail's Android and iPhone targets when those apps matter to your audience. Outlook Android Dark is another distinct appearance check, alongside its light counterpart. Add desktop Outlook, Apple Mail and other webmail selections as needed. {{LANDING_SHORTCODE:DEVICE_PREVIEW_COVERAGE_TABLE:%7B%7D}} Keep the campaign revision fixed while comparing clients, then repeat the affected checks after an edit. ## Can the customer read the conditions? A reader needs to see what the service includes, what the starting price means and how the final price will be confirmed. Give those smaller details time in the review; they help someone decide whether to continue. Finish by reading from the price to the last footer link, then check your actual booking destination from a controlled campaign email. The sample's links are examples. Your customer's next step should be as clear as the offer.