FIX: Email styles for Gmail app dark mode (#16482)

app/helpers/email_helper.rb

@@ -63,14 +63,6 @@ module EmailHelper
           color: #dddddd !important;
         }
 
-        [dm='light-img'] {
-          display: none !important;
-        }
-
-        [dm='dark-img'] {
-          display: block !important;
-        }
-
         [dm='text-color'] {
           color: #dddddd;
         }
@@ -79,15 +71,33 @@ module EmailHelper
           background: #151515 !important;
         }
 
+        [dm='topic-body'] {
+          background: #151515 !important;
+          border-bottom: 1px solid #454545 !important;
+        }
+
+        [dm='triangle'] {
+          border-top-color: #151515 !important;
+        }
+
         [dm='body'] {
           background: #222222 !important;
           color: #dddddd !important;
         }
 
+        [dm='secure-media-notice'] {
+          border-color: #454545 !important;
+        }
+
         [dm='body_primary'] {
           background: #062e3d !important;
           color: #dddddd !important;
         }
+
+        [dm='bg'] {
+          background: #232323 !important;
+          border-color: #454545 !important;
+        }
       }
     </style>
     "

app/views/user_notifications/digest.html.erb

@@ -160,13 +160,11 @@
   <tbody>
     <tr>
       <td class="digest-topic-stat" style="padding:<%= rtl? ? '0 16px 16px 8px' : '0 8px 16px 16px' %>;white-space:nowrap;vertical-align:top;width:75px">
-        <img class="digest-icon" src="<%= email_image_url 'heart.png' -%>" style="clear:both;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto" alt="likes" dm="light-img">
+        <img class="digest-icon" src="<%= email_image_url 'heart_lightdark.png' -%>" style="clear:both;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;width:20px;margin:0;max-width:100%;outline:0;text-decoration:none;" alt="likes">
-        <img class="digest-icon" src="<%= email_image_url 'heart_dark.png' -%>" style="clear:both;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto;display:none;" alt="likes" dm="dark-img">
         <span style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;font-weight:400;">&nbsp;<%= t.like_count -%></span>
       </td>
       <td class="digest-topic-stat" style="padding:0 8px 16px 8px;white-space:nowrap;vertical-align:top;width:75px">
-        <img class="digest-icon" src="<%= email_image_url 'comment.png' -%>" style="clear:none;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto" alt="replies" dm="light-img">
+        <img class="digest-icon" src="<%= email_image_url 'comment_lightdark.png' -%>" style="clear:none;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;width:20px;margin:0;max-width:100%;outline:0;text-decoration:none;" alt="replies">
-        <img class="digest-icon" src="<%= email_image_url 'comment_dark.png' -%>" style="clear:both;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto;display:none;" alt="likes" dm="dark-img">
         <span style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;font-weight:400;">&nbsp;<%= t.posts_count - 1 -%></span>
       </td>
       <td class="digest-read-more-wrap" style="line-height:1.3;padding:<%= rtl? ? '0 8px 0 16px' : '0 16px 0 8px' %>;text-align:<%= rtl? ? 'left' : 'right' %>;white-space:nowrap;vertical-align:top;">
@@ -240,8 +238,7 @@
   <tbody>
     <tr>
       <td style="border-spacing:0;padding:0;color:#0a0a0a;line-height:1.3;padding:<%= rtl? ? '0 65px 0 0' : '0 0 0 65px' %>;">
-        <img src="<%= email_image_url 'right_triangle.png' -%>" style="clear:both;display:block;height:20px;width:20px;outline:0;text-decoration:none;" alt="" dm="light-img">
+        <div style="width: 0;height: 0;border-top: 30px solid #fefefe;border-right: 30px solid transparent;" dm="triangle"></div>
-        <img src="<%= email_image_url 'right_triangle_dark.png' -%>" style="clear:both;display:block;height:20px;width:20px;outline:0;text-decoration:none;display:none;" alt="" dm="dark-img">
       </td>
     </tr>
   </tbody>
@@ -319,19 +316,16 @@
         </p>
       </td>
       <td class="digest-new-topic-stat with-dir" style="padding:8px;">
-        <img class="digest-icon" src="<%= email_image_url 'heart.png' -%>" style="clear:both;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto" alt="likes" dm="light-img">
+        <img class="digest-icon" src="<%= email_image_url 'heart_lightdark.png' -%>" style="clear:both;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;width:20px;margin:0;max-width:100%;outline:0;text-decoration:none;" alt="likes">
-        <img class="digest-icon" src="<%= email_image_url 'heart_dark.png' -%>" style="clear:both;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto;display:none;" alt="likes" dm="dark-img">
         <p style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;font-weight:400;"><%= t.like_count -%></p>
       </td>
       <td class="digest-new-topic-stat digest-replies with-dir" style="padding:8px;">
-        <img class="digest-icon" src="<%= email_image_url 'comment.png' -%>" style="clear:none;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto" alt="replies" dm="light-img">
+        <img class="digest-icon" src="<%= email_image_url 'comment_lightdark.png' -%>" style="clear:none;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;width:20px;margin:0;max-width:100%;outline:0;text-decoration:none;" alt="replies">
-        <img class="digest-icon" src="<%= email_image_url 'comment_dark.png' -%>" style="clear:none;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto;display:none;" alt="replies" dm="dark-img">
         <p style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;font-weight:400;"><%= t.posts_count - 1 -%></p>
       </td>
     </tr>
 
     <tr class="digest-new-topic-spacer"><td colspan="6" height="10px" style="border-collapse:collapse!important;line-height:10px;margin:0;mso-line-height-rule:exactly;padding:0;">&#xA0;</td></tr>
-
 <!--   End new topic  -->
 
 <% end %>

lib/email/styles.rb

@@ -338,15 +338,13 @@ module Email
       # When we ship the email template and its styles we strip all css classes so to give our
       # dark mode styles we are including in the template a selector we add a data-attr of 'dm=value' to
       # the appropriate place
-      style(".digest-header, .digest-topic, .digest-topic-body, .digest-topic-title-wrapper, .digest-topic-stats, .popular-post-excerpt", nil, dm: "header")
+      style(".digest-header, .digest-topic, .digest-topic-title-wrapper, .digest-topic-stats, .popular-post-excerpt", nil, dm: "header")
       style(".digest-content, .header-popular-posts, .spacer, .popular-post-spacer, .popular-post-meta, .digest-new-header, .digest-new-topic, .body", nil, dm: "body")
       style(".with-accent-colors, .digest-content-header", nil, dm: "body_primary")
+      style(".digest-topic-body", nil, dm: "topic-body")
       style(".summary-footer", nil, dm: "text-color")
-      style(".digest-topic-body", "border-bottom: 1px solid #454545 !important;")
+      style(".secure-media-notice", nil, dm: "secure-media-notice")
-      style(".secure-media-notice", "border: 5px solid #454545 !important;")
+      style("code, pre code, blockquote", nil, dm: "bg")
-      style("code", "background-color: #454545 !important;")
-      style("pre code", "background-color: #454545 !important;")
-      style("blockquote", "background-color: #454545; !important")
     end
 
     def replace_relative_urls