"Dark mode" e-mail – Pomagalnik

“Dark mode” izzivi v e-mailih so še ena točka v dolgih seznamih e-mail razvijalcev na katere morajo paziti. Največji izzivi so nekonsistentno oblikovanje, dostopnost, izguba informacij, …

Generalno je največja težava pri pripravi e-mailov, da slednji nimajo standardnega postopka, ki bi pokril vse e-mailing odjemalce. Zaradi tega lahko uporabnik dobi popačen oz. malo drugačen e-mail na svojem pregledovalniku pošte, kot drugi uporabniki. Določeni elementi se obnašajo drugače v Outlooku, Gmailu, webmailu in ostalih odjemalcih. Na izbiro imamo široko paleto izdelkov, storitev ali celo butičnih rešitev za ustvarjanje in pošiljanje e-mailov. Katero pot izberemo je seveda odvisno od potreb in sredstev, ki jih imamo na voljo. V vseh primerih je potrebno upoštevati to, da se tehnologija in pravila prikazovanja elektronske pošte hitro spreminjajo, zato je potrebno izbran sistem konstanto nadgrajevati.

Eno novejših področji je tudi “dark mode” način. Po nekaterih podatkih preko 80% uporabnikov mobilnih naprav uporablja “dark mode” obliko, zato je prilagoditev e-mailov nujna zadeva. Sam na blogu uporabljam Mailchimp storitev v brezplačni obliki. Težava brezplačne oblike pa je ta, da so določene storitve zaprte. Ena takšnih je tudi vpeljava lastnih e-mailov, zato je potrebno poiskati druge načine, postati je potrebno raziskovalen in se posvetiti testiranju.

Primer “dark mode” oblike pred prilagoditvijo. iOS e-mail klient in iOS Outlook klient.

Mailchimp “dark mode” način v brezplačni obliki

Ker lastne kode oz. matrice ne moremo uvoziti v obstoječo dodamo modul za kodo in dodamo vanj CSS kodo za “dark mode”. S tem uredimo osnovne težave, ki jih imamo v “dark modu”.

Primer:

@media (prefers-color-scheme: dark) {
		#templateBody{
			background-image: url(".../fe1a7729-58e2-1234-f8df-dabe7a62e0db.png") !important;
		}
		body, #bodyTable, #templatePreheader, #templateHeader, #templateBody, #templateFooter {
			background-color:#2D2D2D !important;
		}
		.mcnTextContent{
			color: #9e9e9e !important;
		}
		.bgbody {
		 	background-color: #2D2D2D !important;
    		color: #9e9e9e !important;
		}
		.Extratext, .Awhite{
			color: #7D7D7D !important;
		}
		.Atitle, .mc-toc-title {
			color: #ededed !important;
		}
		.mcnImage { 
			display: none !important; 
		}
		.mcnImageDark { 
			display: inline !important; 
		}
		.mcnDividerContent{
			border-top: 1px solid #7D7D7D !important;
		}

Težave ostanejo pri povezavah in slikah. Namreč določene slike se ne prikazujejo dobro zato jih je potrebno zamenjati. Zato uporabim kodo, ki v “light” obliki prikaže eno sliko inj drugo v “dark mode” obliki. Na povezave v e-mailu pa dodam dodaten “class”, ki ga lahko ciljam preko dodane CSS kode.