{"id":12634,"date":"2026-06-06T11:32:00","date_gmt":"2026-06-06T11:32:00","guid":{"rendered":"https:\/\/www.mailcraft.eu\/projektowanie-maili-w-trybie-ciemnym-logo-przyciski\/"},"modified":"2026-09-25T08:09:04","modified_gmt":"2026-09-25T08:09:04","slug":"projektowanie-maili-w-trybie-ciemnym-logo-przyciski","status":"publish","type":"post","link":"https:\/\/www.mailcraft.eu\/pl\/projektowanie-maili-w-trybie-ciemnym-logo-przyciski\/","title":{"rendered":"Projektowanie maili w trybie ciemnym: czytelne logo i przyciski"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Good <strong>dark mode email design<\/strong> comes down to one thing: every logo and button has to stay readable on a light background and on a dark one. Then you test the layout against each way a client might invert your colors. Picture a black logo on a transparent PNG. A subscriber opens the newsletter in dark mode, and the logo is gone. The fix takes five steps: learn the three inversion patterns, fix the logo, rebuild the buttons, add CSS overrides where clients honour them, and test before every send.<\/p>\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<label for=\"ez-toc-cssicon-toggle-item-6abd76707a60b\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #102830;color:#102830\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #102830;color:#102830\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6abd76707a60b\"  \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.mailcraft.eu\/pl\/projektowanie-maili-w-trybie-ciemnym-logo-przyciski\/#What_Happens_to_Your_Email_When_Dark_Mode_Turns_On\" >What Happens to Your Email When Dark Mode Turns On?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.mailcraft.eu\/pl\/projektowanie-maili-w-trybie-ciemnym-logo-przyciski\/#Why_Does_a_Transparent_Logo_Disappear_in_Dark_Mode\" >Why Does a Transparent Logo Disappear in Dark Mode?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.mailcraft.eu\/pl\/projektowanie-maili-w-trybie-ciemnym-logo-przyciski\/#How_to_Keep_Email_Buttons_Readable_When_Colors_Are_Inverted\" >How to Keep Email Buttons Readable When Colors Are Inverted<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.mailcraft.eu\/pl\/projektowanie-maili-w-trybie-ciemnym-logo-przyciski\/#Using_prefers-color-scheme_in_Email_to_Control_Dark_Mode_Styles\" >Using prefers-color-scheme in Email to Control Dark Mode Styles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.mailcraft.eu\/pl\/projektowanie-maili-w-trybie-ciemnym-logo-przyciski\/#Dark_Mode_Email_Design_Checklist_Before_You_Hit_Send\" >Dark Mode Email Design Checklist Before You Hit Send<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.mailcraft.eu\/pl\/projektowanie-maili-w-trybie-ciemnym-logo-przyciski\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.mailcraft.eu\/pl\/projektowanie-maili-w-trybie-ciemnym-logo-przyciski\/#Should_I_use_a_transparent_PNG_logo_in_email\" >Should I use a transparent PNG logo in email?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.mailcraft.eu\/pl\/projektowanie-maili-w-trybie-ciemnym-logo-przyciski\/#Can_I_stop_email_clients_from_inverting_my_colors\" >Can I stop email clients from inverting my colors?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.mailcraft.eu\/pl\/projektowanie-maili-w-trybie-ciemnym-logo-przyciski\/#How_do_I_test_a_dark_mode_email\" >How do I test a dark mode email?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Happens_to_Your_Email_When_Dark_Mode_Turns_On\"><\/span>What Happens to Your Email When Dark Mode Turns On?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p class=\"wp-block-paragraph\">It depends on the client. A dark mode email might keep its original colors, get partially inverted, or get fully inverted. I&#8217;d treat these as three patterns to test, not rules tied to specific apps (apps change their behavior more often than you&#8217;d like):<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>No change:<\/strong> your light design shows up exactly as you built it, even inside a dark interface.<\/li>\n<li><strong>Partial inversion:<\/strong> light backgrounds get darker and dark text gets lighter. Dark areas stay put.<\/li>\n<li><strong>Full inversion:<\/strong> every color flips. Yes, including the brand colors you picked on purpose.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Images play by different rules. The client recolors HTML backgrounds and fonts, but it usually leaves image pixels alone. So your transparent logo ends up sitting on a background you never chose. Design for the worst case. Not the best one.<\/p>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Does_a_Transparent_Logo_Disappear_in_Dark_Mode\"><\/span>Why Does a Transparent Logo Disappear in Dark Mode?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p class=\"wp-block-paragraph\">A transparent logo vanishes in dark mode because its dark pixels land right on the dark background the client adds behind it. Where your design had white, the reader now sees near-black, and black lettering just melts into it. You&#8217;ve got three reliable ways to keep a logo visible in a dark mode email:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Add a thin light outline or a soft glow around dark lettering, so it pops off any background.<\/li>\n<li>Build a solid, padded shape into the image itself, like a light rounded box or badge behind the mark.<\/li>\n<li>Keep a separate light version of the logo and swap it in with a dark mode media query, where the client supports one.<\/li>\n<\/ol>\n\n<p class=\"wp-block-paragraph\">None of these is free. An outline changes the brand mark a little. A solid box can look like a sticker in light mode. And the swap only works where CSS overrides are honoured. Same logic goes for icons, social media glyphs and any graphic with dark text in it. Naj\u0142atwiej przeoczy\u0107 to w <a href=\"https:\/\/www.mailcraft.eu\/pl\/automatyzacja-maili-oparta-na-datach-odnowienia-urodziny\/\">automatycznych mailach opartych na datach<\/a>, bo ich szablon dzia\u0142a miesi\u0105cami bez ponownego sprawdzania.<\/p>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Keep_Email_Buttons_Readable_When_Colors_Are_Inverted\"><\/span>How to Keep Email Buttons Readable When Colors Are Inverted<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p class=\"wp-block-paragraph\">Build buttons from live HTML text and background colors, not images. That way the client can recolor the label and the fill together and keep the contrast between them. But even with live HTML, inverted email colors can still go sideways. A client might lighten the text and leave the fill alone. Or turn your brand color into something that&#8217;s definitely not on-brand.<\/p>\n\n<p class=\"wp-block-paragraph\">My advice? Pick mid-tone brand colors that hold contrast in both schemes. Pure black and pure white invert the hardest, so skip them. A border in a contrasting color keeps the button edge visible on a dark background. And avoid image buttons with baked-in text. If you really can&#8217;t (it happens), give the image a solid background and alt text that describes the action, such as &#8222;Download the report&#8221;.<\/p>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_prefers-color-scheme_in_Email_to_Control_Dark_Mode_Styles\"><\/span>Using prefers-color-scheme in Email to Control Dark Mode Styles<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p class=\"wp-block-paragraph\">The prefers-color-scheme media query lets you set your own dark palette instead of leaving it to the client&#8217;s automatic inversion. As the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/At-rules\/@media\/prefers-color-scheme\" rel=\"nofollow noopener\" target=\"_blank\">MDN reference on prefers-color-scheme<\/a> explains, the usual pattern is a light color scheme by default plus a <em>prefers-color-scheme: dark<\/em> block that overrides it. The reverse works too.<\/p>\n\n<p class=\"wp-block-paragraph\">Inside that block you override background colors, text colors, link colors and button fills, and you toggle which logo version shows up. Here&#8217;s the catch, though. Support for prefers-color-scheme in email varies from client to client. So treat the query as an extra layer on top of assets that already survive without it. The <em>color-scheme<\/em> and <em>supported-color-schemes<\/em> meta tags can tell the client that your email ships its own dark styles.<\/p>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dark_Mode_Email_Design_Checklist_Before_You_Hit_Send\"><\/span>Dark Mode Email Design Checklist Before You Hit Send<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p class=\"wp-block-paragraph\">Before any template goes out, run it through a short checklist for logos, buttons, text and images, in light and in dark:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>The logo is readable on white and on near-black.<\/li>\n<li>No transparent image has dark text without an outline or solid backing.<\/li>\n<li>Buttons are built in HTML with a contrasting border.<\/li>\n<li>Body text isn&#8217;t pure black on pure white.<\/li>\n<li>Dark mode overrides are defined for backgrounds, text, links and buttons.<\/li>\n<li>Every image has meaningful alt text.<\/li>\n<\/ol>\n\n<p class=\"wp-block-paragraph\">Test each email against all three patterns (no change, partial inversion, full inversion) on real devices and in the clients your list actually uses. Dark mode bugs tend to show up next to mobile ones, so while you&#8217;re at it, check the layout against <a href=\"https:\/\/www.mailcraft.eu\/simple-steps-to-design-mobile-responsive-emails\/\">responsive email design basics<\/a>.<\/p>\n\n<p class=\"wp-block-paragraph\">And don&#8217;t try to fix everything with images. The text-to-image balance affects filtering, and <a href=\"https:\/\/www.mailcraft.eu\/twelve-reasons-emails-land-spam\/\">image-heavy emails and spam<\/a> go hand in hand. In MailCraft you can build and tweak layouts with <a href=\"https:\/\/www.mailcraft.eu\/features\/\">responsive templates with live preview<\/a>, then run the dark mode checks on test sends.<\/p>\n\n<p class=\"wp-block-paragraph\">The main rule of dark mode email design is simple. Make assets that survive any background, then add overrides where the client respects them. Start with the logo. Then the buttons. Then run the checklist on your next newsletter. Want more on template work? Browse our <a href=\"https:\/\/www.mailcraft.eu\/category\/email-templates-design\/\">guides to email design<\/a>.<\/p>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1790304639062-0\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Should_I_use_a_transparent_PNG_logo_in_email\"><\/span>Should I use a transparent PNG logo in email?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Only if the mark stays readable on both light and dark backgrounds. A dark logo on a transparent background can disappear once the client darkens the area behind it. If that happens, add a light outline or put the logo on a solid, padded shape inside the image.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1790304639062-1\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Can_I_stop_email_clients_from_inverting_my_colors\"><\/span>Can I stop email clients from inverting my colors?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Not reliably, no. Where it&#8217;s supported, you can define your own dark styles with prefers-color-scheme, so the client uses your palette instead of its own. Everywhere else, you&#8217;re relying on assets built to survive inversion.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1790304639062-2\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"How_do_I_test_a_dark_mode_email\"><\/span>How do I test a dark mode email?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Send test messages to real accounts with dark mode turned on, on the devices and clients your subscribers actually use. Check the result against all three inversion patterns. For each one, look at the logo, the buttons and the text contrast before you approve the send.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Good dark mode email design comes down to one thing: every logo and button has to stay readable on a light background and on a dark one. Then you test the layout against each way a client might invert your&#8230;<\/p>\n","protected":false},"author":1,"featured_media":12618,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"categories":[235,505],"tags":[],"class_list":["post-12634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bez-kategorii","category-szablony-i-projektowanie-e-maili"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/dark-mode-email-design-logos-buttons-992.jpg",1200,900,false],"thumbnail":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/dark-mode-email-design-logos-buttons-992-150x150.jpg",150,150,true],"medium":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/dark-mode-email-design-logos-buttons-992-300x225.jpg",300,225,true],"medium_large":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/dark-mode-email-design-logos-buttons-992-768x576.jpg",768,576,true],"large":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/dark-mode-email-design-logos-buttons-992-1024x768.jpg",1024,768,true],"1536x1536":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/dark-mode-email-design-logos-buttons-992.jpg",1200,900,false],"2048x2048":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/dark-mode-email-design-logos-buttons-992.jpg",1200,900,false],"blog-featured":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/dark-mode-email-design-logos-buttons-992-1200x534.jpg",1200,534,true],"woocommerce_thumbnail":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/dark-mode-email-design-logos-buttons-992-300x300.jpg",300,300,true],"woocommerce_single":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/dark-mode-email-design-logos-buttons-992-600x450.jpg",600,450,true],"woocommerce_gallery_thumbnail":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/dark-mode-email-design-logos-buttons-992-100x100.jpg",100,100,true]},"uagb_author_info":{"display_name":"Krzysztof Balicki","author_link":"https:\/\/www.mailcraft.eu\/pl\/author\/websystems\/"},"uagb_comment_info":0,"uagb_excerpt":"Good dark mode email design comes down to one thing: every logo and button has to stay readable on a light background and on a dark one. Then you test the layout against each way a client might invert your...","_links":{"self":[{"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/posts\/12634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/comments?post=12634"}],"version-history":[{"count":3,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/posts\/12634\/revisions"}],"predecessor-version":[{"id":12664,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/posts\/12634\/revisions\/12664"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/media\/12618"}],"wp:attachment":[{"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/media?parent=12634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/categories?post=12634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/tags?post=12634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}