diff --git a/app/config/locale/templates/email-base-styled.tpl b/app/config/locale/templates/email-base-styled.tpl
index 37ca630d43..c47d276ea8 100644
--- a/app/config/locale/templates/email-base-styled.tpl
+++ b/app/config/locale/templates/email-base-styled.tpl
@@ -2,6 +2,38 @@
 <html>
     <head>
         <link rel="preconnect" href="https://assets.appwrite.io/" crossorigin>
+        <meta name="color-scheme" content="light dark">
+        <meta name="supported-color-schemes" content="light dark">
+        <style type="text/css">
+            :root {
+                color-scheme: light dark;
+                supported-color-schemes: light dark;
+            }
+
+            @media (prefers-color-scheme: dark ) {
+                body {
+                    color: #616b7c !important;
+                    background-color: #ffffff !important;
+                }
+                a {
+                    color: currentColor !important;
+                }
+                a.button {
+                    color: #ffffff !important;
+                    background-color: #2D2D31 !important;
+                    border-color: #414146 !important;
+                }
+                h1, h2, h3 {
+                    color: #373b4d !important;
+                }
+                h4 {
+                    color: #4f5769 !important;
+                }
+                p.security-phrase:not(:empty), hr {
+                    border-color: #e8e9f0 !important;
+                }
+            }
+        </style>
         <style>
             @font-face {
                 font-family: 'Inter';
@@ -37,7 +69,6 @@
                 font-family: "Inter", sans-serif;
                 background-color: #ffffff;
                 margin: 0;
-                padding: 0;
             }
             a {
                 color: currentColor;
diff --git a/app/config/locale/templates/email-base.tpl b/app/config/locale/templates/email-base.tpl
index de632d7838..338cc51252 100644
--- a/app/config/locale/templates/email-base.tpl
+++ b/app/config/locale/templates/email-base.tpl
@@ -2,6 +2,38 @@
 <html>
     <head>
         <link rel="preconnect" href="https://assets.appwrite.io/" crossorigin>
+        <meta name="color-scheme" content="light dark">
+        <meta name="supported-color-schemes" content="light dark">
+        <style type="text/css">
+            :root {
+                color-scheme: light dark;
+                supported-color-schemes: light dark;
+            }
+
+            @media (prefers-color-scheme: dark ) {
+                body {
+                    color: #616b7c !important;
+                    background-color: #ffffff !important;
+                }
+                a {
+                    color: currentColor !important;
+                }
+                a.button {
+                    color: #ffffff !important;
+                    background-color: #2D2D31 !important;
+                    border-color: #414146 !important;
+                }
+                h1, h2, h3 {
+                    color: #373b4d !important;
+                }
+                h4 {
+                    color: #4f5769 !important;
+                }
+                p.security-phrase:not(:empty), hr {
+                    border-color: #e8e9f0 !important;
+                }
+            }
+        </style>
         <style>
             @font-face {
                 font-family: 'Inter';
