Feature Description

Email clients automatically adjust emails to work with dark mode. In testing these versions of email reporting look good. However we should review and address a number of small issus by specifying specific dark mode styles:

• Dark mode logo variant.

All templates should be addressed so this ticket is blocked by all email template tickets.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Each email template should be legible in dark mode based on Figma updates
• Email templates do not need to be pixel-perfect but should be readable and not visually broken in any client.

Implementation Brief

• Replace the assets/images/email-development/1.168.0/email-report/site-kit-logo.png image in place with the mid-grey version updated inline in Figma exported at 2X.

Note: the context for this is that certain clients (importantly, Gmail for Android and others) do not support an explicit dark mode but instead force their own inversion of the light mode email. This is acceptable for text and background colours. Images are not inverted, which is acceptable for icons/graphics, but our logo with dark text is not inverted; therefore, the text appears dark grey on black in these cases. To avoid this, we have to create a logo graphic that will work in both dark and light modes by using a mid-grey.

Note: the asset can be replaced in place because the assets have not yet been published to Google Cloud.

• Review this PoC PR and apply the dark mode color and background adjustments from this Figma mock to all templates within the project. It is acceptable to use (non-inline) CSS for this as this will apply for clients that support it and be ignored by those that don't.

Test Coverage

• No additional test coverage required.

QA Brief

• Review all four email templates in Email on Acid, templates don't exactly match designs, however, flag anything that is completely broken or unreadible on any client dark or light mode. Notes:
  • A new grey Site Kit logo has been added that is readible on all variants.

Changelog entry

• Add dark mode support to email templates.