What’s the best way to design a signature for both light and dark mode compatibility in Gmail?

Amy Lockwood
Amy Lockwood
Co-Founder & Head of App and Web Design (15+ Years Experience)
Updated On: Feb 11, 2025
Gmail

Designing a Gmail signature that looks great in both light and dark mode is essential, as many users now toggle between these modes. Here are the best practices to create a signature that remains professional and visually appealing in both environments:

What’s the best way to design a signature for both light and dark mode compatibility in Gmail?

‍Key Considerations for Dark and Light Mode Compatibility

  1. Color Contrast:
    • Use colors that maintain good contrast in both modes.
    • Avoid pure black or pure white text/icons; instead, use off-white (#F2F2F2) or dark gray (#333333) to reduce harsh transitions.
  2. Transparent Images:
    • Use transparent PNGs for logos and icons to prevent unwanted background boxes in dark mode.
    • Ensure the image has a neutral or adaptable color palette.
  3. Avoid Hard-Coded Background Colors:
    • Do not set a fixed background color for the signature table or text; this ensures it adapts to the email client's mode.
  4. Minimal Use of White or Light Colors:
    • White text may disappear against light backgrounds in light mode and vice versa.

Designing a Dark Mode Compatible Gmail Signature

1. Structure the Signature

  • Use an HTML table for layout consistency across devices and email clients.
  • Ensure the table doesn’t include fixed background colors or borders that may clash with dark mode.

2. Font and Text Colors

  • Use dark gray for text instead of black and light gray for light text.
  • Example CSS:
  • <p style="color: #333333;">John Doe</p>
  • This ensures the text looks good in both modes.

Did you know 57% of consumers feel negatively towards an organization when they receive emails without professionally branded signatures? Get ahead of your competition.

FLYBY Signature
AUTHOR Signature
RAISE Signature
See Templates
No items found.

3. Image Design

  • Use transparent PNG or SVG files for logos and icons.
  • Add a slight border or shadow to icons to make them stand out regardless of the background.
  • Ensure icons or logos have enough internal contrast.

4. Test Button/Link Styling

  • Use underlines for links, as colored text links might lose visibility in dark mode.
  • Example:
  • <a href="https://example.com" style="color: #1A73E8; text-decoration: underline;">Visit My Website</a>

Sample Signature HTML

Here's a sample HTML email signature that works well in both light and dark mode.

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif;">

 <tr>

   <td>

     <p style="font-size: 14px; color: #333333; margin: 0;">Best regards,</p>

     <p style="font-size: 16px; font-weight: bold; color: #333333; margin: 0;">John Doe</p>

     <p style="font-size: 14px; color: #555555; margin: 0;">Software Engineer | Acme Corp</p>

     <p style="font-size: 14px; color: #555555; margin: 0;">

       📧 <a href="mailto:john.doe@example.com" style="color: #1A73E8; text-decoration: none;">john.doe@example.com</a> |

       📞 <a href="tel:+1234567890" style="color: #1A73E8; text-decoration: none;">+123 456 7890</a>

     </p>

     <p style="font-size: 14px; margin: 0;">

       <a href="https://www.linkedin.com/in/johndoe" style="color: #1A73E8; text-decoration: none;">

         <img src="https://example.com/linkedin-logo.png" alt="LinkedIn" style="width: 20px; height: 20px; vertical-align: middle;"> LinkedIn

       </a>

     </p>

   </td>

 </tr>

</table>

‍

‍Testing Your Signature

  1. Use Dark and Light Mode Email Clients:
    • Test in Gmail (desktop and mobile) and other email clients to verify the signature's appearance.
  2. Simulate Different Modes:
    • Toggle between dark and light mode in your email client to check the contrast and layout.
  3. Preview Across Devices:
    • Send test emails to yourself and view them on desktops, tablets, and phones.

By following these steps, your signature will look professional and consistent in both light and dark modes!

No items found.
Email Signature Template 1
Email Signature Template 2
100+ Professional Templates

Stand Out with Beautiful Email Signatures

Create professional email signatures that make a lasting impression. Easy to customize, easy to install in Gmail, Outlook, Apple Mail + 60 more email clients, apps and CRM.

Find Your Email Signature

Amy Lockwood is the Co-Founder of Email Signature Rescue with over a decade of experience in HTML email signatures for 60+ email clients, apps and CRM software including Outlook, Gmail, Apple Mail. She is the Head Designer of the Email Signature Rescue apps and website.

📩 Need help with your HTML email signatures? Contact Amy at emailsignaturerescue.com.

Ready to transform your email signatures?

FLYBY Signature
AUTHOR Signature
RAISE Signature
See Templates
OUR AWESOME CLIENTS

We work with
the best clients

Join our community of satisfied clients who trust us to create, host, manage and deploy their HTML email signatures.

4.8
Trustpilot Rating
200k+
Users Rescued
30M+
Hours Saved
10+
Years in the Business
1.1M+
Images Hosted