{"id":6173,"date":"2019-06-20T16:47:32","date_gmt":"2019-06-20T13:47:32","guid":{"rendered":"\/\/?p=6173"},"modified":"2025-01-24T09:40:31","modified_gmt":"2025-01-24T09:40:31","slug":"dark-mode-adjustment-for-html-emails-in-mail-on-macos-mojave-a-quick-solution","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/dark-mode-adjustment-for-html-emails-in-mail-on-macos-mojave-a-quick-solution.html","title":{"rendered":"Dark Mode Adjustment for HTML Emails in Mail on macOS Mojave: A Quick Solution"},"content":{"rendered":"

You must have already tried that new exciting feature macOS Mojave<\/a> came out with \u2014 Dark Mode. The darker color palette that it uses for all interface elements makes looking at the monitor during nighttime hours or in dimly lit environments a far more pleasant experience.<\/p>\n

THE DARK MODE PROBLEM IN APPLE MAIL ON MOJAVE<\/h2>\n

All the Mojave\u2019s system apps can now switch to Dark Mode including Apple Mail. Unfortunately, it\u2019s Apple Mail users who have reported an issue with Dark Mode in their emails. What is it? <\/span><\/p>\n

If you send plain text or rich text emails, Mojave automatically applies Dark Mode to them. The font color is adjusted appropriately. White becomes black. Black becomes white. Everything\u2019s working fine. <\/span><\/p>\n

\"dark
\nIt\u2019s a different story with HTML emails. By default, Light Mode is applied to them. They can also be <\/span>automatically <\/b>converted to Dark Mode. There\u2019s one important thing to keep in mind, though: even one image with an absolute URL inside a message will render it in Light Mode inside Apple Mail. <\/span><\/p>\n

\"Light
\nWith no images inside an HTML letter, Mail will apply Dark Mode to it by default. The colors will be modified accordingly so that the message recipient can still discern the text. However, in many cases this HTML message rendered in Dark Mode may not have the look its sender intended it to h<\/span>ave, with the text being hard to read and understand. Here\u2019s an example (this email contains a block with an image as its background, but not an image separately):<\/span><\/p>\n

\"HTML
\n<\/b>OUR WORKAROUND<\/h2>\n

Clearly, you wouldn\u2019t like your current or prospective customers with macOS Mojave-powered computers to send all your next HTML emails straight to the junk box. While you can\u2019t use a default solution to overcome the limitations of the Dark Mode feature in Apple Mail, you can apply a simple workaround we\u2019ve found. <\/span><\/p>\n

At the moment, many people believe that only personal and plain text emails are rendered in Dark Mode in Apple Mail on macOS Mojave. However, we got curious and decided to move a step further: we wanted to experiment with embedding Dark Mode into HTML emails. <\/span><\/p>\n

We based our experiments on the Google Material Design<\/a> guidelines as well as on the designers\u2019 techniques for dealing with dark-theme interfaces. The outcome pleasantly surprised us. We were able to modify the look of the templates and even managed to change images from light to dark. How did we achieve that? Thanks to the @media (prefers-dark-interface) query. <\/span><\/p>\n

That said, Apple Mail on macOS Mojave, as mentioned above, doesn\u2019t apply Dark Mode to an email template if it contains at least one image (the <image> tag) with an absolute URL. <\/span><\/p>\n

We hope that this is only a temporary inconvenience. The good news is that you don\u2019t have to wait for the vendor to fix it, as you can already take advantage of our custom solution. All you need to do is replace the images inside an email with blocks and apply the \u2018background-image\u2019 rule to them. You can do that if the email content is final or if it\u2019s not going to be frequently altered in the future.<\/span><\/p>\n

\"Dark<\/p>\n

If you\u2019re troubleshooting Apple Mail issues, such as unexpected display problems or configuration hiccups, you may need to refresh your system settings. A useful step in such cases is to clear the DNS cache on your Mac. Here\u2019s a step-by-step<\/a> guide to help you do that.<\/p>\n

Another method is to send an HTML email from Mozilla Thunderbird<\/a> with the Stationery add-on activated. Under this scenario, images are attached to the email and don\u2019t contain absolute URLs.<\/p>\n

Try using the simple techniques we\u2019ve described in this post and share your impressions in the box below. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

You must have already tried that new exciting feature macOS Mojave came out with \u2014 Dark Mode. The darker color palette that it uses for all interface elements makes looking at the monitor during nighttime hours or in dimly lit environments a far more pleasant experience. THE DARK MODE PROBLEM…<\/p>\n","protected":false},"author":2,"featured_media":16277,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[750,740],"tags":[783,825,857],"class_list":["post-6173","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end-development-services","category-tutorial","tag-email-development","tag-html-css","tag-troubleshooting"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"GetDevDone Team","author_link":"https:\/\/getdevdone.com\/blog\/author\/admin-p2h"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/06\/27154702\/dark-mode-adjustment-for-emails-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["Front-end development services<\/a>","Tutorial<\/a>"],"unlinked":["Front-end development services<\/span>","Tutorial<\/span>"]},"tags":{"linked":["Email development<\/a>","HTML & CSS<\/a>","Troubleshooting<\/a>"],"unlinked":["Email development<\/span>","HTML & CSS<\/span>","Troubleshooting<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 7 years ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on June 20, 2019","modified":"Updated on January 24, 2025"},"absolute_dates_time":{"created":"Posted on June 20, 2019 4:47 pm","modified":"Updated on January 24, 2025 9:40 am"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/06\/27154702\/dark-mode-adjustment-for-emails-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/06\/27154702\/dark-mode-adjustment-for-emails.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/06\/27154702\/dark-mode-adjustment-for-emails.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/06\/27154702\/dark-mode-adjustment-for-emails.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/06\/27154702\/dark-mode-adjustment-for-emails.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2019\/06\/27154702\/dark-mode-adjustment-for-emails.png"},"featured_post_color":"#4d67e6","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/c67d54df2c6849e5b7af3126c36fe55b10f9d6a14b227d14b35af6c027abb195?s=96&d=mm&r=g","author_position":null,"reading_time":"<\/span> 3<\/span> min read<\/span><\/span>","prev_post":{"slug":"10-websites-with-slick-video-backgrounds","name":"10 Websites with Slick Video Backgrounds"},"next_post":{"slug":"woocommerce-magento-shopify-bigcommerce-which-platform-to-select-for-your-e-commerce-website","name":"WooCommerce, BigCommerce, Shopify, Adobe Commerce (Magento): Which Platform to Choose for Your Online Store"},"related_posts":["frontend-development-case-study","how-to-edit-the-footer-in-wordpress-to-meet-your-needs","microformats-7-microformats-that-are-worth-using"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/6173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=6173"}],"version-history":[{"count":20,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/6173\/revisions"}],"predecessor-version":[{"id":24626,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/6173\/revisions\/24626"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/16277"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=6173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=6173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=6173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}