Add/use dark mode versions of email images

I'm not 100% happy with email authors needing to not forget to add
the <EmailStyles> component, but I suppose in practice people will
start by copy-pasting an existing template anyway.

I also bumped the size of the question mark icon in the footer to
render at 300 DPI at 34x34px.

src/emails/templates/EmailFooter.tsx

@@ -23,6 +23,15 @@ export const EmailFooter = (props: Props) => {
           <mj-image
             alt=""
             src={`${process.env.SERVER_URL}/images/email/icons/question-mark-circle-purple.png`}
+            css-class="light-mode-only"
+            width="34px"
+            height="34px"
+            align="center"
+          />
+          <mj-image
+            alt=""
+            src={`${process.env.SERVER_URL}/images/email/icons/question-mark-circle-purple-dark-mode.png`}
+            css-class="dark-mode-only"
             width="34px"
             height="34px"
             align="center"

src/emails/templates/EmailHeader.tsx

@@ -21,6 +21,15 @@ export const EmailHeader = (props: Props) => {
         <mj-image
           alt={l10n.getString("public-nav-name")}
           src={`${process.env.SERVER_URL}/images/email/monitor-logo-transparent.png`}
+          css-class="light-mode-only"
+          href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${props.utm_campaign}&utm_content=header-logo`}
+          width="200px"
+          align="left"
+        />
+        <mj-image
+          alt={l10n.getString("public-nav-name")}
+          src={`${process.env.SERVER_URL}/images/email/monitor-logo-transparent-dark-mode.png`}
+          css-class="dark-mode-only"
           href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${props.utm_campaign}&utm_content=header-logo`}
           width="200px"
           align="left"

src/emails/templates/EmailStyles.tsx

@@ -0,0 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from "react";
+
+export const EmailStyles = () => {
+  return (
+    <mj-style>
+      {`
+        .dark-mode-only {
+          display: none;
+        }
+        @media (prefers-color-scheme: dark) {
+          .dark-mode-only {
+            display: unset;
+          }
+          .light-mode-only {
+            display: none;
+          }
+        }
+      `}
+    </mj-style>
+  );
+};

src/emails/templates/monthlyActivity/MonthlyActivityEmail.tsx

@@ -8,6 +8,7 @@ import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
 import { EmailFooter } from "../EmailFooter";
 import { EmailHeader } from "../EmailHeader";
+import { EmailStyles } from "../EmailStyles";
 
 export type Props = {
   subscriber: SanitizedSubscriberRow;
@@ -38,6 +39,7 @@ const MonthlyActivityPlusWithManualRemovalsEmail = (props: Props) => {
   return (
     <mjml>
       <mj-head>
+        <EmailStyles />
         <mj-preview>
           {l10n.getString("email-monthly-plus-manual-preview")}
         </mj-preview>