Dark Mode Email Design in Figma with Marka

Dark mode changes the setting around your email. A logo that looks clear on your Figma canvas may disappear against a darker surface, and a subtle button can lose its contrast. Address those design choices while the email is still easy to edit.

With Marka Email Generator, you can set dark-mode colors for elements in your Figma email and compare previews before exporting. Start with a Figma email template and open Marka.

Start with a readable light version

Choose a simple email to work on: a header, a headline, a paragraph and one call to action. Finish the copy and layout before adjusting the alternate palette. That makes it easier to see whether a color change improves readability or only changes the mood.

Keep essential text editable in Figma. A headline inside a large image gives you fewer ways to adapt its appearance and becomes unavailable when images are blocked.

Plan the palette around each element's job

Set up a small palette beside the frame so you can review the choices together:

Try the palette on your real content. A short sample heading can hide problems that appear with a three-line campaign headline. Check contrast for the actual text and background combinations you intend to use.

Set dark-mode colors in Marka

Select an element in your Figma email, open Marka's Properties tab and use the Dark mode color field. Work through the main surfaces, text and call to action. The documented control supports frames, rectangles, components, instances and text. See Marka's dark-mode instructions.

You can keep a separate dark reference frame for design review, but the plugin settings define the export behavior. A second drawing alone does not configure your email's dark-mode colors.

Review the logo on both backgrounds

Place the logo against your light and dark surfaces while reviewing the design. Check the wordmark as well as the symbol: fine lettering may become hard to read before the larger shape does.

Try a contrasting outline or a deliberate background plate if the artwork disappears. A transparent image is useful only when its contents remain visible. Keep the sender name in text elsewhere in the email so the identity does not depend entirely on an image.

For a product screenshot, an intentional border or surrounding panel can help separate its edges from the email background. Review the whole composition rather than changing every asset to match the theme.

Compare the preview modes

Marka documents light, dark and Gmail-style dark previews. Use these to catch disappearing artwork and weak contrast. Custom dark colors apply where the receiving client supports the relevant styling; some clients adjust colors themselves. The preview is a design aid, not a record of tests in every inbox. Read how the preview modes differ.

Check the button label, footer links and any text over images in each view. Correct the Figma design or plugin color settings, then preview again.

Export and send a real test

Export with Marka and send through your email platform. Review the received message in the clients your audience uses, with both themes enabled where available. Record the app version and any visual problem before making another revision.

Use a short review list:

• The sender and main message remain recognizable.
• Body copy and footer links are readable.
• The primary action stands out.
• Logos and screenshots have clear edges.
• The mobile layout still has enough space around text and buttons.

Make the palette part of your email design system

Keep approved colors, logo treatment and button styles together in Figma so the next campaign starts with the same decisions. Recheck the exported result when you introduce new imagery or a different layout.

Design your next email with Marka, or follow the Figma email best-practices guide to build the rest of the template.