FEATURE: new settings to customize some colors in emails

app/views/user_notifications/digest.html.erb

@@ -47,7 +47,7 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
 <table class="body" style="width:100%;background:#f3f3f3;padding:0;border-spacing:0;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;vertical-align:top;">
   <tr>
     <td class="side-spacer" style="width:5%;vertical-align:top;padding:0;">
-      <div style="background-color:#2F70AC;">
+      <div class="with-accent-colors">
         <table class="spacer" style="border-spacing:0;padding:0;width:100%">
           <tbody>
             <tr>
@@ -58,13 +58,13 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
       </div>
     </td>
     <td style="vertical-align:top;padding:0;font-family:Helvetica,Arial,sans-serif;">
-      <table align="center" style="border-spacing:0;background:#fefefe;background-color:#2F70AC;margin:0;padding:0;text-align:inherit;vertical-align:top;width:100%">
+      <table align="center" class="with-accent-colors" style="border-spacing:0;margin:0;padding:0;text-align:inherit;vertical-align:top;width:100%">
         <tbody>
           <tr>
             <td style="border-collapse:collapse!important;color:#0a0a0a;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:normal">
 
 <br/>
-<center style="color:#fff;font-size:22px;font-weight:400;"><%=t 'user_notifications.digest.since_last_visit' %></center>
+<center class="with-accent-colors" style="font-size:22px;font-weight:400;"><%=t 'user_notifications.digest.since_last_visit' %></center>
 
 
 
@@ -72,22 +72,22 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
 <tbody>
   <tr>
     <%- @counts.each do |count| -%>
-      <td style="text-align:center;color:#fff;font-size:36px;font-weight:400;">
-        <a style="color:#fff;" href="<%= count[:href] -%>"><strong><%= count[:value] -%></strong></a>
+      <td style="text-align:center;font-size:36px;font-weight:400;">
+        <a class="with-accent-colors" href="<%= count[:href] -%>"><strong><%= count[:value] -%></strong></a>
       </td>
     <%- end -%>
   </tr>
   <tr>
     <%- @counts.each do |count| -%>
-      <td style="color:#fff;font-size:14px;font-weight:400;text-align:center;">
-        <a style="color:#fff;" href="<%= count[:href] -%>"><strong><%=t count[:label_key] -%></strong></a>
+      <td style="font-size:14px;font-weight:400;text-align:center;">
+        <a class="with-accent-colors" href="<%= count[:href] -%>"><strong><%=t count[:label_key] -%></strong></a>
       </td>
     <%- end -%>
   </tr>
 </tbody>
 </table>
 
-<center style="color:#fff;font-size:22px;font-weight:400;margin-bottom: 8px;"><%=t 'user_notifications.digest.popular_topics' %></center>
+<center class="with-accent-colors" style="font-size:22px;font-weight:400;margin-bottom: 8px;"><%=t 'user_notifications.digest.popular_topics' %></center>
 
 
             </td>
@@ -123,7 +123,7 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
     <tr>
       <td style="padding: 0 8px 0 16px; text-align:left; width:100%;">
         <h2 style="font-size:18px;font-weight:400;line-height:1.3;margin:0;padding:0;word-wrap:normal">
-          <a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="color:#2F70AC;font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none">
+          <a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none">
             <strong><%= t.title.truncate(60, separator: /\s/) -%></strong>
           </a>
         </h2>
@@ -189,7 +189,7 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
         <% end %>
       </td>
       <td style="line-height:1.3;padding:0 16px 0 8px;text-align:right;white-space:nowrap;vertical-align:top;">
-        <a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="width:100%;background-color:#2199e8;color:#fff;text-decoration:none;padding:8px 16px;white-space:nowrap;">
+        <a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" class="with-accent-colors" style="width:100%;text-decoration:none;padding:8px 16px;white-space:nowrap;">
           <%=t 'user_notifications.digest.join_the_discussion' %>
         </a>
       </td>
@@ -215,8 +215,8 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
       </table>
     </td>
     <td class="side-spacer" style="width:5%;vertical-align:top;padding:0;">
-      <!-- Blue background that goes down part-way behind content -->
-      <div style="background-color:#2F70AC;">
+      <!-- Background that goes down part-way behind content -->
+      <div class="with-accent-colors">
         <table class="spacer" style="border-spacing:0;padding:0;width:100%">
           <tbody>
             <tr>
@@ -286,9 +286,9 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
       <td style="color:#0a0a0a;line-height:1.3;padding:0 8px 8px 8px;text-align:right;">
         <p style="color:#8f8f8f;line-height:1.3;margin:0 0 10px 0;padding:0;text-align:right;">
           <%=t 'user_notifications.digest.from_topic_label' %>
-          <a href="<%= post.full_url -%>" style="color:#2199e8;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:none"><%= post.topic.title.truncate(60, separator: /\s/) -%></a>
+          <a href="<%= post.full_url -%>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:none"><%= post.topic.title.truncate(60, separator: /\s/) -%></a>
         </p>
-        <a href="<%= post.full_url -%>" style="width:100%;background-color:#2199e8;color:#fff;text-decoration:none;padding:8px 16px;white-space: nowrap;">
+        <a href="<%= post.full_url -%>" class="with-accent-colors" style="width:100%;text-decoration:none;padding:8px 16px;white-space: nowrap;">
           <%=t 'user_notifications.digest.join_the_discussion' %>
         </a>
       </td>
@@ -331,12 +331,12 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
 <!--   Begin new topic  -->
     <tr style="vertical-align:top;">
       <td style="padding:8px;text-align:left;">
-        <p style="background:#2F70AC;border-radius:50%;color:#fff;height:30px;line-height:30px;margin:0 0 10px 0;padding:0;text-align:center;width:30px;">
+        <p class="with-accent-colors" style="border-radius:50%;height:30px;line-height:30px;margin:0 0 10px 0;padding:0;text-align:center;width:30px;">
           <%= t.user_data ? (t.highest_post_number - (t.user_data.last_read_post_number || 0)) : t.highest_post_number %>
         </p>
       </td>
       <td style="padding:8px;text-align:left;">
-        <a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="color:#2F70AC;font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none">
+        <a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none">
           <strong><%= t.title.truncate(60, separator: /\s/) -%></strong>
         </a>
         <%- if SiteSetting.show_topic_featured_link_in_digest && t.featured_link %>

config/locales/server.en.yml

@@ -1306,6 +1306,9 @@ en:
     delete_digest_email_after_days: "Suppress summary emails for users not seen on the site for more than (n) days."
     digest_suppress_categories: "Suppress these categories from summary emails."
     disable_digest_emails: "Disable summary emails for all users."
+    email_accent_bg_color: "The accent color to be used as the background of some elements in HTML emails. Enter a color name ('red') or hex value ('#FF000')."
+    email_accent_fg_color: "The color of text rendered on the email bg color in HTML emails. Enter a color name ('white') or hex value ('#FFFFFF')."
+    email_link_color: "The color of links in HTML emails. Enter a color name ('blue') or hex value ('#0000FF')."
 
     detect_custom_avatars: "Whether or not to check that users have uploaded custom profile pictures."
     max_daily_gravatar_crawls: "Maximum number of times Discourse will check Gravatar for custom avatars in a day"

config/site_settings.yml

@@ -599,6 +599,9 @@ email:
   disable_digest_emails:
     default: false
     client: true
+  email_accent_bg_color: "#2F70AC"
+  email_accent_fg_color: "#FFFFFF"
+  email_link_color: "#006699"
   show_topic_featured_link_in_digest: false
   email_custom_headers: 'Auto-Submitted: auto-generated'
   email_subject: '[%{site_name}] %{optional_pm}%{optional_cat}%{topic_title}'

lib/email/styles.rb

@@ -152,20 +152,19 @@ module Email
     end
 
     def format_html
+      style('.with-accent-colors', "background-color: #{SiteSetting.email_accent_bg_color}; color: #{SiteSetting.email_accent_fg_color};")
       style('h4', 'color: #222;')
       style('h3', 'margin: 15px 0 20px 0;')
       style('hr', 'background-color: #ddd; height: 1px; border: 1px;')
-      style('a', 'text-decoration: none; font-weight: bold; color: #006699;')
+      style('a', "text-decoration: none; font-weight: bold; color: #{SiteSetting.email_link_color};")
       style('ul', 'margin: 0 0 0 10px; padding: 0 0 0 20px;')
       style('li', 'padding-bottom: 10px')
-      style('div.digest-post', 'margin-left: 15px; margin-top: -5px; max-width: 694px;')
-      style('div.digest-post h1', 'font-size: 20px;')
       style('div.footer', 'color:#666; font-size:95%; text-align:center; padding-top:15px;')
       style('span.post-count', 'margin: 0 5px; color: #777;')
       style('pre', 'word-wrap: break-word; max-width: 694px;')
       style('code', 'background-color: #f1f1ff; padding: 2px 5px;')
       style('pre code', 'display: block; background-color: #f1f1ff; padding: 5px;')
-      style('.featured-topic a', 'text-decoration: none; font-weight: bold; color: #006699; line-height:1.5em;')
+      style('.featured-topic a', "text-decoration: none; font-weight: bold; color: #{SiteSetting.email_link_color}; line-height:1.5em;")
 
       onebox_styles
       plugin_styles