Thank you so much for your help Celia!
we tried it and it works way better. the only app it didn't work was gmail app. do you know how can we fix that?
regards
Hi @fern1
I share with you some tips to try to solve the Gmail part.
-Design a Universal Logo: Design a logo that works well in both light and dark modes by using a middle-ground colour palette or an outline that stands out against both backgrounds. This eliminates the need for conditional loading altogether.
-Image Inversion: If your brand guidelines allow you to, create a logo with a background that can be inverted to suit both themes. This approach is less ideal but can be a workaround for emails where dark mode support is critical.
-Transparent Logos: Use a transparent PNG for your logo and set the background colour using inline CSS or HTML attributes. This approach can work well if the logo itself does not rely heavily on colour but instead uses transparency to blend with the background.
-CSS Fallbacks: In cases where the background colour cannot be controlled by CSS, consider using a background colour within the PNG itself that matches your default email background.
-Vector Markup Language (VML): VML can be used to insert images with specific conditions that ensure compatibility with email clients like Outlook and Gmail. Although VML is typically associated with Outlook, it can be used creatively for Gmail as well by embedding image tags in a way that is more reliable across email clients.
Example of an implementation:
<!-- Fallback background colour for clients that don't support prefers-color-scheme -->
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px;height:100px;">
<v:fill type="frame" src="light-logo.png" color="#FFFFFF" />
<v:textbox inset="0,0,0,0">
<img src="light-logo.png" width="200" height="100" alt="Logo" />
</v:textbox>
</v:rect>
Gmail-Specific Workaround:
- Avoid Media Queries for Critical Content: Since Gmail doesn’t fully support media queries, avoid relying on them for critical content. Instead, use a more static approach where the logo is either universally suitable or can be swapped using inline styles.
- Fallback Image: Ensure the default (light mode) logo is prominent and displays well in dark mode by perhaps adding a subtle outline or shadow. This makes the logo visible irrespective of the background.
Test:
Use Litmus or Email on Acid to test and preview your emails.
Implementation Example:
Given the limitations, here’s a simplified approach using a fallback mechanism:
<!-- Default to light logo, show dark logo only in supported clients -->
<img src="light-logo.png" alt="Light Mode Logo" style="display:block;" />
<img src="dark-logo.png" alt="Dark Mode Logo" style="display:none;" class="dark-logo" />
<style>
@media (prefers-color-scheme: dark) {
.dark-logo { display: block !important; }
.light-logo { display: none !important; }
}
</style>
Try these, hope it solves the problem.
Regards,
Celia
