Amy Lockwood
Amy Lockwood Updated On: Dec 01, 2024
Gmail

What’s the best way to design a signature for both light and dark mode compatibility in 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.
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

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 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 example design

100's professionally designed and tested templates

See All Templates

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