Skip to content

Commit

Permalink
Merge pull request #273 from TedGoas/dark-mode
Browse files Browse the repository at this point in the history 
Dark Mode Support
  • Loading branch information
@TedGoas
TedGoas authored Dec 2, 2021
2 parents a2318a2 + adc0636 commit 71f2665
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 34 deletions.
54 changes: 45 additions & 9 deletions cerberus-fluid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,42 @@

}

/* Dark Mode Styles : BEGIN */
@media (prefers-color-scheme: dark) {
.email-bg {
background: #111111 !important;
}
.darkmode-bg {
background: #222222 !important;
}
h1,
h2,
h3,
p,
li,
.darkmode-text,
.email-container a:not([class]) {
color: #F7F7F9 !important;
}
td.button-td-primary,
td.button-td-primary a {
background: #ffffff !important;
border-color: #ffffff !important;
color: #222222 !important;
}
td.button-td-primary:hover,
td.button-td-primary a:hover {
background: #cccccc !important;
border-color: #cccccc !important;
}
.footer td {
color: #aaaaaa !important;
}
.darkmode-fullbleed-bg {
background-color: #0F3016 !important;
}
}
/* Dark Mode Styles : END */
</style>
<!-- Progressive Enhancements : END -->

Expand All @@ -188,10 +224,10 @@
2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
3. mso conditional: For Windows 10 Mail
-->
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;">
<center role="article" aria-roledescription="email" lang="en" style="width: 100%; background-color: #222222;">
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;" class="email-bg">
<center role="article" aria-roledescription="email" lang="en" style="width: 100%; background-color: #222222;" class="email-bg">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #222222;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #222222;" class="email-bg">
<tr>
<td>
<![endif]-->
Expand Down Expand Up @@ -233,15 +269,15 @@

<!-- Hero Image, Flush : BEGIN -->
<tr>
<td style="background-color: #ffffff;">
<td style="background-color: #ffffff;" class="darkmode-bg">
<img src="https://via.placeholder.com/1200x600" width="600" height="" alt="alt_text" border="0" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto; display: block;" class="g-img">
</td>
</tr>
<!-- Hero Image, Flush : END -->

<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td style="background-color: #ffffff;">
<td style="background-color: #ffffff;" class="darkmode-bg">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
Expand Down Expand Up @@ -280,7 +316,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he

<!-- 2 Even Columns : BEGIN -->
<tr>
<td style="padding: 0 10px 40px 10px; background-color: #ffffff;">
<td style="padding: 0 10px 40px 10px; background-color: #ffffff;" class="darkmode-bg">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="50%">
Expand Down Expand Up @@ -327,7 +363,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he

<!-- 1 Column Text : BEGIN -->
<tr>
<td style="background-color: #ffffff;">
<td style="background-color: #ffffff;" class="darkmode-bg">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
Expand All @@ -343,7 +379,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
<!-- Email Body : END -->

<!-- Email Footer : BEGIN -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;" class="footer">
<tr>
<td style="padding: 20px; font-family: sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #ffffff;">
<webversion style="color: #ffffff; text-decoration: underline; font-weight: bold;">View as a Web Page</webversion>
Expand All @@ -364,7 +400,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
</div>

<!-- Full Bleed Background Section : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #709f2b;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #709f2b;" class="darkmode-fullbleed-bg">
<tr>
<td>
<div align="center" style="max-width: 600px; margin: auto;" class="email-container">
Expand Down
60 changes: 48 additions & 12 deletions cerberus-hybrid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,42 @@
}
}

/* Dark Mode Styles : BEGIN */
@media (prefers-color-scheme: dark) {
.email-bg {
background: #111111 !important;
}
.darkmode-bg {
background: #222222 !important;
}
h1,
h2,
h3,
p,
li,
.darkmode-text,
.email-container a:not([class]) {
color: #F7F7F9 !important;
}
td.button-td-primary,
td.button-td-primary a {
background: #ffffff !important;
border-color: #ffffff !important;
color: #222222 !important;
}
td.button-td-primary:hover,
td.button-td-primary a:hover {
background: #cccccc !important;
border-color: #cccccc !important;
}
.footer td {
color: #aaaaaa !important;
}
.darkmode-fullbleed-bg {
background-color: #0F3016 !important;
}
}
/* Dark Mode Styles : END */
</style>
<!-- Progressive Enhancements : END -->

Expand All @@ -210,10 +246,10 @@
2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
3. mso conditional: For Windows 10 Mail
-->
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;">
<center role="article" aria-roledescription="email" lang="en" style="width: 100%; background-color: #222222;">
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;" class="email-bg">
<center role="article" aria-roledescription="email" lang="en" style="width: 100%; background-color: #222222;" class="email-bg">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #222222;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #222222;" class="email-bg">
<tr>
<td>
<![endif]-->
Expand Down Expand Up @@ -256,15 +292,15 @@

<!-- Hero Image, Flush : BEGIN -->
<tr>
<td style="background-color: #ffffff;">
<td style="background-color: #ffffff;" class="darkmode-bg">
<img src="https://via.placeholder.com/1360x600" width="680" height="" alt="alt_text" border="0" style="width: 100%; max-width: 680px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto; display: block;" class="g-img">
</td>
</tr>
<!-- Hero Image, Flush : END -->

<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td style="background-color: #ffffff;">
<td style="background-color: #ffffff;" class="darkmode-bg">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
Expand Down Expand Up @@ -335,7 +371,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;

<!-- 2 Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px; background-color: #ffffff;">
<td align="center" valign="top" style="font-size:0; padding: 10px; background-color: #ffffff;" class="darkmode-bg">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
Expand Down Expand Up @@ -396,7 +432,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;

<!-- 3 Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px; background-color: #ffffff;">
<td align="center" valign="top" style="font-size:0; padding: 10px; background-color: #ffffff;" class="darkmode-bg">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
Expand Down Expand Up @@ -482,7 +518,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
<!-- Thumbnail Left, Text Right : BEGIN -->
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px; background-color: #ffffff;">
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px; background-color: #ffffff;" class="darkmode-bg">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="660" style="width: 660px;">
<tr>
Expand Down Expand Up @@ -532,7 +568,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
<!-- Thumbnail Right, Text Left : BEGIN -->
<tr>
<!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="rtl" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px; text-align: left; background-color: #ffffff;">
<td dir="rtl" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px; text-align: left; background-color: #ffffff;" class="darkmode-bg">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="660" style="width: 660px;">
<tr>
Expand Down Expand Up @@ -589,7 +625,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he

<!-- 1 Column Text : BEGIN -->
<tr>
<td style="background-color: #ffffff;">
<td style="background-color: #ffffff;" class="darkmode-bg">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
Expand All @@ -605,7 +641,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
<!-- Email Body : END -->

<!-- Email Footer : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 680px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 680px;" class="footer">
<tr>
<td style="padding: 20px; font-family: sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #ffffff;">
<webversion style="color: #ffffff; text-decoration: underline; font-weight: bold;">View as a Web Page</webversion>
Expand All @@ -626,7 +662,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
</div>

<!-- Full Bleed Background Section : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #709f2b;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #709f2b;" class="darkmode-fullbleed-bg">
<tr>
<td>
<div align="center" style="max-width: 680px; margin: auto;" class="email-container">
Expand Down
Loading

0 comments on commit 71f2665

Please # to comment.