- Newsletter
- Promotional
- and Announcement
Dark Mode Tech Newsletter email template
A dark-first tech newsletter: cyan rule, chip illustration, a lead story with button, two side-by-side stories, quick links and social icons.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Dark Mode Tech Newsletter</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
.ete-cell{padding-left:0!important;padding-right:0!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#050607!important;}
.ete-content{background-color:#0b0d10!important;}
.ete-text{color:#c9ced8!important;}
.ete-heading{color:#f5f7fa!important;}
.ete-muted{color:#8a919e!important;}
.ete-link{color:#4fe0f5!important;}
.ete-border{border-color:#1c2027!important;}
.ete-panel{background-color:#13161c!important;border-color:#1c2027!important;}
.ete-btn{background-color:#22d3ee!important;border-color:#22d3ee!important;}
.ete-btn-text{color:#04141a!important;}
.ete-btn-outline{border-color:#22d3ee!important;}
.ete-btn-outline-text{color:#22d3ee!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#c9ced8!important;}
[data-ogsc] .ete-heading{color:#f5f7fa!important;}
[data-ogsc] .ete-muted{color:#8a919e!important;}
[data-ogsc] .ete-link{color:#4fe0f5!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#050607!important;}
[data-ogsb] .ete-content{background-color:#0b0d10!important;}
[data-ogsb] .ete-panel{background-color:#13161c!important;border-color:#1c2027!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#0a0b0e;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Chip supply tightens, AI helpers get cheaper and four quick links. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#0a0b0e;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="640" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="640" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:640px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#0f1115;border-radius:8px;overflow:hidden;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="left" class="ete-px" style="padding:28px 32px 20px;"><span class="ete-heading" style="font-family:Verdana, Geneva, sans-serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;color:#f5f7fa;">Byteline</span><div class="ete-muted" style="padding-top:6px;font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:16px;letter-spacing:2px;text-transform:uppercase;color:#8a919e;">The week in tech, in ten minutes</div></td></tr>
<tr><td class="ete-px" style="padding:0px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="" style="border-top:1px solid #22d3ee;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="" style="padding:0;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/byteline-hero.png" alt="A glowing cyan computer chip with a rising line chart on a dark circuit board" width="640" height="299" class="ete-fluid" style="display:block;width:640px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></td></tr>
<tr><td align="left" class="ete-px" style="padding:40px 32px;"><p style="margin:0 0 12px;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#22d3ee;text-align:left;">Top story</p><h1 class="ete-heading ete-h1" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:32px;line-height:40px;font-weight:700;color:#f5f7fa;text-align:left;mso-line-height-rule:exactly;">Chip supply is getting tight again</h1><p class="ete-text" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:27px;color:#c9ced8;padding-top:14px;text-align:left;">Three big makers say orders for 2027 are already booked. Here is what that means for laptop prices and why phones are safe for now.</p><div style="padding-top:24px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/stories/chip-supply" style="height:48px;v-text-anchor:middle;width:190px;" arcsize="8%" strokecolor="#22d3ee" fillcolor="#22d3ee"><w:anchorlock/><center style="color:#04141a;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read the story</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/stories/chip-supply" style="display:inline-block;background-color:#22d3ee;border:1px solid #22d3ee;line-height:48px;border-radius:4px;color:#04141a;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-text" style="color:#04141a;">Read the story</span></a><!--<![endif]--></td></tr></table></div></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#f5f7fa;text-align:left;mso-line-height-rule:exactly;">Also this week</h2></td></tr>
<tr><td class="ete-px" style="padding:12px 20px 0;"><div style="font-size:0;text-align:left;display:flex;flex-wrap:wrap;"><!--[if mso]><table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td width="265" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:44.16%;max-width:100%;width:44.16%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:flex-start;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 12px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/byteline-ai.png" alt="A friendly cyan robot head on a dark background" width="241" height="181" class="ete-fluid-cap" style="display:block;width:241px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"></td></tr></table></div><!--[if mso]></td><td width="335" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:55.83%;max-width:100%;width:55.83%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 12px 16px;"><h3 class="ete-heading" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#f5f7fa;text-align:left;mso-line-height-rule:exactly;">AI helpers get cheaper</h3><p class="ete-text" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:24px;color:#c9ced8;padding-top:8px;">Two large providers cut prices by half. We tested which ones are worth it for small teams.</p><div style="padding-top:16px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/stories/ai-prices" style="height:48px;v-text-anchor:middle;width:160px;" arcsize="8%" strokecolor="#22d3ee" fillcolor="#22d3ee"><w:anchorlock/><center style="color:#04141a;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read more</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/stories/ai-prices" style="display:inline-block;background-color:#22d3ee;border:1px solid #22d3ee;line-height:48px;border-radius:4px;color:#04141a;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-text" style="color:#04141a;">Read more</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:12px 20px 0;"><div dir="rtl" style="font-size:0;text-align:left;display:flex;flex-wrap:wrap;"><!--[if mso]><table role="presentation" width="600" dir="rtl" cellpadding="0" cellspacing="0" border="0"><tr><td width="265" valign="middle"><![endif]--><div class="ete-stack" dir="ltr" style="display:inline-block;vertical-align:middle;min-width:44.16%;max-width:100%;width:44.16%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:flex-start;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 12px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/byteline-chip.png" alt="A purple memory module next to a dark panel" width="241" height="181" class="ete-fluid-cap" style="display:block;width:241px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"></td></tr></table></div><!--[if mso]></td><td width="335" valign="middle"><![endif]--><div class="ete-stack" dir="ltr" style="display:inline-block;vertical-align:middle;min-width:55.83%;max-width:100%;width:55.83%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 12px 16px;"><h3 class="ete-heading" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#f5f7fa;text-align:left;mso-line-height-rule:exactly;">Memory you can upgrade</h3><p class="ete-text" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:24px;color:#c9ced8;padding-top:8px;">A new laptop standard brings back swappable memory. Repair shops are happy.</p><div style="padding-top:16px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/stories/memory" style="height:48px;v-text-anchor:middle;width:160px;" arcsize="8%" strokecolor="#22d3ee" fillcolor="#22d3ee"><w:anchorlock/><center style="color:#04141a;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read more</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/stories/memory" style="display:inline-block;background-color:#22d3ee;border:1px solid #22d3ee;line-height:48px;border-radius:4px;color:#04141a;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-text" style="color:#04141a;">Read more</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h3 class="ete-heading" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#f5f7fa;text-align:left;mso-line-height-rule:exactly;">Quick links</h3></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:24px;color:#c9ced8;text-align:left;"><a class="ete-link" style="color:#22d3ee;text-decoration:underline;" href="https://example.com/q/1">A browser that blocks cookie banners</a>, tested for a week<br>
<a class="ete-link" style="color:#22d3ee;text-decoration:underline;" href="https://example.com/q/2">Open-source maps hit a milestone</a>, 10 million edits<br>
<a class="ete-link" style="color:#22d3ee;text-decoration:underline;" href="https://example.com/q/3">Why your router needs a reboot</a>, a short guide<br>
<a class="ete-link" style="color:#22d3ee;text-decoration:underline;" href="https://example.com/q/4">The quiet return of the headphone jack</a></p></td></tr>
<tr><td align="left" class="ete-px" style="padding:16px 32px;"><a class="ete-text ete-border" href="https://x.com/" style="display:inline-block;margin:4px;padding:6px 14px;border:1px solid #1f232b;border-radius:999px;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:18px;font-weight:700;color:#c9ced8;text-decoration:none;">X</a><a class="ete-text ete-border" href="https://linkedin.com/" style="display:inline-block;margin:4px;padding:6px 14px;border:1px solid #1f232b;border-radius:999px;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:18px;font-weight:700;color:#c9ced8;text-decoration:none;">LinkedIn</a><a class="ete-text ete-border" href="https://example.com/" style="display:inline-block;margin:4px;padding:6px 14px;border:1px solid #1f232b;border-radius:999px;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:18px;font-weight:700;color:#c9ced8;text-decoration:none;">Website</a></td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:21px;color:#8a919e;line-height:20px;text-align:left;"><strong>Byteline Media</strong><br>600 Circuit Avenue, Floor 4, Austin, TX 78701</p><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:21px;color:#8a919e;line-height:20px;text-align:left;padding-top:10px;">You get this email because you subscribed to Byteline.</p><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:21px;color:#8a919e;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#8a919e;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:18px;color:#8a919e;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#8a919e;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Colorlib Email Templates by Colorlib, MIT license.
About this template
This newsletter is dark from the start, which suits tech media, developer tools and gadget blogs. Near-black with cyan accents gives it a sharp, late-night feel.
The masthead and a thin cyan line open the issue. A glowing chip illustration leads into the top story with a short summary and a read button. Two more stories follow as picture and text rows that switch sides, so the page has rhythm. A quick links list collects four short items with one line each. Social icons and the footer close it.
Dark designs need care: keep body text light grey, not pure white, and test your logo on a dark background. Send it early in the morning, when many readers check news before work.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Masthead
- Cyan rule
- Chip hero
- Top story
- Two story rows
- Quick links
- Social links
- Footer
Subject line ideas
- Byteline: the chip shortage is back
- This week in tech, in ten minutes
- AI helpers, new chips and four quick links
Preview text idea
Chip supply tightens, AI helpers get cheaper and four quick links.