Use solid background colour for logo in dark mode

src/emails/StorybookEmailRenderer.tsx

@@ -9,14 +9,33 @@ import { renderToStaticMarkup } from "react-dom/server";
 
 export type Props = {
   children: ReactNode;
+  emulateDarkMode?: boolean;
 };
 
 export const StorybookEmailRenderer = (props: Props) => {
   return (
+    <>
+      <style>{`
+      @media (prefers-color-scheme: dark) {
+        * {
+          background-color: #1e293b !important;
+          color: white !important;
+        }
+      }
+
+      .dark-mode-enforced * {
+        background-color: #1e293b !important;
+        color: white !important;
+      }
+  `}</style>
       <div
         dangerouslySetInnerHTML={{
           __html: mjml2html(renderToStaticMarkup(props.children)).html,
         }}
+        // This isn't used in production, so not worth writing a test for:
+        /* c8 ignore next */
+        className={props.emulateDarkMode ? "dark-mode-enforced" : ""}
       />
+    </>
   );
 };

src/emails/templates/monthlyActivity/MonthlyActivityEmail.stories.tsx

@@ -10,10 +10,11 @@ import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
 import { getL10n } from "../../../app/functions/l10n/storybookAndJest";
 import { DashboardSummary } from "../../../app/functions/server/dashboard";
 
+type StoryProps = Props & { emulateDarkMode?: boolean };
 const meta: Meta<FC<Props>> = {
   title: "Emails/Monthly activity",
-  component: (props: Props) => (
-    <StorybookEmailRenderer>
+  component: (props: StoryProps) => (
+    <StorybookEmailRenderer emulateDarkMode={props.emulateDarkMode}>
       <MonthlyActivityEmail {...props} />
     </StorybookEmailRenderer>
   ),
@@ -23,7 +24,7 @@ const meta: Meta<FC<Props>> = {
 };
 
 export default meta;
-type Story = StoryObj<FC<Props>>;
+type Story = StoryObj<FC<StoryProps>>;
 
 export const MonthlyActivityEmailPlusWithManualStory: Story = {
   name: "A Plus user, with manually-resolved items",
@@ -78,3 +79,21 @@ export const MonthlyActivityEmailFreeStory: Story = {
     } as DashboardSummary,
   },
 };
+export const DarkModeStory: Story = {
+  name: "Simulating dark mode",
+  args: {
+    emulateDarkMode: true,
+    subscriber: {
+      signup_language: "en",
+      fxa_profile_json: {
+        subscriptions: ["not-monitor"],
+      },
+    } as SanitizedSubscriberRow,
+    data: {
+      dataBrokerManuallyResolvedDataPointsNum: 40,
+      dataBreachFixedDataPointsNum: 2,
+      dataBrokerInProgressDataPointsNum: 0,
+      dataBrokerAutoFixedDataPointsNum: 0,
+    } as DashboardSummary,
+  },
+};