Add dark mode support for email templates and extract media queries

Author: MrPunyapal

src/Illuminate/Mail/Markdown.php

@@ -42,6 +42,13 @@ class Markdown
      */
     protected static $withSecuredEncoding = false;
 
+    /**
+     * The extracted head styles (media queries) from the theme.
+     *
+     * @var string
+     */
+    protected static $headStyles = '';
+
     /**
      * Create a new Markdown renderer instance.
      *
@@ -67,6 +74,20 @@ public function render($view, array $data = [], $inliner = null)
     {
         $this->view->flushFinderCache();
 
+        $this->view->replaceNamespace('mail', $this->htmlComponentPaths());
+
+        if ($this->view->exists($customTheme = Str::start($this->theme, 'mail.'))) {
+            $theme = $customTheme;
+        } else {
+            $theme = str_contains($this->theme, '::')
+                ? $this->theme
+                : 'mail::themes.'.$this->theme;
+        }
+
+        $themeCss = $this->view->make($theme, $data)->render();
+
+        [$inlineCss, static::$headStyles] = $this->extractMediaQueries($themeCss);
+
         $bladeCompiler = $this->view
             ->getEngineResolver()
             ->resolve('blade')
@@ -88,9 +109,7 @@ function () use ($view, $data) {
                 }
 
                 try {
-                    $contents = $this->view->replaceNamespace(
-                        'mail', $this->htmlComponentPaths()
-                    )->make($view, $data)->render();
+                    $contents = $this->view->make($view, $data)->render();
                 } finally {
                     EncodedHtmlString::flushState();
                 }
@@ -99,16 +118,8 @@ function () use ($view, $data) {
             }
         );
 
-        if ($this->view->exists($customTheme = Str::start($this->theme, 'mail.'))) {
-            $theme = $customTheme;
-        } else {
-            $theme = str_contains($this->theme, '::')
-                ? $this->theme
-                : 'mail::themes.'.$this->theme;
-        }
-
         return new HtmlString(($inliner ?: new CssToInlineStyles)->convert(
-            str_replace('\[', '[', $contents), $this->view->make($theme, $data)->render()
+            str_replace('\[', '[', $contents), $inlineCss
         ));
     }
 
@@ -289,5 +300,59 @@ public static function withoutSecuredEncoding()
     public static function flushState()
     {
         static::$withSecuredEncoding = false;
+        static::$headStyles = '';
+    }
+
+    /**
+     * Extract media queries from CSS that cannot be inlined.
+     *
+     * @param  string  $css
+     * @return array{0: string, 1: string}
+     */
+    protected function extractMediaQueries($css)
+    {
+        $mediaBlocks = '';
+        $inlineCss = '';
+        $offset = 0;
+        $length = strlen($css);
+
+        while (($pos = strpos($css, '@media', $offset)) !== false) {
+            $inlineCss .= substr($css, $offset, $pos - $offset);
+
+            $open = strpos($css, '{', $pos);
+
+            if ($open === false) {
+                break;
+            }
+
+            $braceCount = 1;
+            $i = $open + 1;
+
+            while ($i < $length && $braceCount > 0) {
+                if ($css[$i] === '{') {
+                    $braceCount++;
+                } elseif ($css[$i] === '}') {
+                    $braceCount--;
+                }
+                $i++;
+            }
+
+            $mediaBlocks .= substr($css, $pos, $i - $pos)."\n";
+            $offset = $i;
+        }
+
+        $inlineCss .= substr($css, $offset);
+
+        return [$inlineCss, $mediaBlocks];
+    }
+
+    /**
+     * Get the extracted head styles (media queries) from the theme.
+     *
+     * @return string
+     */
+    public static function getHeadStyles()
+    {
+        return static::$headStyles;
     }
 }

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

@@ -4,8 +4,8 @@
 <title>{{ config('app.name') }}</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<meta name="color-scheme" content="light">
-<meta name="supported-color-schemes" content="light">
+<meta name="color-scheme" content="light dark">
+<meta name="supported-color-schemes" content="light dark">
 <style>
 @media only screen and (max-width: 600px) {
 .inner-body {
@@ -22,6 +22,8 @@
 width: 100% !important;
 }
 }
+
+{!! \Illuminate\Mail\Markdown::getHeadStyles() !!}
 </style>
 {!! $head ?? '' !!}
 </head>

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

@@ -295,3 +295,94 @@ img {
 .break-all {
     word-break: break-all;
 }
+
+/* Dark Mode */
+
+@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;
+    }
+
+    .button-primary,
+    .button-blue {
+        background-color: #fafafa !important;
+        border-color: #fafafa !important;
+        color: #18181b !important;
+    }
+
+    .button-secondary {
+        background-color: #3f3f46 !important;
+        border-color: #3f3f46 !important;
+        color: #fafafa !important;
+    }
+
+    .button-success,
+    .button-green {
+        background-color: #22c55e !important;
+        border-color: #22c55e !important;
+        color: #fff !important;
+    }
+
+    .button-error,
+    .button-red {
+        background-color: #ef4444 !important;
+        border-color: #ef4444 !important;
+        color: #fff !important;
+    }
+
+    .footer p,
+    .footer a {
+        color: #71717a !important;
+    }
+
+    .panel {
+        border-left-color: #d4d4d8 !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;
+    }
+}