diff --git a/src/assets/emails/genericTemplate.html b/src/assets/emails/genericTemplate.html index 059468e..c0539ea 100644 --- a/src/assets/emails/genericTemplate.html +++ b/src/assets/emails/genericTemplate.html @@ -1,5 +1,7 @@ - + + @@ -8,7 +10,7 @@ :root { color-scheme: light dark; - supported-color-schemes:light dark; + supported-color-schemes: light dark; } @media (prefers-color-scheme: light) { @@ -32,15 +34,18 @@ font-weight: 700 !important; text-decoration: underline !important; } - td.primary, td.primary a { + td.primary, + td.primary a { background-color: #9D6FF3 !important; color: #fff !important; } - td.secondary, td.secondary a { + td.secondary, + td.secondary a { background-color: #D9C6FA !important; color: #45297A !important; } - td.primary a, td.secondary a { + td.primary a, + td.secondary a { text-decoration: none !important; } td.notice { @@ -50,7 +55,8 @@ color: #fff !important; font-weight: 700 !important; } - strong, b { + strong, + b { font-weight: 700 !important; color: #9D6FF3 !important; } @@ -90,7 +96,8 @@ background-color: #373C65 !important; color: #fff !important; } - td.primary a, td.secondary a { + td.primary a, + td.secondary a { text-decoration: none !important; } td.signature { @@ -102,7 +109,8 @@ td.notice a { color: #fff !important; } - strong, b { + strong, + b { font-weight: 700 !important; color: #fff !important; } @@ -111,16 +119,79 @@ content: url("https://assets.pretendo.cc/images/wordmark-purple-white.png") !important; } } - - + + /* the following specifically targets gmail, because it doesn't support media queries and automatically inverts colors */ + u+.email-body, + u+.email-body table.centerer, + u+.email-body table.wrapper { + background-color: #1B1F3B !important; + background-image: linear-gradient(#1B1F3B, #1B1F3B) !important; + color: #fff !important; + } + u+.email-body table.card { + background-color: #23274A !important; + background-image: linear-gradient(#23274A, #23274A) !important; + } + u+.email-body span.shoutout { + color: #fff !important; + } + u+.email-body td { + color: #fff !important; + } + u+.email-body td a { + color: #673DB6 !important; + font-weight: 700 !important; + text-decoration: underline !important; + } + u+.email-body td.primary, + u+.email-body td.primary a { + background-color: #9D6FF3 !important; + background-image: linear-gradient(#9D6FF3, #9D6FF3) !important; + color: #fff !important; + } + u+.email-body td.secondary, + u+.email-body td.secondary a { + background-color: #373C65 !important; + background-image: linear-gradient(#373C65, #373C65) !important; + color: #fff !important; + } + u+.email-body td.primary a, + u+.email-body td.secondary a { + text-decoration: none !important; + } + u+.email-body td.notice { + color: #fff !important; + } + u+.email-body td.notice a { + color: #fff !important; + font-weight: 700 !important; + } + u+.email-body strong, + u+.email-body b { + font-weight: 700 !important; + color: #fff !important; + } + u+.email-body .gmail-s { + background: #000 !important; + mix-blend-mode: screen !important; + } + u+.email-body .gmail-d { + background: #000 !important; + mix-blend-mode: difference !important; + } - + +
- + +
- +
@@ -137,8 +208,9 @@ @@ -146,7 +218,8 @@ `; break; case 'header': this.parseReplacements(c); - innerHTML += `\n`; + el = this.addGmailDarkModeFix(c.text); + innerHTML += `\n`; break; case 'paragraph': this.parseReplacements(c); - innerHTML += `\n`; + el = this.addGmailDarkModeFix(c.text); + innerHTML += `\n`; break; case 'button': - innerHTML += `\n`; + el = this.addGmailDarkModeFix(c.text); + innerHTML += `\n`; break; } });
- - + +
- +
+ + + @@ -176,7 +255,15 @@ @@ -196,5 +283,7 @@
  @@ -154,11 +227,17 @@ -
 
 
- The Pretendo Network team +
+
+ The Pretendo Network team +
+
- Note: this email message was auto-generated, please do not respond. For further assistance, please join our Discord server or make a post on our Forum. +
+
+ Note: this email message was auto-generated, please do not respond. For further + assistance, please join our Discord server or make a + post on our Forum. +
+
+ + \ No newline at end of file diff --git a/src/mailer.ts b/src/mailer.ts index 6734011..6f46b7b 100644 --- a/src/mailer.ts +++ b/src/mailer.ts @@ -94,6 +94,10 @@ export class CreateEmail { return this; } + private addGmailDarkModeFix(el: string): string { + return `
${el}
`; + } + // parses pnid name and links. set the plaintext bool (false by default) to use no html private parseReplacements(c: emailComponent, plainText: boolean = false): void { // for now only replaces the pnid for shoutouts. could easily be expanded to add more. @@ -126,20 +130,24 @@ export class CreateEmail { let innerHTML = ''; this.componentArray.forEach((c) => { + let el = ''; switch (c.type) { case 'padding': innerHTML += `\n
 
${c.text}
${el}
${c.text}
${el}
${c.text}
${el}