Dark mode emails (#398)

* Add dark mode

* Add dark mode

* Add dark mode

Author: pontusab

packages/email/README.md

@@ -0,0 +1,49 @@
+import { Button as ReactEmailButton } from "@react-email/components";
+import type React from "react";
+import { getEmailInlineStyles, getEmailThemeClasses } from "./theme";
+
+interface ButtonProps {
+  href: string;
+  children: React.ReactNode;
+  variant?: "primary" | "secondary";
+  className?: string;
+}
+
+export function Button({
+  href,
+  children,
+  variant = "primary",
+  className = "",
+}: ButtonProps) {
+  const themeClasses = getEmailThemeClasses();
+  const lightStyles = getEmailInlineStyles("light");
+
+  const baseClasses =
+    "bg-transparent text-[14px] font-medium no-underline text-center px-6 py-3 border border-solid";
+  const variantClasses =
+    variant === "primary"
+      ? themeClasses.button
+      : "border-gray-300 text-gray-600";
+
+  // Inline styles for maximum email client compatibility
+  const buttonStyle =
+    variant === "primary"
+      ? {
+          color: lightStyles.button.color,
+          borderColor: lightStyles.button.borderColor,
+        }
+      : {
+          color: "#6b7280",
+          borderColor: "#d1d5db",
+        };
+
+  return (
+    <ReactEmailButton
+      className={`${baseClasses} ${variantClasses} ${className}`}
+      href={href}
+      style={buttonStyle}
+    >
+      {children}
+    </ReactEmailButton>
+  );
+}

packages/email/components/button.tsx

@@ -1,4 +1,5 @@
 import { Img, Row, Section, Text } from "@react-email/components";
+import { getEmailThemeClasses } from "./theme";
 
 type Props = {
   title: string;
@@ -8,6 +9,8 @@ type Props = {
 };
 
 export function Column({ title, description, footer, imgSrc }: Props) {
+  const themeClasses = getEmailThemeClasses();
+
   return (
     <Section className="text-left p-0 m-0 text-left">
       <Section className="p-0 m-0 w-full w-full w-[265px] inline-block align-top box-border mb-4 md:mb-0 text-left">
@@ -17,9 +20,13 @@ export function Column({ title, description, footer, imgSrc }: Props) {
       </Section>
       <Section className="inline-block align-top box-border w-full w-[280px] text-left">
         <Section className="text-left p-0 m-0">
-          <Text className="pt-0 m-0 font-medium mb-2">{title}</Text>
-          <Text className="text-[#707070] p-0 m-0">{description}</Text>
-          <Text className="text-[#707070] p-0 mt-2">{footer}</Text>
+          <Text className={`pt-0 m-0 font-medium mb-2 ${themeClasses.text}`}>
+            {title}
+          </Text>
+          <Text className={`p-0 m-0 ${themeClasses.mutedText}`}>
+            {description}
+          </Text>
+          <Text className={`p-0 mt-2 ${themeClasses.mutedText}`}>{footer}</Text>
         </Section>
       </Section>
     </Section>