Skip to content

Add dark mode rendering accuracy tests across clients #8

@Ouranos27

Description

@Ouranos27

Context

The engine's `simulateDarkMode()` function simulates how each email client applies dark mode. But dark mode behavior varies wildly between clients and changes frequently:

  • Gmail: Forces dark backgrounds, inverts light text colors
  • Outlook: Partial dark mode with `[data-ogsc]` overrides
  • Apple Mail: Respects `prefers-color-scheme` media queries
  • Yahoo: Aggressive recoloring of backgrounds and text

What needs to happen

  1. Document current dark mode behavior per client (some of this exists in `src/data/`, but it's incomplete)
  2. Create visual test cases — a set of HTML emails that exercise dark mode edge cases:
    • Transparent logo on light background (disappears in dark mode)
    • Hardcoded dark text on forced-dark background
    • `prefers-color-scheme` media query support
    • `[data-ogsb]` / `[data-ogsc]` Outlook-specific overrides
  3. Validate the engine's simulation output against real client screenshots

How to contribute

If you have access to multiple email clients and can take screenshots, this is a high-impact contribution. Even documenting one client's dark mode behavior helps.

bun install
bun test -- --grep "dark"   # Run existing dark mode tests

Dark mode logic lives in `src/transforms/dark-mode/`.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions