Implement dark mode styles for email layout and templates

Author: MrPunyapal

src/Illuminate/Mail/resources/views/html/layout.blade.php

@@ -8,77 +8,9 @@
 <meta name="supported-color-schemes" content="light dark">
 <style>
 @media (prefers-color-scheme: dark) {
-body,
-.wrapper,
-.body {
-background-color: #18181b !important;
-}
-
-.inner-body {
-background-color: #27272a !important;
-border-color: #3f3f46 !important;
-}
-
-p,
-ul,
-ol,
-blockquote,
-span,
-td {
-color: #e4e4e7 !important;
-}
-
-a {
-color: #a5b4fc !important;
-}
-
-h1,
-h2,
-h3,
-.header a {
-color: #fafafa !important;
-}
-
 .logo {
     filter: invert(23%) sepia(5%) saturate(531%) hue-rotate(202deg) brightness(96%) contrast(91%) !important;
 }
-
-.footer p,
-.footer a {
-color: #71717a !important;
-}
-
-.panel-content {
-background-color: #3f3f46 !important;
-}
-
-.panel-content p {
-color: #e4e4e7 !important;
-}
-
-.subcopy {
-border-top-color: #3f3f46 !important;
-}
-
-.table th {
-border-bottom-color: #3f3f46 !important;
-}
-}
-
-@media only screen and (max-width: 600px) {
-.inner-body {
-width: 100% !important;
-}
-
-.footer {
-width: 100% !important;
-}
-}
-
-@media only screen and (max-width: 500px) {
-.button {
-width: 100% !important;
-}
 }
 </style>
 {!! $head ?? '' !!}

src/Illuminate/Mail/resources/views/html/themes/default.css

@@ -1,5 +1,9 @@
 /* Base */
 
+:root {
+    color-scheme: light dark;
+}
+
 body,
 body *:not(html):not(style):not(br):not(tr):not(code) {
     box-sizing: border-box;
@@ -10,8 +14,8 @@ body *:not(html):not(style):not(br):not(tr):not(code) {
 
 body {
     -webkit-text-size-adjust: none;
-    background-color: #ffffff;
-    color: #52525b;
+    background-color: light-dark(#ffffff, #18181b);
+    color: light-dark(#52525b, #e4e4e7);
     height: 100%;
     line-height: 1.4;
     margin: 0;
@@ -23,12 +27,13 @@ p,
 ul,
 ol,
 blockquote {
+    color: light-dark(#52525b, #e4e4e7);
     line-height: 1.4;
     text-align: left;
 }
 
 a {
-    color: #18181b;
+    color: light-dark(#18181b, #a5b4fc);
 }
 
 a img {
@@ -38,21 +43,23 @@ a img {
 /* Typography */
 
 h1 {
-    color: #18181b;
+    color: light-dark(#18181b, #fafafa);
     font-size: 18px;
     font-weight: bold;
     margin-top: 0;
     text-align: left;
 }
 
 h2 {
+    color: light-dark(#18181b, #fafafa);
     font-size: 16px;
     font-weight: bold;
     margin-top: 0;
     text-align: left;
 }
 
 h3 {
+    color: light-dark(#18181b, #fafafa);
     font-size: 14px;
     font-weight: bold;
     margin-top: 0;
@@ -80,7 +87,7 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    background-color: #fafafa;
+    background-color: light-dark(#fafafa, #18181b);
     margin: 0;
     padding: 0;
     width: 100%;
@@ -103,7 +110,7 @@ img {
 }
 
 .header a {
-    color: #18181b;
+    color: light-dark(#18181b, #fafafa);
     font-size: 19px;
     font-weight: bold;
     text-decoration: none;
@@ -125,9 +132,9 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    background-color: #fafafa;
-    border-bottom: 1px solid #fafafa;
-    border-top: 1px solid #fafafa;
+    background-color: light-dark(#fafafa, #18181b);
+    border-bottom: 1px solid light-dark(#fafafa, #18181b);
+    border-top: 1px solid light-dark(#fafafa, #18181b);
     margin: 0;
     padding: 0;
     width: 100%;
@@ -137,8 +144,8 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 570px;
-    background-color: #ffffff;
-    border-color: #e4e4e7;
+    background-color: light-dark(#ffffff, #27272a);
+    border-color: light-dark(#e4e4e7, #3f3f46);
     border-radius: 4px;
     border-width: 1px;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
@@ -154,7 +161,7 @@ img {
 /* Subcopy */
 
 .subcopy {
-    border-top: 1px solid #e4e4e7;
+    border-top: 1px solid light-dark(#e4e4e7, #3f3f46);
     margin-top: 25px;
     padding-top: 25px;
 }
@@ -176,13 +183,13 @@ img {
 }
 
 .footer p {
-    color: #a1a1aa;
+    color: light-dark(#a1a1aa, #71717a);
     font-size: 12px;
     text-align: center;
 }
 
 .footer a {
-    color: #a1a1aa;
+    color: light-dark(#a1a1aa, #71717a);
     text-decoration: underline;
 }
 
@@ -197,13 +204,13 @@ img {
 }
 
 .table th {
-    border-bottom: 1px solid #e4e4e7;
+    border-bottom: 1px solid light-dark(#e4e4e7, #3f3f46);
     margin: 0;
     padding-bottom: 8px;
 }
 
 .table td {
-    color: #52525b;
+    color: light-dark(#52525b, #e4e4e7);
     font-size: 15px;
     line-height: 18px;
     margin: 0;
@@ -272,13 +279,13 @@ img {
 }
 
 .panel-content {
-    background-color: #fafafa;
-    color: #52525b;
+    background-color: light-dark(#fafafa, #3f3f46);
+    color: light-dark(#52525b, #e4e4e7);
     padding: 16px;
 }
 
 .panel-content p {
-    color: #52525b;
+    color: light-dark(#52525b, #e4e4e7);
 }
 
 .panel-item {