Support dark mode for emails

mk0r · May 23, 2022, 6:24pm

Simple request for emails sent by Ghost to respect user’s system setting for dark mode.

mk0r · October 3, 2022, 6:14pm

Hi, I just wanted to bump this. I feel like at this point it’s been established that respecting user dark mode preferences is important, and not just for aesthetic reasons!

At night with device in dark mode it’s physically jarring to open emails or web pages that are in white background… hoping that bumping this request might help. I don’t know how to file a pull request or how to do the coding myself since I have pretty basic knowledge of html/css.

It seems nitpicky maybe but since my field is related to health/wellness respecting dark mode is important and keeps me from going all in with ghost for newsletters

Thank you

John · October 5, 2022, 8:50pm

Whether an email displays in light or dark mode is mostly dependent on your mail client. There is no way for emails to recognise or change based on dark/light mode on a computer - but mail clients that support dark mode will adapt to suit.

Eg. fastmail:

mk0r · November 3, 2022, 1:25am

Thanks so much for the reply. It’s interesting that Fastmail does that. Mac/iOS native mail apps render dark mode emails pretty often but not Ghost powered ones:

Looking at this file:

github.com

TryGhost/Ghost/blob/main/ghost/core/core/server/services/mail/templates/newsletter.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
	<head>
		<link rel="stylesheet" type="text/css" href="css/app.css">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<meta content="telephone=no" name="format-detection">
		<title>{{blog.title}}</title>
		<!--[if gte mso 9]>
		<xml>
			<o:OfficeDocumentSettings>
				<o:AllowPNG/>
				<o:PixelsPerInch>96</o:PixelsPerInch>
			</o:OfficeDocumentSettings>
		</xml>
		<![endif]-->
	</head>
	<body style="-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;box-sizing:border-box;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;min-width:100%;padding:0;text-align:left;width:100%!important">
		<style>@media only screen{html{min-height:100%;background:#FFF}}@media only screen and (max-width:620px){.small-float-center{margin:0 auto!important;float:none!important;text-align:center!important}.small-text-center{text-align:center!important}.small-text-left{text-align:left!important}.small-text-right{text-align:right!important}}@media only screen and (max-width:620px){table.body table.container .hide-for-large{display:block!important;width:auto!important;overflow:visible!important}}@media only screen and (max-width:620px){table.body table.container .row.hide-for-large{display:table!important;width:100%!important}}@media only screen and (max-width:620px){table.body table.container .show-for-large{display:none!important;width:0;mso-hide:all;overflow:hidden}}@media only screen and (max-width:620px){table.body img{width:auto!important;height:auto!important}table.body center{min-width:0!important}table.body .container{width:95%!important}table.body .column,table.body .columns{height:auto!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:0!important;padding-right:0!important}table.body .column .column,table.body .column .columns,table.body .columns .column,table.body .columns .columns{padding-left:0!important;padding-right:0!important}table.body .collapse .column,table.body .collapse .columns{padding-left:0!important;padding-right:0!important}td.small-1,th.small-1{display:inline-block!important;width:3.57143%!important}td.small-2,th.small-2{display:inline-block!important;width:7.14286%!important}td.small-3,th.small-3{display:inline-block!important;width:10.71429%!important}td.small-4,th.small-4{display:inline-block!important;width:14.28571%!important}td.small-5,th.small-5{display:inline-block!important;width:17.85714%!important}td.small-6,th.small-6{display:inline-block!important;width:21.42857%!important}td.small-7,th.small-7{display:inline-block!important;width:25%!important}td.small-8,th.small-8{display:inline-block!important;width:28.57143%!important}td.small-9,th.small-9{display:inline-block!important;width:32.14286%!important}td.small-10,th.small-10{display:inline-block!important;width:35.71428%!important}td.small-11,th.small-11{display:inline-block!important;width:39.28571%!important}td.small-12,th.small-12{display:inline-block!important;width:42.85714%!important}td.small-13,th.small-13{display:inline-block!important;width:46.42857%!important}td.small-14,th.small-14{display:inline-block!important;width:50%!important}td.small-15,th.small-15{display:inline-block!important;width:53.57143%!important}td.small-16,th.small-16{display:inline-block!important;width:57.14286%!important}td.small-17,th.small-17{display:inline-block!important;width:60.71428%!important}td.small-18,th.small-18{display:inline-block!important;width:64.28571%!important}td.small-19,th.small-19{display:inline-block!important;width:67.85714%!important}td.small-20,th.small-20{display:inline-block!important;width:71.42857%!important}td.small-21,th.small-21{display:inline-block!important;width:75%!important}td.small-22,th.small-22{display:inline-block!important;width:78.57143%!important}td.small-23,th.small-23{display:inline-block!important;width:82.14286%!important}td.small-24,th.small-24{display:inline-block!important;width:85.71429%!important}td.small-25,th.small-25{display:inline-block!important;width:89.28571%!important}td.small-26,th.small-26{display:inline-block!important;width:92.85714%!important}td.small-27,th.small-27{display:inline-block!important;width:96.42857%!important}td.small-28,th.small-28{display:inline-block!important;width:100%!important}.column td.small-28,.column th.small-28,.columns td.small-28,.columns th.small-28{display:block!important;width:100%!important}table.body td.small-offset-1,table.body th.small-offset-1{margin-left:3.57143%!important;Margin-left:3.57143%!important}tab

This file has been truncated. show original

It seems that all colors are hard-coded and there are no lines such as <meta name="color-scheme" content="dark light"> that would indicate to the client that dark mode is supported. I think Fastmail is maybe unique in overriding the styles.

mk0r · November 16, 2022, 6:53am

Just thought I would share this in case it helps:

https://responsivehtmlemail.com/dark-mode-in-html-email/