Skip to content

MNTOR-5282 - Add email dark mode per guide#6663

Merged
codemist merged 1 commit into
mainfrom
mntor-5282-2
May 20, 2026
Merged

MNTOR-5282 - Add email dark mode per guide#6663
codemist merged 1 commit into
mainfrom
mntor-5282-2

Conversation

@codemist
Copy link
Copy Markdown
Collaborator

References:

Jira: MNTOR-5282
Figma:

Description

QA identified that the new work-arounds introduced more negative changes. I reviewed a few pieces of documentation
https://www.emailonacid.com/blog/article/email-development/advanced-mjml-coding/
https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers
to guide me on adding dark mode support, e.g. swap to white-text variants, and the hero/card/footer/body backgrounds darken so the swapped logos and body text remain readable instead of sitting on light-colored "fields."

How to test

We can't really test this until it's on stage.

Checklist (Definition of Done)

  • Localization strings (if needed) have been added.
  • Commits in this PR are minimal and have descriptive commit messages.
  • I've added or updated the relevant sections in readme and/or code comments
  • I've added a unit test to test for potential regressions of this bug.
  • If this PR implements a feature flag or experimentation, I've checked that it still works with the flag both on, and with the flag off.
  • If this PR implements a feature flag or experimentation, the Ship Behind Feature Flag status in Jira has been set
  • Product Owner accepted the User Story (demo of functionality completed) or waived the privilege.
  • All acceptance criteria are met.
  • Jira ticket has been updated (if needed) to match changes made during the development process.
  • Jira ticket has been updated (if needed) with suggestions for QA when this PR is deployed to stage.

// which surfaces participate (`dm-body`, `dm-section-hero`, `dm-section-card`,
// `dm-section-footer`, `dm-img-light` / `dm-img-dark`).
export const HeaderStyles = () => {
const bodyBg = "#1c1b22";
Copy link
Copy Markdown
Collaborator Author

@codemist codemist May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hero section was still #F5EAFF (light purple), the footer wrapper was #F9F9FA (light gray), the body was white. So when the swap fired, the new white-text dark logo was sitting on a light-colored section, readable on Storybook (where you see the whole email), but on a real client it looks like a white logo on a bright box. That's the "purple field under the Monitor logo" QA reported.

Copy link
Copy Markdown
Collaborator

@joeherm joeherm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good and appreciate the technique references listed. Not 100% sure on the testing side (can leave that to QA since it's client dependent), but code looks good.

@codemist codemist added this pull request to the merge queue May 20, 2026
Merged via the queue into main with commit b0a119b May 20, 2026
19 checks passed
@codemist codemist deleted the mntor-5282-2 branch May 20, 2026 18:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants