From 6c0abe15e051344590029ccd3df77f73bbc656e7 Mon Sep 17 00:00:00 2001 From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com> Date: Mon, 11 Apr 2022 12:27:50 -0500 Subject: [PATCH] FEATURE: Add email dark mode (#16104) implement dark mode emails when `SiteSetting.dark_mode_emails_active` is active. --- app/helpers/email_helper.rb | 58 +++++++++++++++++++ app/views/email/default_template.html | 2 + app/views/user_notifications/digest.html.erb | 21 ++++--- config/site_settings.yml | 3 + lib/email/styles.rb | 11 ++++ public/images/emails/comment_dark.png | Bin 0 -> 492 bytes public/images/emails/heart_dark.png | Bin 0 -> 606 bytes public/images/emails/right_triangle_dark.png | Bin 0 -> 197 bytes spec/lib/email/styles_spec.rb | 17 ++++++ 9 files changed, 104 insertions(+), 8 deletions(-) create mode 100644 public/images/emails/comment_dark.png create mode 100644 public/images/emails/heart_dark.png create mode 100644 public/images/emails/right_triangle_dark.png diff --git a/app/helpers/email_helper.rb b/app/helpers/email_helper.rb index f738ac49737..ed24cb8ed1b 100644 --- a/app/helpers/email_helper.rb +++ b/app/helpers/email_helper.rb @@ -29,11 +29,69 @@ module EmailHelper EmailStyle.new.html .sub('%{email_content}') { capture { yield } } .gsub('%{html_lang}', html_lang) + .gsub('%{dark_mode_meta_tags}', SiteSetting.dark_mode_emails_active ? dark_mode_meta_tags : "") + .gsub('%{dark_mode_styles}', SiteSetting.dark_mode_emails_active ? dark_mode_styles : "") .html_safe end protected + def dark_mode_meta_tags + " + + + " + end + + def dark_mode_styles + " + + " + end + def extract_details(topic) if SiteSetting.private_email? [topic.slugless_url, private_topic_title(topic)] diff --git a/app/views/email/default_template.html b/app/views/email/default_template.html index 53e99ab184c..f660cc46fd4 100644 --- a/app/views/email/default_template.html +++ b/app/views/email/default_template.html @@ -10,6 +10,7 @@ name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" /> + %{dark_mode_meta_tags} @@ -45,5 +46,6 @@                                         + %{dark_mode_styles} diff --git a/app/views/user_notifications/digest.html.erb b/app/views/user_notifications/digest.html.erb index e40d9c050f3..58ed12986b0 100644 --- a/app/views/user_notifications/digest.html.erb +++ b/app/views/user_notifications/digest.html.erb @@ -104,7 +104,7 @@ - +
@@ -121,7 +121,7 @@
- +
@@ -156,15 +156,17 @@
<%- end %> - +
@@ -330,11 +333,13 @@ <% end %> diff --git a/config/site_settings.yml b/config/site_settings.yml index 78ab66041c1..5ccb510d6f0 100644 --- a/config/site_settings.yml +++ b/config/site_settings.yml @@ -283,6 +283,9 @@ basic: type: enum enum: "ColorSchemeSetting" client: true + dark_mode_emails_active: + default: false + hidden: true relative_date_duration: client: true default: 30 diff --git a/lib/email/styles.rb b/lib/email/styles.rb index 416798e0426..02e347576c0 100644 --- a/lib/email/styles.rb +++ b/lib/email/styles.rb @@ -238,6 +238,7 @@ module Email onebox_styles plugin_styles + dark_mode_styles if SiteSetting.dark_mode_emails_active style('.post-excerpt img', "max-width: 50%; max-height: #{MAX_IMAGE_DIMENSION}px;") @@ -333,6 +334,16 @@ module Email private + def dark_mode_styles + # 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-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(".summary-footer", nil, dm: "text-color") + end + def replace_relative_urls forum_uri = URI(Discourse.base_url) host = forum_uri.host diff --git a/public/images/emails/comment_dark.png b/public/images/emails/comment_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..46bdeaaec0ad5eebef1a4dfb64ec027a8496ec4c GIT binary patch literal 492 zcmVPx$rb$FWR5(xVmAz|KK@`M)lSGq%h>aMv6H?h5u(8$J&O)$=iC86~T`Ega3lT+Z zE&Lvxl9pA>R)KrKE8rxsI{++8#()iA9tf$q0Nw(g1E(eZ z8VIy+ne7w658!S9ZvroXSxMh)PaTG#q`$V$0iS_84e%v!LDF~I#}5g(X?q4(2NsSJ z@C&f`AMofNrB60};*OB_)>xlxdWCH}9&HxPct_H9pYTV8JqNr8mdkplDjk)tmI=Yea$4IoUn zfJc=?pK6@B0JfxQ@wM8;m+gtrmz0Hxvg^QW-~sRuI0M|zk<$2}@UVR>+XL7xe==!f zJM7-n#<#iK3XQOuET50&Wg0~lyL$mAN&-ormCl#ayJDR?$_pRJusv1)(>Wb;>}}g; i6Pm>~$&(uTS@1tO5)T>>t!!HW0000Px%7)eAyR5(wKl)rC|Q545N-?l1Z@&`ynQnW}U5(5ho1Cy=>gG3@)zXl0|!62rF zs-lyngN+a?78bQpghBWNhzX@fzEAFL?)$i}_kE}5Je;{&B7j6i+2Ydm1&N<(K{gOT#y9W3GEJ!-sZaE_6fTJlsFX?zC=Mk_27%^}P zI3#H_RXd!jk))**y8;YIx>&UCN*()^V()>62D-h=lI}*t>O8NM^L=5La_X6hJh;X|Lz=7<;tH1?dRMNYCpapCMu)0j>4X^^e2Al!5Nm`5uUkdJGDI&&z*T4-)XWM390k$_IRXUl4 zO7Fd%ZgaMy&0=#pfR#$~OgDOOfsep+t+L$dKfp?*hMq_VEWo*RcdqPs>DMZ-QmJpG sW&5mlLG%U8w~Li8glh^YW9@DF3$ed#Ye~k@TL1t607*qoM6N<$f?3TCZU6uP literal 0 HcmV?d00001 diff --git a/public/images/emails/right_triangle_dark.png b/public/images/emails/right_triangle_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..8b4c12020f2468297acb886f4bee1f553bac8d7c GIT binary patch literal 197 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VV{wqX6T`Z5GB1IgdQTU}5DWjc zm%4cy6nI=O?o*WTFfUhPQ*dma=rYB>UiQHgGhHVRbxS^*gHtX&WE0alwqth#|29Fv zGYQR%H(Ba77Db!hID93+_5d%#&%dRQ4h2TKx;|Lr!?W&`i^B3A-lEeH3q)q`>rFZP u^mfLnHtp=wyA~{c!ya{7>cZkRP2%czmN`!PU?K)|3WKMspUXO@geCw@x=0}a literal 0 HcmV?d00001 diff --git a/spec/lib/email/styles_spec.rb b/spec/lib/email/styles_spec.rb index 0b82af62d8b..ee00d8ba2d4 100644 --- a/spec/lib/email/styles_spec.rb +++ b/spec/lib/email/styles_spec.rb @@ -156,6 +156,23 @@ describe Email::Styles do end + context "dark mode emails" do + before do + SiteSetting.dark_mode_emails_active = true + end + + it "adds dark_mode_styles when site setting active" do + frag = html_fragment('
test
') + styler = Email::Styles.new(frag) + styler.format_basic + styler.format_html + @frag = Nokogiri::HTML5.fragment(styler.to_s) + + # dark mode attribute + expect(@frag.css('[dm="body"]')).to be_present + end + end + context "strip_avatars_and_emojis" do it "works for lonesome emoji with no title" do emoji = ""
- likes + likes +  <%= t.like_count -%> - replies + replies +  <%= t.posts_count - 1 -%> @@ -245,7 +247,8 @@
- + +
- likes + likes +

<%= t.like_count -%>

 - replies + replies +

<%= t.posts_count - 1 -%>