From a27676a903daef1ddc0ce8dd1137e2b0538d4fef Mon Sep 17 00:00:00 2001 From: Mariusz Klochowicz Date: Fri, 17 Oct 2025 06:05:36 +1030 Subject: [PATCH] fix(portal): support dark mode in outbound emails (#10493) Ensure that users with dark mode enabled system-wide get nice experience whilst reading the emails. Add a `mix test_emails` task to send all the emails and quickly inspect them locally. Before: image After (viewed via `mix test_emails`): image --------- Signed-off-by: Mariusz Klochowicz Co-authored-by: Brian Manifold --- .../mailer/auth_email/new_user.html.eex | 24 +- .../mailer/auth_email/sign_in_link.html.eex | 25 +- .../mailer/auth_email/sign_up_link.html.eex | 25 +- .../notifications/outdated_gateway.html.eex | 20 +- .../mailer/sync_email/sync_error.html.eex | 22 +- .../apps/domain/lib/mix/tasks/email/render.ex | 398 ++++++++++++++++++ .../domain/priv/static/emails/dark_mode.css | 59 +++ elixir/mix.exs | 3 +- 8 files changed, 535 insertions(+), 41 deletions(-) create mode 100644 elixir/apps/domain/lib/mix/tasks/email/render.ex create mode 100644 elixir/apps/domain/priv/static/emails/dark_mode.css diff --git a/elixir/apps/domain/lib/domain/mailer/auth_email/new_user.html.eex b/elixir/apps/domain/lib/domain/mailer/auth_email/new_user.html.eex index a75b88601..341c38fc0 100644 --- a/elixir/apps/domain/lib/domain/mailer/auth_email/new_user.html.eex +++ b/elixir/apps/domain/lib/domain/mailer/auth_email/new_user.html.eex @@ -41,12 +41,13 @@ line-height: 32px !important } } + <%= File.read!(Application.app_dir(:domain, "priv/static/emails/dark_mode.css")) %>
@@ -59,18 +60,26 @@
Firezone logo +
-

‍
+

Blazing-fast alternative to legacy VPNs

@@ -144,7 +154,7 @@ Docs @@ -152,15 +162,15 @@ - Github + GitHub • X diff --git a/elixir/apps/domain/lib/domain/mailer/auth_email/sign_in_link.html.eex b/elixir/apps/domain/lib/domain/mailer/auth_email/sign_in_link.html.eex index 99f3d2f51..9bb109972 100644 --- a/elixir/apps/domain/lib/domain/mailer/auth_email/sign_in_link.html.eex +++ b/elixir/apps/domain/lib/domain/mailer/auth_email/sign_in_link.html.eex @@ -49,12 +49,13 @@ line-height: 32px !important } } + <%= File.read!(Application.app_dir(:domain, "priv/static/emails/dark_mode.css")) %>
@@ -67,18 +68,26 @@
Firezone logo +
-

‍
+

Blazing-fast alternative to legacy VPNs

@@ -208,7 +219,7 @@ Docs @@ -216,15 +227,15 @@ - Github + GitHub • X diff --git a/elixir/apps/domain/lib/domain/mailer/auth_email/sign_up_link.html.eex b/elixir/apps/domain/lib/domain/mailer/auth_email/sign_up_link.html.eex index 18d8bdb86..fc3cda7c7 100644 --- a/elixir/apps/domain/lib/domain/mailer/auth_email/sign_up_link.html.eex +++ b/elixir/apps/domain/lib/domain/mailer/auth_email/sign_up_link.html.eex @@ -49,12 +49,13 @@ line-height: 32px !important } } + <%= File.read!(Application.app_dir(:domain, "priv/static/emails/dark_mode.css")) %>
@@ -67,18 +68,26 @@
Firezone logo +
-

‍
+

Blazing-fast alternative to legacy VPNs

@@ -184,7 +195,7 @@ Docs @@ -192,15 +203,15 @@ - Github + GitHub • X diff --git a/elixir/apps/domain/lib/domain/mailer/notifications/outdated_gateway.html.eex b/elixir/apps/domain/lib/domain/mailer/notifications/outdated_gateway.html.eex index e1eb4874f..9cc4b8410 100644 --- a/elixir/apps/domain/lib/domain/mailer/notifications/outdated_gateway.html.eex +++ b/elixir/apps/domain/lib/domain/mailer/notifications/outdated_gateway.html.eex @@ -44,6 +44,7 @@ .rtl-text-right:where([dir="rtl"], [dir="rtl"] *) { text-align: right !important } + <%= File.read!(Application.app_dir(:domain, "priv/static/emails/dark_mode.css")) %> @@ -51,20 +52,21 @@ Firezone Gateway Upgrade Available
-
+