Add configurable colors and logo for the digest template

diff --git a/config/config.exs b/config/config.exs
index d2325edbc15e0f731610f1985cccc7b1714d6bcd..4941953e5ef82993d9788a6fbd357cf31e5d55a8 100644 (file)
--- a/config/config.exs
+++ b/config/config.exs
@@ -507,6 +507,17 @@ config :pleroma, :auth, oauth_consumer_strategies: oauth_consumer_strategies
 
 config :pleroma, Pleroma.Emails.Mailer, adapter: Swoosh.Adapters.Sendmail, enabled: false
 
 
 config :pleroma, Pleroma.Emails.Mailer, adapter: Swoosh.Adapters.Sendmail, enabled: false
 

+config :pleroma, Pleroma.Emails.UserEmail,
+  logo: nil,
+  styling: %{
+    link_color: "#d8a070",
+    background_color: "#2C3645",
+    content_background_color: "#1B2635",
+    header_color: "#d8a070",
+    text_color: "#b9b9ba",
+    text_muted_color: "#b9b9ba"
+  }
+

 config :prometheus, Pleroma.Web.Endpoint.MetricsExporter, path: "/api/pleroma/app_metrics"
 
 config :pleroma, Pleroma.ScheduledActivity,
 config :prometheus, Pleroma.Web.Endpoint.MetricsExporter, path: "/api/pleroma/app_metrics"
 
 config :pleroma, Pleroma.ScheduledActivity,

diff --git a/docs/config.md b/docs/config.md
index 703ef67ddbc0c90604835a495498a84840f310ad..8360e640ee06df57805d444c486d2710842862b2 100644 (file)
--- a/docs/config.md
+++ b/docs/config.md
@@ -548,6 +548,11 @@ Email notifications settings.
     - interval: Minimum interval between digest emails to one user
     - inactivity_threshold: Minimum user inactivity threshold
 
     - interval: Minimum interval between digest emails to one user
     - inactivity_threshold: Minimum user inactivity threshold
 

+## Pleroma.Emails.UserEmail
+
+- `:logo` - a path to a custom logo. Set it to `nil` to use the default Pleroma logo.
+- `:styling` - a map with color settings for email templates.
+

 ## OAuth consumer mode
 
 OAuth consumer mode allows sign in / sign up via external OAuth providers (e.g. Twitter, Facebook, Google, Microsoft, etc.).
 ## OAuth consumer mode
 
 OAuth consumer mode allows sign in / sign up via external OAuth providers (e.g. Twitter, Facebook, Google, Microsoft, etc.).

diff --git a/lib/pleroma/emails/user_email.ex b/lib/pleroma/emails/user_email.ex
index 3b5e64019c44caec577162382dd0f69d53250437..40b67ff5633e7bdbff7b98de2223ee867a937e0e 100644 (file)
--- a/lib/pleroma/emails/user_email.ex
+++ b/lib/pleroma/emails/user_email.ex
@@ -7,21 +7,21 @@ defmodule Pleroma.Emails.UserEmail do
 
   use Phoenix.Swoosh, view: Pleroma.Web.EmailView, layout: {Pleroma.Web.LayoutView, :email}
 
 
   use Phoenix.Swoosh, view: Pleroma.Web.EmailView, layout: {Pleroma.Web.LayoutView, :email}
 

+  alias Pleroma.Config
+  alias Pleroma.User

   alias Pleroma.Web.Endpoint
   alias Pleroma.Web.Router
 
   alias Pleroma.Web.Endpoint
   alias Pleroma.Web.Router
 

-  defp instance_config, do: Pleroma.Config.get(:instance)
-
-  defp instance_name, do: instance_config()[:name]
+  defp instance_name, do: Config.get([:instance, :name])

 
   defp sender do
 
   defp sender do

-    email = Keyword.get(instance_config(), :notify_email, instance_config()[:email])
+    email = Config.get([:instance, :notify_email]) || Config.get([:instance, :email])

     {instance_name(), email}
   end
 
   defp recipient(email, nil), do: email
   defp recipient(email, name), do: {name, email}
     {instance_name(), email}
   end
 
   defp recipient(email, nil), do: email
   defp recipient(email, name), do: {name, email}

-  defp recipient(%Pleroma.User{} = user), do: recipient(user.email, user.name)
+  defp recipient(%User{} = user), do: recipient(user.email, user.name)

 
   def password_reset_email(user, token) when is_binary(token) do
     password_reset_url = Router.Helpers.reset_password_url(Endpoint, :reset, token)
 
   def password_reset_email(user, token) when is_binary(token) do
     password_reset_url = Router.Helpers.reset_password_url(Endpoint, :reset, token)


@@ -93,50 +93,54 @@ defmodule Pleroma.Emails.UserEmail do
   Includes Mentions and New Followers data
   If there are no mentions (even when new followers exist), the function will return nil
   """
   Includes Mentions and New Followers data
   If there are no mentions (even when new followers exist), the function will return nil
   """

-  @spec digest_email(Pleroma.User.t()) :: Swoosh.Email.t() | nil
+  @spec digest_email(User.t()) :: Swoosh.Email.t() | nil

   def digest_email(user) do
   def digest_email(user) do

-    new_notifications =
-      Pleroma.Notification.for_user_since(user, user.last_digest_emailed_at)
-      |> Enum.reduce(%{followers: [], mentions: []}, fn
-        %{activity: %{data: %{"type" => "Create"}, actor: actor} = activity} = notification,
-        acc ->
-          new_mention = %{
-            data: notification,
-            object: Pleroma.Object.normalize(activity),
-            from: Pleroma.User.get_by_ap_id(actor)
-          }
-
-          %{acc | mentions: [new_mention | acc.mentions]}
-
-        %{activity: %{data: %{"type" => "Follow"}, actor: actor} = activity} = notification,
-        acc ->
-          new_follower = %{
-            data: notification,
-            object: Pleroma.Object.normalize(activity),
-            from: Pleroma.User.get_by_ap_id(actor)
-          }
-
-          %{acc | followers: [new_follower | acc.followers]}
-
-        _, acc ->
-          acc
+    notifications = Pleroma.Notification.for_user_since(user, user.last_digest_emailed_at)
+
+    mentions =
+      notifications
+      |> Enum.filter(&(&1.activity.data["type"] == "Create"))
+      |> Enum.map(fn notification ->
+        object = Pleroma.Object.normalize(notification.activity)
+        object = update_in(object.data["content"], &format_links/1)
+
+        %{
+          data: notification,
+          object: object,
+          from: User.get_by_ap_id(notification.activity.actor)
+        }
+      end)
+
+    followers =
+      notifications
+      |> Enum.filter(&(&1.activity.data["type"] == "Follow"))
+      |> Enum.map(fn notification ->
+        %{
+          data: notification,
+          object: Pleroma.Object.normalize(notification.activity),
+          from: User.get_by_ap_id(notification.activity.actor)
+        }

       end)
 
       end)
 

-    with [_ | _] = mentions <- new_notifications.mentions do
-      mentions =
-        Enum.map(mentions, fn mention ->
-          update_in(mention.object.data["content"], &format_links/1)
-        end)
+    unless Enum.empty?(mentions) do
+      styling = Config.get([__MODULE__, :styling])
+      logo = Config.get([__MODULE__, :logo])

 
       html_data = %{
         instance: instance_name(),
         user: user,
         mentions: mentions,
 
       html_data = %{
         instance: instance_name(),
         user: user,
         mentions: mentions,

-        followers: new_notifications.followers,
-        unsubscribe_link: unsubscribe_url(user, "digest")
+        followers: followers,
+        unsubscribe_link: unsubscribe_url(user, "digest"),
+        styling: styling

       }
 
       }
 

-      logo_path = Path.join(:code.priv_dir(:pleroma), "static/static/logo.png")
+      logo_path =
+        if is_nil(logo) do
+          Path.join(:code.priv_dir(:pleroma), "static/static/logo.png")
+        else
+          Path.join(Config.get([:instance, :static_dir]), logo)
+        end

 
       new()
       |> to(recipient(user))
 
       new()
       |> to(recipient(user))


@@ -145,17 +149,15 @@ defmodule Pleroma.Emails.UserEmail do
       |> put_layout(false)
       |> render_body("digest.html", html_data)
       |> attachment(Swoosh.Attachment.new(logo_path, filename: "logo.png", type: :inline))
       |> put_layout(false)
       |> render_body("digest.html", html_data)
       |> attachment(Swoosh.Attachment.new(logo_path, filename: "logo.png", type: :inline))

-    else
-      _ ->
-        nil

     end
   end
 
   defp format_links(str) do
     re = ~r/<a.+href=['"].*>/iU
     end
   end
 
   defp format_links(str) do
     re = ~r/<a.+href=['"].*>/iU

+    %{link_color: color} = Config.get([__MODULE__, :styling])

 
     Regex.replace(re, str, fn link ->
 
     Regex.replace(re, str, fn link ->

-      String.replace(link, "<a", "<a style=\"color: #d8a070;text-decoration: none;\"")
+      String.replace(link, "<a", "<a style=\"color: #{color};text-decoration: none;\"")

     end)
   end
 
     end)
   end
 


@@ -164,13 +166,13 @@ defmodule Pleroma.Emails.UserEmail do
   The link contains JWT token with the data, and subscription can be modified without
   authorization.
   """
   The link contains JWT token with the data, and subscription can be modified without
   authorization.
   """

-  @spec unsubscribe_url(Pleroma.User.t(), String.t()) :: String.t()
+  @spec unsubscribe_url(User.t(), String.t()) :: String.t()

   def unsubscribe_url(user, notifications_type) do
     token =
       %{"sub" => user.id, "act" => %{"unsubscribe" => notifications_type}, "exp" => false}
       |> Pleroma.JWT.generate_and_sign!()
       |> Base.encode64()
 
   def unsubscribe_url(user, notifications_type) do
     token =
       %{"sub" => user.id, "act" => %{"unsubscribe" => notifications_type}, "exp" => false}
       |> Pleroma.JWT.generate_and_sign!()
       |> Base.encode64()
 

-    Router.Helpers.subscription_url(Pleroma.Web.Endpoint, :unsubscribe, token)
+    Router.Helpers.subscription_url(Endpoint, :unsubscribe, token)

   end
 end
   end
 end

diff --git a/lib/pleroma/web/templates/email/digest.html.eex b/lib/pleroma/web/templates/email/digest.html.eex
index 61d57093b1d6fc9b4c0d4e80d4497fb8b9b3aec4..860df5f9c82d91c6eb90d08672afe9b250d49da7 100644 (file)
--- a/lib/pleroma/web/templates/email/digest.html.eex
+++ b/lib/pleroma/web/templates/email/digest.html.eex
@@ -21,7 +21,8 @@
                }
 
                a {
                }
 
                a {

-                       color: #d8a070;
+
+                       color: <%= @styling.link_color %>;

                        text-decoration: none;
                }
 
                        text-decoration: none;
                }
 


@@ -100,21 +101,21 @@
        </style>
 </head>
 
        </style>
 </head>
 

-<body class="clean-body" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #2C3645;">
+<body class="clean-body" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: <%= @styling.background_color %>;">

        <!--[if IE]><div class="ie-browser"><![endif]-->
        <!--[if IE]><div class="ie-browser"><![endif]-->

-       <table bgcolor="#2C3645" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
-               style="table-layout: fixed; vertical-align: top; min-width: 320px; Margin: 0 auto; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #2C3645; width: 100%;"
+       <table bgcolor="<%= @styling.background_color %>" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
+               style="table-layout: fixed; vertical-align: top; min-width: 320px; Margin: 0 auto; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: <%= @styling.background_color %>; width: 100%;"

                valign="top" width="100%">
                <tbody>
                        <tr style="vertical-align: top;" valign="top">
                                <td style="word-break: break-word; vertical-align: top;" valign="top">
                valign="top" width="100%">
                <tbody>
                        <tr style="vertical-align: top;" valign="top">
                                <td style="word-break: break-word; vertical-align: top;" valign="top">

-                                       <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color:#2C3645"><![endif]-->
+                                       <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color:<%= @styling.background_color %>"><![endif]-->

                                        <div style="background-color:transparent;">
                                                <div class="block-grid"
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"

-                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #1B2635;">
-                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:#1B2635;">
-                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:#1B2635"><![endif]-->
-                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:#1B2635;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->
+                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: <%= @styling.content_background_color%>;">
+                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:<%= @styling.content_background_color%>;">
+                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:<%= @styling.content_background_color%>"><![endif]-->
+                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:<%= @styling.content_background_color%>;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->

                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">
                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">


@@ -122,12 +123,12 @@
                                                                                <div
                                                                                        style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
                                                                                        <!--<![endif]-->
                                                                                <div
                                                                                        style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
                                                                                        <!--<![endif]-->

-                                                                                       <div align="center" class="img-container center fixedwidth"
+                                                                                       <div align="center" class="img-container center"

                                                                                                style="padding-right: 0px;padding-left: 0px;">
                                                                                                <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="padding-right: 0px;padding-left: 0px;" align="center"><![endif]--><img
                                                                                                style="padding-right: 0px;padding-left: 0px;">
                                                                                                <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="padding-right: 0px;padding-left: 0px;" align="center"><![endif]--><img

-                                                                                                       align="center" alt="Image" border="0" class="center fixedwidth" src="cid:logo.png"
-                                                                                                       style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 80px; display: block;"
-                                                                                                       title="Image" width="80" />
+                                                                                                       align="center" alt="Image" border="0" class="center" src="cid:logo.png"
+                                                                                                       style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: 80px; width: auto; max-height: 80px; display: block;"
+                                                                                                       title="Image" height="80" />

                                                                                                <!--[if mso]></td></tr></table><![endif]-->
                                                                                        </div>
                                                                                        <!--[if (!mso)&(!IE)]><!-->
                                                                                                <!--[if mso]></td></tr></table><![endif]-->
                                                                                        </div>
                                                                                        <!--[if (!mso)&(!IE)]><!-->


@@ -142,10 +143,10 @@
                                        </div>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"
                                        </div>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"

-                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #1B2635;">
-                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:#1B2635;">
-                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:#1B2635"><![endif]-->
-                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:#1B2635;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->
+                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: <%= @styling.content_background_color%>;">
+                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:<%= @styling.content_background_color%>;">
+                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:<%= @styling.content_background_color%>"><![endif]-->
+                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:<%= @styling.content_background_color%>;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->

                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">
                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">


@@ -155,11 +156,11 @@
                                                                                        <!--<![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div
                                                                                        <!--<![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div

-                                                                                               style="color:#b9b9ba;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+                                                                                               style="line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">

                                                                                                <div
                                                                                                <div

-                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #b9b9ba;">
-                                                                                                       <p style="font-size: 14px; line-height: 36px; text-align: center; margin: 0;"><span
-                                                                                                                       style="font-size: 30px; color: #d8a070;text-decoration: none;">Hey <%= @user.nickname %>, here is what you've missed!</span></p>
+                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height: 14px; color: <%= @styling.header_color %>;">
+                                                                                                       <p style="line-height: 36px; text-align: center; margin: 0;"><span
+                                                                                                                       style="font-size: 30px; color: <%= @styling.header_color %>;">Hey <%= @user.nickname %>, here is what you've missed!</span></p>

                                                                                                </div>
                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->
                                                                                                </div>
                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->


@@ -175,10 +176,10 @@
                                        </div>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"
                                        </div>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"

-                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #1B2635;">
-                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:#1B2635;">
-                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:#1B2635"><![endif]-->
-                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:#1B2635;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 15px; padding-left: 15px; padding-top:5px; padding-bottom:5px;"><![endif]-->
+                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: <%= @styling.content_background_color%>;">
+                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:<%= @styling.content_background_color%>;">
+                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:<%= @styling.content_background_color%>"><![endif]-->
+                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:<%= @styling.content_background_color%>;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 15px; padding-left: 15px; padding-top:5px; padding-bottom:5px;"><![endif]-->

                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">
                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">


@@ -196,7 +197,7 @@
                                                                                                                        valign="top">
                                                                                                                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content"
                                                                                                                                height="0" role="presentation"
                                                                                                                        valign="top">
                                                                                                                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content"
                                                                                                                                height="0" role="presentation"

-                                                                                                                               style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-top: 1px solid #B9B9BA; height: 0px;"
+                                                                                                                               style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-top: 1px solid <%= @styling.text_color %>; height: 0px;"

                                                                                                                                valign="top" width="100%">
                                                                                                                                <tbody>
                                                                                                                                        <tr style="vertical-align: top;" valign="top">
                                                                                                                                valign="top" width="100%">
                                                                                                                                <tbody>
                                                                                                                                        <tr style="vertical-align: top;" valign="top">


@@ -212,9 +213,9 @@
                                                                                        </table>
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div
                                                                                        </table>
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div

-                                                                                               style="color:#B9B9BA;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+                                                                                               style="color:<%= @styling.text_color %>;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">

                                                                                                <p
                                                                                                <p

-                                                                                                       style="font-size: 12px; line-height: 24px; text-align: center; color: #B9B9BA; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;">
+                                                                                                       style="font-size: 12px; line-height: 24px; text-align: center; color: <%= @styling.text_color %>; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;">

                                                                                                        <span style="font-size: 20px;">Mentions</span></p>
                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->
                                                                                                        <span style="font-size: 20px;">Mentions</span></p>
                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->


@@ -234,10 +235,10 @@
                                        <%# user card START %>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid mixed-two-up no-stack"
                                        <%# user card START %>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid mixed-two-up no-stack"

-                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #1B2635;">
-                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:#1B2635;">
-                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:#1B2635"><![endif]-->
-                                                               <!--[if (mso)|(IE)]><td align="center" width="147" style="background-color:#1B2635;width:76px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 20px; padding-top:5px; padding-bottom:5px;"><![endif]-->
+                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: <%= @styling.content_background_color%>;">
+                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:<%= @styling.content_background_color%>;">
+                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:<%= @styling.content_background_color%>"><![endif]-->
+                                                               <!--[if (mso)|(IE)]><td align="center" width="147" style="background-color:<%= @styling.content_background_color%>;width:76px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 20px; padding-top:5px; padding-bottom:5px;"><![endif]-->

                                                                <div class="col num3"
                                                                        style="display: table-cell; vertical-align: top; max-width: 320px; min-width: 76px; width: 76px;">
                                                                        <div style="width:100% !important;">
                                                                <div class="col num3"
                                                                        style="display: table-cell; vertical-align: top; max-width: 320px; min-width: 76px; width: 76px;">
                                                                        <div style="width:100% !important;">


@@ -245,10 +246,10 @@
                                                                                <div
                                                                                        style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 20px;">
                                                                                        <!--<![endif]-->
                                                                                <div
                                                                                        style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 20px;">
                                                                                        <!--<![endif]-->

-                                                                                       <div align="left" class="img-container left fixedwidth"
+                                                                                       <div align="left" class="img-container left "

                                                                                                style="padding-right: 0px;padding-left: 0px;">
                                                                                                <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="padding-right: 0px;padding-left: 0px;" align="left"><![endif]--><img
                                                                                                style="padding-right: 0px;padding-left: 0px;">
                                                                                                <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="padding-right: 0px;padding-left: 0px;" align="left"><![endif]--><img

-                                                                                                       alt="<%= from.name %>" border="0" class="left fixedwidth" src="<%= avatar_url(from) %>"
+                                                                                                       alt="<%= from.name %>" border="0" class="left " src="<%= avatar_url(from) %>"

                                                                                                        style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 76px; display: block;"
                                                                                                        title="<%= from.name %>" width="76" />
                                                                                                <!--[if mso]></td></tr></table><![endif]-->
                                                                                                        style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 76px; display: block;"
                                                                                                        title="<%= from.name %>" width="76" />
                                                                                                <!--[if mso]></td></tr></table><![endif]-->


@@ -260,7 +261,7 @@
                                                                </div>
 
                                                                <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
                                                                </div>
 
                                                                <!--[if (mso)|(IE)]></td></tr></table><![endif]-->

-                                                               <!--[if (mso)|(IE)]></td><td align="center" width="442" style="background-color:#1B2635;width:442px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->
+                                                               <!--[if (mso)|(IE)]></td><td align="center" width="442" style="background-color:<%= @styling.content_background_color%>;width:442px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->

                                                                <div class="col num9"
                                                                        style="display: table-cell; vertical-align: top; min-width: 320px; max-width: 441px; width: 442px;">
                                                                        <div style="width:100% !important;">
                                                                <div class="col num9"
                                                                        style="display: table-cell; vertical-align: top; min-width: 320px; max-width: 441px; width: 442px;">
                                                                        <div style="width:100% !important;">


@@ -270,13 +271,13 @@
                                                                                        <!--<![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div
                                                                                        <!--<![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div

-                                                                                               style="color:#B9B9BA;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+                                                                                               style="color:<%= @styling.text_color %>;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">

                                                                                                <div
                                                                                                <div

-                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #B9B9BA;">
+                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: <%= @styling.text_color %>;">

                                                                                                        <p style="font-size: 14px; line-height: 19px; margin: 0;"><span
                                                                                                        <p style="font-size: 14px; line-height: 19px; margin: 0;"><span

-                                                                                                                       style="font-size: 16px; color: #999999;"><%= from.name %></span></p>
+                                                                                                                       style="font-size: 16px; color: <%= @styling.text_color %>;"><%= from.name %></span></p>

                                                                                                        <p style="font-size: 14px; line-height: 19px; margin: 0;"><span
                                                                                                        <p style="font-size: 14px; line-height: 19px; margin: 0;"><span

-                                                                                                                       style="font-size: 16px;"><%= link "@" <> from.nickname, style: "color: #d8a070;text-decoration: none;", to: mention.activity.actor %></span></p>
+                                                                                                                       style="font-size: 16px;"><%= link "@" <> from.nickname, style: "color: #{@styling.link_color};text-decoration: none;", to: mention.activity.actor %></span></p>

                                                                                                </div>
                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->
                                                                                                </div>
                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->


@@ -294,10 +295,10 @@
 
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"
 
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"

-                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #1B2635;">
-                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:#1B2635;">
-                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:#1B2635"><![endif]-->
-                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:#1B2635;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 15px; padding-left: 15px; padding-top:5px; padding-bottom:5px;"><![endif]-->
+                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: <%= @styling.content_background_color%>;">
+                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:<%= @styling.content_background_color%>;">
+                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:<%= @styling.content_background_color%>"><![endif]-->
+                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:<%= @styling.content_background_color%>;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 15px; padding-left: 15px; padding-top:5px; padding-bottom:5px;"><![endif]-->

                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">
                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">


@@ -307,17 +308,17 @@
                                                                                        <!--<![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div
                                                                                        <!--<![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div

-                                                                                               style="color:#B9B9BA;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+                                                                                               style="color:<%= @styling.text_color %>;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">

                                                                                                <div
                                                                                                <div

-                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #B9B9BA;">
+                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: <%= @styling.text_color %>;">

                                                                                                        <span style="font-size: 16px; line-height: 19px;"><%= raw object.data["content"] %></span></div>
                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 15px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div
                                                                                                        <span style="font-size: 16px; line-height: 19px;"><%= raw object.data["content"] %></span></div>
                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 15px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div

-                                                                                               style="color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:15px;">
+                                                                                               style="color:<%= @styling.text_muted_color %>;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:15px;">

                                                                                                <div
                                                                                                <div

-                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #555555;">
+                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: <%= @styling.text_muted_color %>;">

                                                                                                        <p style="font-size: 14px; line-height: 16px; margin: 0;"><%= format_date object.data["published"] %></p>
                                                                                                </div>
                                                                                        </div>
                                                                                                        <p style="font-size: 14px; line-height: 16px; margin: 0;"><%= format_date object.data["published"] %></p>
                                                                                                </div>
                                                                                        </div>


@@ -340,10 +341,10 @@
           <%# new followers header START %>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"
           <%# new followers header START %>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"

-                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #1B2635;">
-                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:#1B2635;">
-                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:#1B2635"><![endif]-->
-                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:#1B2635;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 15px; padding-left: 15px; padding-top:5px; padding-bottom:5px;"><![endif]-->
+                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: <%= @styling.content_background_color%>;">
+                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:<%= @styling.content_background_color%>;">
+                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:<%= @styling.content_background_color%>"><![endif]-->
+                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:<%= @styling.content_background_color%>;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 15px; padding-left: 15px; padding-top:5px; padding-bottom:5px;"><![endif]-->

                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">
                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">


@@ -361,7 +362,7 @@
                                                                                                                        valign="top">
                                                                                                                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content"
                                                                                                                                height="0" role="presentation"
                                                                                                                        valign="top">
                                                                                                                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content"
                                                                                                                                height="0" role="presentation"

-                                                                                                                               style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-top: 1px solid #B9B9BA; height: 0px;"
+                                                                                                                               style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-top: 1px solid <%= @styling.text_color %>; height: 0px;"

                                                                                                                                valign="top" width="100%">
                                                                                                                                <tbody>
                                                                                                                                        <tr style="vertical-align: top;" valign="top">
                                                                                                                                valign="top" width="100%">
                                                                                                                                <tbody>
                                                                                                                                        <tr style="vertical-align: top;" valign="top">


@@ -377,9 +378,9 @@
                                                                                        </table>
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div
                                                                                        </table>
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div

-                                                                                               style="color:#B9B9BA;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+                                                                                               style="color:<%= @styling.text_color %>;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">

                                                                                                <div
                                                                                                <div

-                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #B9B9BA;">
+                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: <%= @styling.text_color %>;">

                                                                                                        <p style="font-size: 12px; line-height: 24px; text-align: center; margin: 0;"><span
                                                                                                                        style="font-size: 20px;"><%= length(@followers) %> New Followers</span><span
                                                                                                                        style="font-size: 20px; line-height: 24px;"></span></p>
                                                                                                        <p style="font-size: 12px; line-height: 24px; text-align: center; margin: 0;"><span
                                                                                                                        style="font-size: 20px;"><%= length(@followers) %> New Followers</span><span
                                                                                                                        style="font-size: 20px; line-height: 24px;"></span></p>


@@ -402,10 +403,10 @@
                                        <%# user card START %>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid mixed-two-up no-stack"
                                        <%# user card START %>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid mixed-two-up no-stack"

-                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #1B2635;">
-                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:#1B2635;">
-                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:#1B2635"><![endif]-->
-                                                               <!--[if (mso)|(IE)]><td align="center" width="147" style="background-color:#1B2635;width:76px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 20px; padding-top:5px; padding-bottom:5px;"><![endif]-->
+                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: <%= @styling.content_background_color%>;">
+                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:<%= @styling.content_background_color%>;">
+                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:<%= @styling.content_background_color%>"><![endif]-->
+                                                               <!--[if (mso)|(IE)]><td align="center" width="147" style="background-color:<%= @styling.content_background_color%>;width:76px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 20px; padding-top:5px; padding-bottom:5px;"><![endif]-->

                                                                <div class="col num3"
                                                                        style="display: table-cell; vertical-align: top; max-width: 320px; min-width: 76px; width: 76px;">
                                                                        <div style="width:100% !important;">
                                                                <div class="col num3"
                                                                        style="display: table-cell; vertical-align: top; max-width: 320px; min-width: 76px; width: 76px;">
                                                                        <div style="width:100% !important;">


@@ -413,10 +414,10 @@
                                                                                <div
                                                                                        style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 20px;">
                                                                                        <!--<![endif]-->
                                                                                <div
                                                                                        style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 20px;">
                                                                                        <!--<![endif]-->

-                                                                                       <div align="left" class="img-container left fixedwidth"
+                                                                                       <div align="left" class="img-container left "

                                                                                                style="padding-right: 0px;padding-left: 0px;">
                                                                                                <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="padding-right: 0px;padding-left: 0px;" align="left"><![endif]--><img
                                                                                                style="padding-right: 0px;padding-left: 0px;">
                                                                                                <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="padding-right: 0px;padding-left: 0px;" align="left"><![endif]--><img

-                                                                                                       alt="<%= from.name %>" border="0" class="left fixedwidth" src="<%= avatar_url(from) %>"
+                                                                                                       alt="<%= from.name %>" border="0" class="left " src="<%= avatar_url(from) %>"

                                                                                                        style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 76px; display: block;"
                                                                                                        title="<%= from.name %>" width="76" />
                                                                                                <!--[if mso]></td></tr></table><![endif]-->
                                                                                                        style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 76px; display: block;"
                                                                                                        title="<%= from.name %>" width="76" />
                                                                                                <!--[if mso]></td></tr></table><![endif]-->


@@ -428,7 +429,7 @@
                                                                </div>
 
                                                                <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
                                                                </div>
 
                                                                <!--[if (mso)|(IE)]></td></tr></table><![endif]-->

-                                                               <!--[if (mso)|(IE)]></td><td align="center" width="442" style="background-color:#1B2635;width:442px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->
+                                                               <!--[if (mso)|(IE)]></td><td align="center" width="442" style="background-color:<%= @styling.content_background_color%>;width:442px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->

                                                                <div class="col num9"
                                                                        style="display: table-cell; vertical-align: top; min-width: 320px; max-width: 441px; width: 442px;">
                                                                        <div style="width:100% !important;">
                                                                <div class="col num9"
                                                                        style="display: table-cell; vertical-align: top; min-width: 320px; max-width: 441px; width: 442px;">
                                                                        <div style="width:100% !important;">


@@ -438,13 +439,13 @@
                                                                                        <!--<![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div
                                                                                        <!--<![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div

-                                                                                               style="color:#B9B9BA;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+                                                                                               style="color:<%= @styling.text_color %>;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">

                                                                                                <div
                                                                                                <div

-                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #B9B9BA;">
+                                                                                                       style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 14px; color: <%= @styling.text_color %>;">

                                                                                                        <p style="font-size: 14px; line-height: 19px; margin: 0;"><span
                                                                                                        <p style="font-size: 14px; line-height: 19px; margin: 0;"><span

-                                                                                                                       style="font-size: 16px; color: #999999;"><%= from.name %></span></p>
+                                                                                                                       style="font-size: 16px; color: <%= @styling.text_color %>;"><%= from.name %></span></p>

                                                                                                        <p style="font-size: 14px; line-height: 19px; margin: 0;"><span
                                                                                                        <p style="font-size: 14px; line-height: 19px; margin: 0;"><span

-                                                                                                                       style="font-size: 16px;"><%= link "@" <> from.nickname, style: "color: #d8a070;text-decoration: none;", to: follow.activity.actor %></span></p>
+                                                                                                                       style="font-size: 16px;"><%= link "@" <> from.nickname, style: "color: #{@styling.link_color};text-decoration: none;", to: follow.activity.actor %></span></p>

                                                                                                </div>
                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->
                                                                                                </div>
                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->


@@ -467,10 +468,10 @@
           <%# divider start %>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"
           <%# divider start %>
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"

-                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #1B2635;">
-                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:#1B2635;">
-                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:#1B2635"><![endif]-->
-                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:#1B2635;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->
+                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: <%= @styling.content_background_color%>;">
+                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:<%= @styling.content_background_color%>;">
+                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:<%= @styling.content_background_color%>"><![endif]-->
+                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:<%= @styling.content_background_color%>;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->

                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">
                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">


@@ -488,7 +489,7 @@
                                                                                                                        valign="top">
                                                                                                                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content"
                                                                                                                                height="0" role="presentation"
                                                                                                                        valign="top">
                                                                                                                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content"
                                                                                                                                height="0" role="presentation"

-                                                                                                                               style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-top: 1px solid #B9B9BA; height: 0px;"
+                                                                                                                               style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-top: 1px solid <%= @styling.text_color %>; height: 0px;"

                                                                                                                                valign="top" width="100%">
                                                                                                                                <tbody>
                                                                                                                                        <tr style="vertical-align: top;" valign="top">
                                                                                                                                valign="top" width="100%">
                                                                                                                                <tbody>
                                                                                                                                        <tr style="vertical-align: top;" valign="top">


@@ -518,10 +519,10 @@
 
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"
 
                                        <div style="background-color:transparent;">
                                                <div class="block-grid"

-                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #1B2635;">
-                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:#1B2635;">
-                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:#1B2635"><![endif]-->
-                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:#1B2635;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->
+                                                       style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: <%= @styling.content_background_color%>;">
+                                                       <div style="border-collapse: collapse;display: table;width: 100%;background-color:<%= @styling.content_background_color%>;">
+                                                               <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:<%= @styling.content_background_color%>"><![endif]-->
+                                                               <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:<%= @styling.content_background_color%>;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->

                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">
                                                                <div class="col num12"
                                                                        style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
                                                                        <div style="width:100% !important;">


@@ -531,19 +532,19 @@
                                                                                        <!--<![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div
                                                                                        <!--<![endif]-->
                                                                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
                                                                                        <div

-                                                                                               style="color:#BBBBBB;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
+                                                                                               style="color:<%= @styling.text_color %>;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">

                                                                                                <p
                                                                                                <p

-                                                                                                       style="font-size: 12px; line-height: 16px; text-align: center; color: #BBBBBB; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;">
+                                                                                                       style="font-size: 12px; line-height: 16px; text-align: center; color: <%= @styling.text_color %>; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;">

                                                                                                        <span style="font-size: 14px;">You have received this email because you have signed up to receive digest emails from <b><%= @instance %></b> Pleroma instance.</span></p>
                                                                                                <p
                                                                                                        <span style="font-size: 14px;">You have received this email because you have signed up to receive digest emails from <b><%= @instance %></b> Pleroma instance.</span></p>
                                                                                                <p

-                                                                                                       style="font-size: 12px; line-height: 14px; text-align: center; color: #BBBBBB; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;">
+                                                                                                       style="font-size: 12px; line-height: 14px; text-align: center; color: <%= @styling.text_color %>; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;">

                                                                                                         </p>
                                                                                                <p
                                                                                                         </p>
                                                                                                <p

-                                                                                                       style="font-size: 12px; line-height: 16px; text-align: center; color: #BBBBBB; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;">
-                                                                                                       <span style="font-size: 14px;">The email address you are subscribed as is <a href="mailto:<%= @user.email %>" style="color: #d8a070;text-decoration: none;"><%= @user.email %></a>. </span></p>
+                                                                                                       style="font-size: 12px; line-height: 16px; text-align: center; color: <%= @styling.text_color %>; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;">
+                                                                                                       <span style="font-size: 14px;">The email address you are subscribed as is <a href="mailto:<%= @user.email %>" style="color: <%= @styling.link_color %>;text-decoration: none;"><%= @user.email %></a>. </span></p>

                                                                                                <p
                                                                                                <p

-                                                                                                       style="font-size: 12px; line-height: 16px; text-align: center; color: #BBBBBB; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;">
-                                                                                                       <span style="font-size: 14px;">To unsubscribe, please go <%= link "here", style: "color: #d8a070;text-decoration: none;", to: @unsubscribe_link %>.</span></p>
+                                                                                                       style="font-size: 12px; line-height: 16px; text-align: center; color: <%= @styling.text_color %>; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0;">
+                                                                                                       <span style="font-size: 14px;">To unsubscribe, please go <%= link "here", style: "color: #{@styling.link_color};text-decoration: none;", to: @unsubscribe_link %>.</span></p>

                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->
                                                                                        <!--[if (!mso)&(!IE)]><!-->
                                                                                        </div>
                                                                                        <!--[if mso]></td></tr></table><![endif]-->
                                                                                        <!--[if (!mso)&(!IE)]><!-->