From 3e66969b2dd227248f1f26e27116d0673b5e555f Mon Sep 17 00:00:00 2001
From: Guilherme de Freitas <guilherme.de-freitas@diamond.ac.uk>
Date: Wed, 5 Mar 2025 09:32:16 +0000
Subject: [PATCH 1/2] Fix flicker in SSR when using dark mode

---
 src/__test-utils__/helpers.tsx                | 12 ++++
 src/components/Footer.test.tsx                | 34 +++++------
 src/components/Footer.tsx                     |  4 +-
 .../ImageColorSchemeSwitch.test.tsx           | 57 +++----------------
 src/components/ImageColorSchemeSwitch.tsx     | 46 +++++++--------
 src/components/Navbar.test.tsx                | 11 ++--
 src/components/Navbar.tsx                     |  6 +-
 src/components/User.test.tsx                  | 25 ++++----
 src/components/User.tsx                       |  2 +-
 src/themes/DiamondTheme.ts                    |  4 ++
 10 files changed, 85 insertions(+), 116 deletions(-)
 create mode 100644 src/__test-utils__/helpers.tsx

diff --git a/src/__test-utils__/helpers.tsx b/src/__test-utils__/helpers.tsx
new file mode 100644
index 0000000..6204809
--- /dev/null
+++ b/src/__test-utils__/helpers.tsx
@@ -0,0 +1,12 @@
+import { ThemeProvider } from "@mui/material/styles";
+import { DiamondTheme } from "../themes/DiamondTheme";
+import { render, RenderResult } from "@testing-library/react";
+import { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
+
+export const renderWithProviders = (ui: React.ReactNode, themeOptions?: Omit<ThemeProviderProps, "theme">): RenderResult => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => {
+    return <ThemeProvider {...themeOptions} theme={DiamondTheme}>{children}</ThemeProvider>;
+  };
+
+  return render(ui, { wrapper: Wrapper });
+};
diff --git a/src/components/Footer.test.tsx b/src/components/Footer.test.tsx
index ba3a16d..71d23e4 100644
--- a/src/components/Footer.test.tsx
+++ b/src/components/Footer.test.tsx
@@ -1,18 +1,18 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import dlsLogo from "../public/generic/logo-short.svg";
 import { Footer, FooterLink, FooterLinks } from "./Footer";
 import { ImageColorSchemeSwitch } from "./ImageColorSchemeSwitch";
-import { ThemeProvider } from "../themes/ThemeProvider";
+import { renderWithProviders } from "../__test-utils__/helpers";
 
 jest.mock("./ImageColorSchemeSwitch");
 // @ts-expect-error: doesn't find mockImplementation outside of testing.
-ImageColorSchemeSwitch.mockImplementation(() => <img src="src" alt="alt" />);
+ImageColorSchemeSwitch.mockImplementation(() => <img src='src' alt='alt' />);
 
 describe("Footer", () => {
   test("Should render logo only", () => {
-    render(<Footer logo={{ src: dlsLogo, alt: "t" }} />);
+    renderWithProviders(<Footer logo={{ src: dlsLogo, alt: "t" }} />);
 
     expect(screen.getByRole("img")).toBeInTheDocument();
     // No copyright text
@@ -20,11 +20,7 @@ describe("Footer", () => {
   });
 
   test("Should render logo via theme", () => {
-    render(
-      <ThemeProvider>
-        <Footer logo="theme" />
-      </ThemeProvider>,
-    );
+    renderWithProviders(<Footer logo='theme' />);
 
     expect(screen.getByRole("img")).toBeInTheDocument();
   });
@@ -32,12 +28,12 @@ describe("Footer", () => {
   test("Should render copyright only", async () => {
     const copyrightText = "add text here";
     const currentYear = new Date().getFullYear();
-    render(<Footer logo={null} copyright={copyrightText} />);
+    renderWithProviders(<Footer logo={null} copyright={copyrightText} />);
 
     await waitFor(() => {
       expect(screen.queryByRole("paragraph")).toBeInTheDocument();
       expect(screen.queryByRole("paragraph")?.textContent).toStrictEqual(
-        `Copyright © ${currentYear} ${copyrightText}`,
+        `Copyright © ${currentYear} ${copyrightText}`
       );
       // No logo
       expect(screen.queryByRole("img")).not.toBeTruthy();
@@ -47,17 +43,13 @@ describe("Footer", () => {
   test("Should render logo and copyright", async () => {
     const copyrightText = "add text here";
     const currentYear = new Date().getFullYear();
-    render(
-      <Footer logo={{ src: dlsLogo, alt: "" }} copyright={copyrightText} />,
-    );
+    renderWithProviders(<Footer logo={{ src: dlsLogo, alt: "" }} copyright={copyrightText} />);
 
     await waitFor(() => {
       expect(screen.getByRole("img")).toBeInTheDocument();
       const paragraph = screen.getByRole("paragraph");
       expect(paragraph).toBeInTheDocument();
-      expect(paragraph.textContent).toStrictEqual(
-        `Copyright © ${currentYear} ${copyrightText}`,
-      );
+      expect(paragraph.textContent).toStrictEqual(`Copyright © ${currentYear} ${copyrightText}`);
     });
   });
 
@@ -65,12 +57,12 @@ describe("Footer", () => {
     const lineOneText = "Link one";
     const linkOneName = "link-one-href";
 
-    render(
+    renderWithProviders(
       <Footer>
         <FooterLinks>
           <FooterLink href={linkOneName}>{lineOneText}</FooterLink>
         </FooterLinks>
-      </Footer>,
+      </Footer>
     );
 
     await waitFor(() => {
@@ -87,13 +79,13 @@ describe("Footer", () => {
     const linkTwoText = "Link two";
     const linkOneName = "link-one-href";
     const linkTwoName = "link-two-href";
-    render(
+    renderWithProviders(
       <Footer>
         <FooterLinks>
           <FooterLink href={linkOneName}>{linkOneText}</FooterLink>
           <FooterLink href={linkTwoName}>{linkTwoText}</FooterLink>
         </FooterLinks>
-      </Footer>,
+      </Footer>
     );
 
     await waitFor(() => {
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index f8fb7f2..6c1136f 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -42,7 +42,7 @@ const FooterLink = ({ children, ...props }: LinkProps) => {
     <Link
       sx={{
         "&:hover": {
-          color: theme.palette.secondary.main,
+          color: theme.vars.palette.secondary.main,
           borderBottom: "solid 4px",
         },
         textDecoration: "none",
@@ -74,7 +74,7 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
         bottom: 0,
         marginTop: "auto",
         minHeight: 50,
-        backgroundColor: theme.palette.primary.light,
+        backgroundColor: theme.vars.palette.primary.light,
       }}
       {...props}
     >
diff --git a/src/components/ImageColorSchemeSwitch.test.tsx b/src/components/ImageColorSchemeSwitch.test.tsx
index 34d723d..68604a7 100644
--- a/src/components/ImageColorSchemeSwitch.test.tsx
+++ b/src/components/ImageColorSchemeSwitch.test.tsx
@@ -1,13 +1,8 @@
 import "@testing-library/jest-dom";
-import { render } from "@testing-library/react";
 
-import { ImageColorSchemeSwitch, getLogoSrc } from "./ImageColorSchemeSwitch";
-
-jest.mock("@mui/material", () => {
-  return {
-    useColorScheme: jest.fn().mockReturnValue({ mode: "dark" }),
-  };
-});
+import { ImageColorSchemeSwitch } from "./ImageColorSchemeSwitch";
+import { renderWithProviders } from "../__test-utils__/helpers";
+import { screen } from "@testing-library/react";
 
 describe("ImageColorSchemeSwitch", () => {
   const testVals = {
@@ -22,17 +17,17 @@ describe("ImageColorSchemeSwitch", () => {
     width?: string;
     height?: string;
   }) {
-    const { getByAltText } = render(
+    const { getByTestId } = renderWithProviders(
       <ImageColorSchemeSwitch image={{ ...testVals, ...image }} />,
     );
 
-    const img = getByAltText(testVals.alt);
+    const img = getByTestId("image-light");
     expect(img).toBeInTheDocument();
     return img;
   }
 
   it("should render without errors", () => {
-    render(<ImageColorSchemeSwitch image={{ ...testVals }} />);
+    renderWithProviders(<ImageColorSchemeSwitch image={{ ...testVals }} />);
   });
 
   it("should have src and alt by default", () => {
@@ -66,46 +61,10 @@ describe("ImageColorSchemeSwitch", () => {
   it("should have alternate src", () => {
     const srcDark = "src/dark";
 
-    const img = getRenderImg({
-      srcDark,
-    });
+    renderWithProviders(<ImageColorSchemeSwitch image={{...testVals, srcDark}}/>, {defaultMode: "dark"})
+    const img = screen.getByTestId("image-dark");
 
     expect(img).toHaveAttribute("src", srcDark);
   });
 });
 
-describe("getLogoSrc", () => {
-  const srcLight = "src/light",
-    srcDark = "src/dark";
-
-  it("should be null if no image", () => {
-    // @ts-expect-error: invalid input
-    expect(getLogoSrc(null, "")).toStrictEqual(undefined);
-    // @ts-expect-error: invalid input, calm down ts
-    expect(getLogoSrc()).toStrictEqual(undefined);
-  });
-
-  it("should be srcLight if no srcDark", () => {
-    expect(getLogoSrc({ src: srcLight, alt: "" }, "light")).toStrictEqual(
-      srcLight,
-    );
-  });
-
-  it("should be srcLight if mode is dark but no srcDark", () => {
-    expect(getLogoSrc({ src: srcLight, alt: "" }, "dark")).toStrictEqual(
-      srcLight,
-    );
-  });
-
-  it("should be srcLight if srcDark but mode light", () => {
-    expect(
-      getLogoSrc({ src: srcLight, srcDark: srcDark, alt: "" }, "light"),
-    ).toStrictEqual(srcLight);
-  });
-
-  it("should be srcDark if mode dark", () => {
-    expect(
-      getLogoSrc({ src: "src/light", srcDark: srcDark, alt: "" }, "dark"),
-    ).toStrictEqual(srcDark);
-  });
-});
diff --git a/src/components/ImageColorSchemeSwitch.tsx b/src/components/ImageColorSchemeSwitch.tsx
index 8b52e48..22f9977 100644
--- a/src/components/ImageColorSchemeSwitch.tsx
+++ b/src/components/ImageColorSchemeSwitch.tsx
@@ -1,4 +1,4 @@
-import { useColorScheme } from "@mui/material";
+import { styled } from "@mui/material";
 
 type ImageColorSchemeSwitchType = {
   src: string;
@@ -12,28 +12,28 @@ interface ImageColorSchemeSwitchProps {
   image: ImageColorSchemeSwitchType;
 }
 
-export function getLogoSrc(image: ImageColorSchemeSwitchType, mode: string) {
-  if (!image) {
-    return undefined;
-  }
-
-  if (image.srcDark === undefined) {
-    return image.src;
-  }
-
-  return mode === "dark" ? image.srcDark : image.src;
-}
-
-const ImageColorSchemeSwitch = ({ image }: ImageColorSchemeSwitchProps) => {
-  const { mode } = useColorScheme();
-  if (!mode) return <></>;
-
-  const src: string | undefined = getLogoSrc(image, mode);
-
-  return (
-    <img src={src} alt={image.alt} width={image.width} height={image.height} />
-  );
-};
+/** Styled component which is only displayed in dark mode */
+const ImageDark = styled("img")(({ theme }) => [
+  { display: "none" },
+  theme.applyStyles("dark", {
+    display: "block",
+  }),
+]);
+
+/** Styled component which is only displayed in light mode */
+const ImageLight = styled("img")(({ theme }) => [
+  { display: "block" },
+  theme.applyStyles("dark", {
+    display: "none",
+  }),
+]);
+
+const ImageColorSchemeSwitch = ({ image }: ImageColorSchemeSwitchProps) => (
+  <>
+    <ImageLight data-testid="image-light" src={image.src} alt={image.alt} width={image.width} height={image.height} />
+    <ImageDark data-testid="image-dark" src={image.srcDark} alt={image.alt} width={image.width} height={image.height} />
+  </>
+);
 
 export { ImageColorSchemeSwitch };
 export type { ImageColorSchemeSwitchProps, ImageColorSchemeSwitchType };
diff --git a/src/components/Navbar.test.tsx b/src/components/Navbar.test.tsx
index 2bcae86..03645ef 100644
--- a/src/components/Navbar.test.tsx
+++ b/src/components/Navbar.test.tsx
@@ -1,11 +1,12 @@
-import { fireEvent, screen, render } from "@testing-library/react";
+import { fireEvent, screen } from "@testing-library/react";
 import { Navbar, NavLinks, NavLink } from "./Navbar";
 import "@testing-library/jest-dom";
+import { renderWithProviders } from "../__test-utils__/helpers";
 
 describe("Navbar", () => {
   it("should not display logo if null", () => {
     global.innerWidth = 600;
-    render(<Navbar logo={null} />);
+    renderWithProviders(<Navbar logo={null} />);
     expect(screen.queryByAltText("Home")).not.toBeInTheDocument();
   });
 });
@@ -13,7 +14,7 @@ describe("Navbar", () => {
 describe("Navbar Links", () => {
   it("should display hamburger menu on narrow displays", () => {
     global.innerWidth = 600;
-    render(
+    renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
       </NavLinks>,
@@ -25,7 +26,7 @@ describe("Navbar Links", () => {
 
   it("should display menu items when hamburger menu is clicked", () => {
     global.innerWidth = 600;
-    render(
+    renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
       </NavLinks>,
@@ -38,7 +39,7 @@ describe("Navbar Links", () => {
 
   it("should render links properly", () => {
     global.innerWidth = 600;
-    render(
+    renderWithProviders(
       <NavLinks>
         <NavLink>Proposals</NavLink>
       </NavLinks>,
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 506f15c..e595230 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -91,7 +91,7 @@ const NavLinks = ({ children }: NavLinksProps) => {
         onClose={onClose}
         anchor="left"
         PaperProps={{
-          sx: { backgroundColor: theme.palette.primary.main },
+          sx: { backgroundColor: theme.vars.palette.primary.main },
         }}
       >
         <Box
@@ -101,7 +101,7 @@ const NavLinks = ({ children }: NavLinksProps) => {
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
-            backgroundColor: theme.palette.primary.main,
+            backgroundColor: theme.vars.palette.primary.main,
           }}
         >
           {children}
@@ -126,7 +126,7 @@ const Navbar = ({ children, logo, ...props }: NavbarProps) => {
       <Paper
         sx={{
           display: "flex",
-          backgroundColor: theme.palette.primary.main,
+          backgroundColor: theme.vars.palette.primary.main,
           px: { xs: "1rem", md: "7.5vw" },
           height: 50,
           width: "100%",
diff --git a/src/components/User.test.tsx b/src/components/User.test.tsx
index 3e10498..a661901 100644
--- a/src/components/User.test.tsx
+++ b/src/components/User.test.tsx
@@ -1,19 +1,20 @@
 import "@testing-library/jest-dom";
 
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
 import { Avatar } from "@mui/material";
 import { User } from "./User";
+import { renderWithProviders } from "../__test-utils__/helpers";
 
 describe("User", () => {
   it("should render", () => {
-    render(<User onLogin={() => {}} onLogout={() => {}} user={null} />);
-    render(<User onLogout={() => {}} user={null} />);
-    render(<User onLogin={() => {}} user={null} />);
-    render(<User user={null} />);
+    renderWithProviders(<User onLogin={() => {}} onLogout={() => {}} user={null} />);
+    renderWithProviders(<User onLogout={() => {}} user={null} />);
+    renderWithProviders(<User onLogin={() => {}} user={null} />);
+    renderWithProviders(<User user={null} />);
   });
 
   it("should display login button when not authenticated", () => {
-    const { getByText } = render(
+    const { getByText } = renderWithProviders(
       <User onLogin={() => {}} onLogout={() => {}} user={null} />,
     );
     const loginButton = getByText("Login");
@@ -22,7 +23,7 @@ describe("User", () => {
   });
 
   it("should display logout menuitem when authenticated", () => {
-    const { getByRole, getByText } = render(
+    const { getByRole, getByText } = renderWithProviders(
       <User
         onLogin={() => {}}
         onLogout={() => {}}
@@ -39,7 +40,7 @@ describe("User", () => {
 
   it("should fire login callback when button is clicked", () => {
     const loginCallback = jest.fn();
-    const { getByText } = render(<User onLogin={loginCallback} user={null} />);
+    const { getByText } = renderWithProviders(<User onLogin={loginCallback} user={null} />);
 
     const loginButton = getByText("Login");
     fireEvent.click(loginButton);
@@ -49,7 +50,7 @@ describe("User", () => {
 
   it("should fire logout callback when button is clicked", () => {
     const logoutCallback = jest.fn();
-    const { getByRole, getByText } = render(
+    const { getByRole, getByText } = renderWithProviders(
       <User
         onLogout={logoutCallback}
         user={{ name: "Name", fedid: "FedID" }}
@@ -67,14 +68,14 @@ describe("User", () => {
   it("should display name and FedID", () => {
     const name = "A Name",
       fedId = "FED14000";
-    const { getByText } = render(<User user={{ name: name, fedid: fedId }} />);
+    const { getByText } = renderWithProviders(<User user={{ name: name, fedid: fedId }} />);
 
     expect(getByText(name)).toBeInTheDocument();
     expect(getByText(fedId)).toBeInTheDocument();
   });
 
   it("should not have logout when no onLogout", () => {
-    const { getByRole, queryByText } = render(
+    const { getByRole, queryByText } = renderWithProviders(
       <User user={{ name: "Name", fedid: "FedID" }} />,
     );
     const userMenu = getByRole("button");
@@ -86,7 +87,7 @@ describe("User", () => {
 
   it("should render a new avatar", () => {
     const avatarInitials = "MW";
-    const { queryByText } = render(
+    const { queryByText } = renderWithProviders(
       <User
         user={{ name: "Name", fedid: "FedID" }}
         avatar={<Avatar>{avatarInitials}</Avatar>}
diff --git a/src/components/User.tsx b/src/components/User.tsx
index ee88c1b..7a8c8ac 100644
--- a/src/components/User.tsx
+++ b/src/components/User.tsx
@@ -72,7 +72,7 @@ const User = ({ user, onLogin, onLogout, avatar, color }: UserProps) => {
                   alt={user.name + " avatar"}
                   variant="rounded"
                   sx={{
-                    backgroundColor: theme.palette.primary.light,
+                    backgroundColor: theme.vars.palette.primary.light,
                     color: color || "textPrimary",
                     height: 35,
                     width: 35,
diff --git a/src/themes/DiamondTheme.ts b/src/themes/DiamondTheme.ts
index 884679f..b86c83a 100644
--- a/src/themes/DiamondTheme.ts
+++ b/src/themes/DiamondTheme.ts
@@ -1,4 +1,5 @@
 import { createTheme, Theme } from "@mui/material/styles";
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 import { BaseThemeOptions } from "./BaseTheme";
 
@@ -11,6 +12,9 @@ const dlsLogoYellow = "#facf07";
 
 const DiamondTheme: Theme = createTheme({
   ...BaseThemeOptions,
+  cssVariables: {
+    colorSchemeSelector: "class"
+  },
   logos: {
     normal: {
       src: logoImageLight,

From c326a1c5419893d0a3a04edc002081154ab59a01 Mon Sep 17 00:00:00 2001
From: Guilherme de Freitas <guilherme.de-freitas@diamond.ac.uk>
Date: Fri, 14 Mar 2025 15:34:17 +0000
Subject: [PATCH 2/2] Move cssVariables option to base theme options

---
 src/__test-utils__/helpers.tsx                 | 11 +++++++++--
 src/components/Footer.test.tsx                 | 18 +++++++++++-------
 src/components/ImageColorSchemeSwitch.test.tsx |  6 ++++--
 src/components/ImageColorSchemeSwitch.tsx      | 16 ++++++++++++++--
 src/components/User.test.tsx                   | 12 +++++++++---
 src/themes/BaseTheme.ts                        |  3 +++
 src/themes/DiamondTheme.ts                     |  5 +----
 7 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/src/__test-utils__/helpers.tsx b/src/__test-utils__/helpers.tsx
index 6204809..b583d6b 100644
--- a/src/__test-utils__/helpers.tsx
+++ b/src/__test-utils__/helpers.tsx
@@ -3,9 +3,16 @@ import { DiamondTheme } from "../themes/DiamondTheme";
 import { render, RenderResult } from "@testing-library/react";
 import { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
 
-export const renderWithProviders = (ui: React.ReactNode, themeOptions?: Omit<ThemeProviderProps, "theme">): RenderResult => {
+export const renderWithProviders = (
+  ui: React.ReactNode,
+  themeOptions?: Omit<ThemeProviderProps, "theme">,
+): RenderResult => {
   const Wrapper = ({ children }: { children: React.ReactNode }) => {
-    return <ThemeProvider {...themeOptions} theme={DiamondTheme}>{children}</ThemeProvider>;
+    return (
+      <ThemeProvider {...themeOptions} theme={DiamondTheme}>
+        {children}
+      </ThemeProvider>
+    );
   };
 
   return render(ui, { wrapper: Wrapper });
diff --git a/src/components/Footer.test.tsx b/src/components/Footer.test.tsx
index 71d23e4..e2185d5 100644
--- a/src/components/Footer.test.tsx
+++ b/src/components/Footer.test.tsx
@@ -8,7 +8,7 @@ import { renderWithProviders } from "../__test-utils__/helpers";
 
 jest.mock("./ImageColorSchemeSwitch");
 // @ts-expect-error: doesn't find mockImplementation outside of testing.
-ImageColorSchemeSwitch.mockImplementation(() => <img src='src' alt='alt' />);
+ImageColorSchemeSwitch.mockImplementation(() => <img src="src" alt="alt" />);
 
 describe("Footer", () => {
   test("Should render logo only", () => {
@@ -20,7 +20,7 @@ describe("Footer", () => {
   });
 
   test("Should render logo via theme", () => {
-    renderWithProviders(<Footer logo='theme' />);
+    renderWithProviders(<Footer logo="theme" />);
 
     expect(screen.getByRole("img")).toBeInTheDocument();
   });
@@ -33,7 +33,7 @@ describe("Footer", () => {
     await waitFor(() => {
       expect(screen.queryByRole("paragraph")).toBeInTheDocument();
       expect(screen.queryByRole("paragraph")?.textContent).toStrictEqual(
-        `Copyright © ${currentYear} ${copyrightText}`
+        `Copyright © ${currentYear} ${copyrightText}`,
       );
       // No logo
       expect(screen.queryByRole("img")).not.toBeTruthy();
@@ -43,13 +43,17 @@ describe("Footer", () => {
   test("Should render logo and copyright", async () => {
     const copyrightText = "add text here";
     const currentYear = new Date().getFullYear();
-    renderWithProviders(<Footer logo={{ src: dlsLogo, alt: "" }} copyright={copyrightText} />);
+    renderWithProviders(
+      <Footer logo={{ src: dlsLogo, alt: "" }} copyright={copyrightText} />,
+    );
 
     await waitFor(() => {
       expect(screen.getByRole("img")).toBeInTheDocument();
       const paragraph = screen.getByRole("paragraph");
       expect(paragraph).toBeInTheDocument();
-      expect(paragraph.textContent).toStrictEqual(`Copyright © ${currentYear} ${copyrightText}`);
+      expect(paragraph.textContent).toStrictEqual(
+        `Copyright © ${currentYear} ${copyrightText}`,
+      );
     });
   });
 
@@ -62,7 +66,7 @@ describe("Footer", () => {
         <FooterLinks>
           <FooterLink href={linkOneName}>{lineOneText}</FooterLink>
         </FooterLinks>
-      </Footer>
+      </Footer>,
     );
 
     await waitFor(() => {
@@ -85,7 +89,7 @@ describe("Footer", () => {
           <FooterLink href={linkOneName}>{linkOneText}</FooterLink>
           <FooterLink href={linkTwoName}>{linkTwoText}</FooterLink>
         </FooterLinks>
-      </Footer>
+      </Footer>,
     );
 
     await waitFor(() => {
diff --git a/src/components/ImageColorSchemeSwitch.test.tsx b/src/components/ImageColorSchemeSwitch.test.tsx
index 68604a7..4aa50b5 100644
--- a/src/components/ImageColorSchemeSwitch.test.tsx
+++ b/src/components/ImageColorSchemeSwitch.test.tsx
@@ -61,10 +61,12 @@ describe("ImageColorSchemeSwitch", () => {
   it("should have alternate src", () => {
     const srcDark = "src/dark";
 
-    renderWithProviders(<ImageColorSchemeSwitch image={{...testVals, srcDark}}/>, {defaultMode: "dark"})
+    renderWithProviders(
+      <ImageColorSchemeSwitch image={{ ...testVals, srcDark }} />,
+      { defaultMode: "dark" },
+    );
     const img = screen.getByTestId("image-dark");
 
     expect(img).toHaveAttribute("src", srcDark);
   });
 });
-
diff --git a/src/components/ImageColorSchemeSwitch.tsx b/src/components/ImageColorSchemeSwitch.tsx
index 22f9977..4794984 100644
--- a/src/components/ImageColorSchemeSwitch.tsx
+++ b/src/components/ImageColorSchemeSwitch.tsx
@@ -30,8 +30,20 @@ const ImageLight = styled("img")(({ theme }) => [
 
 const ImageColorSchemeSwitch = ({ image }: ImageColorSchemeSwitchProps) => (
   <>
-    <ImageLight data-testid="image-light" src={image.src} alt={image.alt} width={image.width} height={image.height} />
-    <ImageDark data-testid="image-dark" src={image.srcDark} alt={image.alt} width={image.width} height={image.height} />
+    <ImageLight
+      data-testid="image-light"
+      src={image.src}
+      alt={image.alt}
+      width={image.width}
+      height={image.height}
+    />
+    <ImageDark
+      data-testid="image-dark"
+      src={image.srcDark}
+      alt={image.alt}
+      width={image.width}
+      height={image.height}
+    />
   </>
 );
 
diff --git a/src/components/User.test.tsx b/src/components/User.test.tsx
index a661901..2ca16db 100644
--- a/src/components/User.test.tsx
+++ b/src/components/User.test.tsx
@@ -7,7 +7,9 @@ import { renderWithProviders } from "../__test-utils__/helpers";
 
 describe("User", () => {
   it("should render", () => {
-    renderWithProviders(<User onLogin={() => {}} onLogout={() => {}} user={null} />);
+    renderWithProviders(
+      <User onLogin={() => {}} onLogout={() => {}} user={null} />,
+    );
     renderWithProviders(<User onLogout={() => {}} user={null} />);
     renderWithProviders(<User onLogin={() => {}} user={null} />);
     renderWithProviders(<User user={null} />);
@@ -40,7 +42,9 @@ describe("User", () => {
 
   it("should fire login callback when button is clicked", () => {
     const loginCallback = jest.fn();
-    const { getByText } = renderWithProviders(<User onLogin={loginCallback} user={null} />);
+    const { getByText } = renderWithProviders(
+      <User onLogin={loginCallback} user={null} />,
+    );
 
     const loginButton = getByText("Login");
     fireEvent.click(loginButton);
@@ -68,7 +72,9 @@ describe("User", () => {
   it("should display name and FedID", () => {
     const name = "A Name",
       fedId = "FED14000";
-    const { getByText } = renderWithProviders(<User user={{ name: name, fedid: fedId }} />);
+    const { getByText } = renderWithProviders(
+      <User user={{ name: name, fedid: fedId }} />,
+    );
 
     expect(getByText(name)).toBeInTheDocument();
     expect(getByText(fedId)).toBeInTheDocument();
diff --git a/src/themes/BaseTheme.ts b/src/themes/BaseTheme.ts
index d3c746e..29fc516 100644
--- a/src/themes/BaseTheme.ts
+++ b/src/themes/BaseTheme.ts
@@ -18,6 +18,9 @@ declare module "@mui/material/styles" {
 }
 
 const BaseThemeOptions /* : ThemeOptions */ = {
+  cssVariables: {
+    colorSchemeSelector: "class",
+  },
   typography: {
     fontSize: 14,
   },
diff --git a/src/themes/DiamondTheme.ts b/src/themes/DiamondTheme.ts
index b86c83a..63d7d3e 100644
--- a/src/themes/DiamondTheme.ts
+++ b/src/themes/DiamondTheme.ts
@@ -1,5 +1,5 @@
 import { createTheme, Theme } from "@mui/material/styles";
-import type {} from '@mui/material/themeCssVarsAugmentation';
+import type {} from "@mui/material/themeCssVarsAugmentation";
 
 import { BaseThemeOptions } from "./BaseTheme";
 
@@ -12,9 +12,6 @@ const dlsLogoYellow = "#facf07";
 
 const DiamondTheme: Theme = createTheme({
   ...BaseThemeOptions,
-  cssVariables: {
-    colorSchemeSelector: "class"
-  },
   logos: {
     normal: {
       src: logoImageLight,