Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Dark Mode Support #273

Merged
merged 2 commits into from
Dec 2, 2021
Merged

Dark Mode Support #273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d6c9a10
Darm Mode CSS, initial commit
TedGoas Nov 12, 2021
adc0636
Rename darkmode classes to be more like utility classes
TedGoas Nov 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 45 additions & 9 deletions cerberus-fluid.html
View file
Open in desktop
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
Open in desktop
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