{"id":3039,"date":"2021-01-22T11:04:15","date_gmt":"2021-01-22T11:04:15","guid":{"rendered":"https:\/\/media-beats.com\/?p=3039"},"modified":"2025-06-05T16:52:35","modified_gmt":"2025-06-05T14:52:35","slug":"newslettergestaltung-im-dark-mode","status":"publish","type":"post","link":"https:\/\/media-beats.com\/en\/newslettergestaltung-im-dark-mode\/","title":{"rendered":"Newsletter design in dark mode"},"content":{"rendered":"

[:en]You may already be familiar with Dark Mode from your iOS or Android smartphone. In addition to the standardized settings in the current Apple software, you also have the option to activate Dark Mode in apps such as WhatsApp, Facebook, or Instagram, as well as in the Windows environment. But what exactly is behind it, and how can this setting be implemented stylishly and appealingly in online marketing and newsletter design<\/a>?<\/p>\n

What is Dark Mode?<\/strong><\/p>\n

Dark mode has become a strong trend. Backgrounds are dark, while texts and icons are displayed in lighter colors, for example. Dark mode enables an innovative and unique design that stands out clearly due to its color scheme and is perceived as pleasant by many users when viewing. But why is that? How can the positive impression that dark mode leaves on users be explained and sensibly used for your company\u2019s email marketing<\/a>?<\/p>\n

What are the advantages of dark mode?\u00a0<\/strong><\/p>\n

Dark mode has a whole range of advantages. Thanks to white text on a dark background, our eyes are spared when reading. This advantage is also noticeable when we only use our technical devices in low light. Not only does this make it easier to read content, it also reduces the brightness of the screen. Overall, this helps to conserve the battery of mobile devices. Another advantage of dark mode is the minimalism associated with it by many users and therefore a modern design that reflects the current zeitgeist.<\/p>\n

Why is dark mode difficult in newsletter design?<\/strong><\/p>\n

In online marketing<\/a>, companies are continually seeking creative options that enable individualized newsletter design within email marketing, thereby securing the attention of recipients.<\/p>\n

However, online marketing and newsletter design in dark mode come with some pitfalls. In principle, dark mode is supported by numerous mobile apps (e.g. Gmail app or Outlook for Android and iOS), desktop clients (e.g. Apple Mail Outlook 2019 for Mac OS and Windows) and web clients (e.g. outlook.com), but in practice an email can look very different depending on the client. One reason for this is the complex rendering of emails and the problem that an email may not look the same in the recipient's client as you originally designed it. It is therefore all the more important that you optimize your newsletters in dark mode so that common email clients display them correctly.<\/p>\n

What specific aspects should be considered when designing newsletters in dark mode<\/a>?<\/p>\n

For an optimal display, take into account the color schemes that e-mail clients use for the dark mode of e-mails. The common clients currently use the following 3 variants for processing in dark mode.<\/p>\n

No color change<\/strong><\/p>\n

In a number of email clients, the user interface can be converted to dark mode. Regardless of whether you choose light or dark mode, the display of your HTML email remains unchanged. This does not apply to plain text emails. Here, a 2\u00d71 image is required to trigger dark mode. This can be easily achieved with a 1\u00d71 tracking pixel and the use of a \u201ctext-only style\u201d.<\/p>\n

Invert partial color<\/strong><\/p>\n

Light background areas are recognized and inverted and therefore dark. Dark text, on the other hand, becomes light. Elements with a dark background are retained.<\/p>\n

Full color inversion<\/strong><\/p>\n

The invasive color scheme is used here. Unlike when inverting partial colors, light and dark backgrounds are inverted here.<\/p>\n

However, it is also possible to use your own dark mode styles. This is where the \u201c@media (prefers-color-scheme: dark)\u201d or the \u201c[data-ogsc] and\/or [data-ogsb]\u201d methods are used.<\/p>\n

With both methods, it is crucial that transparent PNGs are given a light drop shadow on dark text. This allows you to reduce problems in email clients that are not set to dark mode. It is also possible to use selected metadata in the newsletter to ensure that recipients can also read the email in dark mode.<\/p>\n

Our tip<\/strong>: Would you like to learn more about dark mode styles for @media (prefers-color-scheme: dark) and double dark mode styles with [data-ogsc] and\/or [data-ogsb] prefixes? Or do you prefer not to worry about the technical details at all but still want to implement online marketing and newsletter design in dark mode? Then contact<\/a> our full-service agency in Munich. Simply fill out the contact form, and we will get back to you as soon as possible.<\/p>","protected":false},"excerpt":{"rendered":"

Was versteht man eigentlich unter Dark Mode und wie l\u00e4sst sich der Modus im E-Mail Marketing bei der Newslettergestaltung nutzen. Es gibt zahlreiche Vorteile, jedoch auch T\u00fccken …<\/p>","protected":false},"author":1,"featured_media":3080,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-3039","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-e-mail-marketing"],"acf":[],"yoast_head":"\nDark Mode in der Newslettergestaltung - Full Service Agentur in M\u00fcnchen<\/title>\n<meta name=\"description\" content=\"Lesen Sie in unserem Blogbeitrag mehr \u00fcber das Thema Dark Mode in der Newslettergestaltung und erfahren Sie, worauf Sie achten sollten.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/media-beats.com\/en\/newslettergestaltung-im-dark-mode\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dark Mode in der Newslettergestaltung - Full Service Agentur in M\u00fcnchen\" \/>\n<meta property=\"og:description\" content=\"Lesen Sie in unserem Blogbeitrag mehr \u00fcber das Thema Dark Mode in der Newslettergestaltung und erfahren Sie, worauf Sie achten sollten.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/media-beats.com\/en\/newslettergestaltung-im-dark-mode\/\" \/>\n<meta property=\"og:site_name\" content=\"Media Beats\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mediabeatsagentur\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-22T11:04:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-05T14:52:35+00:00\" \/>\n<meta name=\"author\" content=\"admin_bigus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BeatsGmbh\" \/>\n<meta name=\"twitter:site\" content=\"@BeatsGmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin_bigus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/\"},\"author\":{\"name\":\"admin_bigus\",\"@id\":\"https:\/\/media-beats.com\/#\/schema\/person\/842bb53b5d1bde48558461e222c603f7\"},\"headline\":\"Newslettergestaltung im Dark Mode\",\"datePublished\":\"2021-01-22T11:04:15+00:00\",\"dateModified\":\"2025-06-05T14:52:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/\"},\"wordCount\":759,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/media-beats.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/media-beats.com\/wp-content\/uploads\/media-beats-gmbh-muenchen-blog-dark-mode-1.svg\",\"articleSection\":[\"E-Mail Marketing\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/\",\"url\":\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/\",\"name\":\"Dark Mode in der Newslettergestaltung - Full Service Agentur in M\u00fcnchen\",\"isPartOf\":{\"@id\":\"https:\/\/media-beats.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/media-beats.com\/wp-content\/uploads\/media-beats-gmbh-muenchen-blog-dark-mode-1.svg\",\"datePublished\":\"2021-01-22T11:04:15+00:00\",\"dateModified\":\"2025-06-05T14:52:35+00:00\",\"description\":\"Lesen Sie in unserem Blogbeitrag mehr \u00fcber das Thema Dark Mode in der Newslettergestaltung und erfahren Sie, worauf Sie achten sollten.\",\"breadcrumb\":{\"@id\":\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#primaryimage\",\"url\":\"https:\/\/media-beats.com\/wp-content\/uploads\/media-beats-gmbh-muenchen-blog-dark-mode-1.svg\",\"contentUrl\":\"https:\/\/media-beats.com\/wp-content\/uploads\/media-beats-gmbh-muenchen-blog-dark-mode-1.svg\",\"width\":448,\"height\":270,\"caption\":\"Die Media Beats GmbH Agentur bietet innovative Newsletterdesigne an\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/media-beats.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Newslettergestaltung im Dark Mode\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/media-beats.com\/#website\",\"url\":\"https:\/\/media-beats.com\/\",\"name\":\"Media Beats\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/media-beats.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/media-beats.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/media-beats.com\/#organization\",\"name\":\"Media Beats\",\"url\":\"https:\/\/media-beats.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/media-beats.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/media-beats.com\/wp-content\/uploads\/logo_black.svg\",\"contentUrl\":\"https:\/\/media-beats.com\/wp-content\/uploads\/logo_black.svg\",\"width\":114,\"height\":16,\"caption\":\"Media Beats\"},\"image\":{\"@id\":\"https:\/\/media-beats.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/mediabeatsagentur\",\"https:\/\/x.com\/BeatsGmbh\",\"https:\/\/www.linkedin.com\/company\/media-beats-gmbh\/about\/\",\"https:\/\/www.instagram.com\/media_beats_gmbh\/\",\"https:\/\/medium.com\/@mediabeats\",\"https:\/\/www.xing.com\/pages\/mediabeatsgmbh\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/media-beats.com\/#\/schema\/person\/842bb53b5d1bde48558461e222c603f7\",\"name\":\"admin_bigus\",\"sameAs\":[\"http:\/\/media-beats.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dark Mode in der Newslettergestaltung - Full Service Agentur in M\u00fcnchen","description":"Lesen Sie in unserem Blogbeitrag mehr \u00fcber das Thema Dark Mode in der Newslettergestaltung und erfahren Sie, worauf Sie achten sollten.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/media-beats.com\/en\/newslettergestaltung-im-dark-mode\/","og_locale":"en_GB","og_type":"article","og_title":"Dark Mode in der Newslettergestaltung - Full Service Agentur in M\u00fcnchen","og_description":"Lesen Sie in unserem Blogbeitrag mehr \u00fcber das Thema Dark Mode in der Newslettergestaltung und erfahren Sie, worauf Sie achten sollten.","og_url":"https:\/\/media-beats.com\/en\/newslettergestaltung-im-dark-mode\/","og_site_name":"Media Beats","article_publisher":"https:\/\/www.facebook.com\/mediabeatsagentur","article_published_time":"2021-01-22T11:04:15+00:00","article_modified_time":"2025-06-05T14:52:35+00:00","author":"admin_bigus","twitter_card":"summary_large_image","twitter_creator":"@BeatsGmbh","twitter_site":"@BeatsGmbh","twitter_misc":{"Written by":"admin_bigus","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#article","isPartOf":{"@id":"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/"},"author":{"name":"admin_bigus","@id":"https:\/\/media-beats.com\/#\/schema\/person\/842bb53b5d1bde48558461e222c603f7"},"headline":"Newslettergestaltung im Dark Mode","datePublished":"2021-01-22T11:04:15+00:00","dateModified":"2025-06-05T14:52:35+00:00","mainEntityOfPage":{"@id":"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/"},"wordCount":759,"commentCount":0,"publisher":{"@id":"https:\/\/media-beats.com\/#organization"},"image":{"@id":"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#primaryimage"},"thumbnailUrl":"https:\/\/media-beats.com\/wp-content\/uploads\/media-beats-gmbh-muenchen-blog-dark-mode-1.svg","articleSection":["E-Mail Marketing"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/","url":"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/","name":"Dark Mode in der Newslettergestaltung - Full Service Agentur in M\u00fcnchen","isPartOf":{"@id":"https:\/\/media-beats.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#primaryimage"},"image":{"@id":"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#primaryimage"},"thumbnailUrl":"https:\/\/media-beats.com\/wp-content\/uploads\/media-beats-gmbh-muenchen-blog-dark-mode-1.svg","datePublished":"2021-01-22T11:04:15+00:00","dateModified":"2025-06-05T14:52:35+00:00","description":"Lesen Sie in unserem Blogbeitrag mehr \u00fcber das Thema Dark Mode in der Newslettergestaltung und erfahren Sie, worauf Sie achten sollten.","breadcrumb":{"@id":"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#primaryimage","url":"https:\/\/media-beats.com\/wp-content\/uploads\/media-beats-gmbh-muenchen-blog-dark-mode-1.svg","contentUrl":"https:\/\/media-beats.com\/wp-content\/uploads\/media-beats-gmbh-muenchen-blog-dark-mode-1.svg","width":448,"height":270,"caption":"Die Media Beats GmbH Agentur bietet innovative Newsletterdesigne an"},{"@type":"BreadcrumbList","@id":"https:\/\/media-beats.com\/newslettergestaltung-im-dark-mode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/media-beats.com\/"},{"@type":"ListItem","position":2,"name":"Newslettergestaltung im Dark Mode"}]},{"@type":"WebSite","@id":"https:\/\/media-beats.com\/#website","url":"https:\/\/media-beats.com\/","name":"Media Beats","description":"","publisher":{"@id":"https:\/\/media-beats.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/media-beats.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/media-beats.com\/#organization","name":"Media Beats","url":"https:\/\/media-beats.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/media-beats.com\/#\/schema\/logo\/image\/","url":"https:\/\/media-beats.com\/wp-content\/uploads\/logo_black.svg","contentUrl":"https:\/\/media-beats.com\/wp-content\/uploads\/logo_black.svg","width":114,"height":16,"caption":"Media Beats"},"image":{"@id":"https:\/\/media-beats.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/mediabeatsagentur","https:\/\/x.com\/BeatsGmbh","https:\/\/www.linkedin.com\/company\/media-beats-gmbh\/about\/","https:\/\/www.instagram.com\/media_beats_gmbh\/","https:\/\/medium.com\/@mediabeats","https:\/\/www.xing.com\/pages\/mediabeatsgmbh"]},{"@type":"Person","@id":"https:\/\/media-beats.com\/#\/schema\/person\/842bb53b5d1bde48558461e222c603f7","name":"admin_bigus","sameAs":["http:\/\/media-beats.com"]}]}},"taxonomy_info":{"category":[{"value":10,"label":"E-Mail Marketing"}]},"featured_image_src_large":["https:\/\/media-beats.com\/wp-content\/uploads\/media-beats-gmbh-muenchen-blog-dark-mode-1.svg",1224,737,true],"author_info":{"display_name":"admin_bigus","author_link":"https:\/\/media-beats.com\/en\/author\/admin_bigus\/"},"comment_info":0,"category_info":[{"term_id":10,"name":"E-Mail Marketing","slug":"e-mail-marketing","term_group":0,"term_taxonomy_id":10,"taxonomy":"category","description":"","parent":0,"count":88,"filter":"raw","cat_ID":10,"category_count":88,"category_description":"","cat_name":"E-Mail Marketing","category_nicename":"e-mail-marketing","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/media-beats.com\/en\/wp-json\/wp\/v2\/posts\/3039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/media-beats.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/media-beats.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/media-beats.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/media-beats.com\/en\/wp-json\/wp\/v2\/comments?post=3039"}],"version-history":[{"count":2,"href":"https:\/\/media-beats.com\/en\/wp-json\/wp\/v2\/posts\/3039\/revisions"}],"predecessor-version":[{"id":12344,"href":"https:\/\/media-beats.com\/en\/wp-json\/wp\/v2\/posts\/3039\/revisions\/12344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/media-beats.com\/en\/wp-json\/wp\/v2\/media\/3080"}],"wp:attachment":[{"href":"https:\/\/media-beats.com\/en\/wp-json\/wp\/v2\/media?parent=3039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/media-beats.com\/en\/wp-json\/wp\/v2\/categories?post=3039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/media-beats.com\/en\/wp-json\/wp\/v2\/tags?post=3039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}