diff --git a/src/components/AnnouncementBanner/AnnouncementBanner.tsx b/src/components/AnnouncementBanner/AnnouncementBanner.tsx
index 924a33db8e..769199275c 100644
--- a/src/components/AnnouncementBanner/AnnouncementBanner.tsx
+++ b/src/components/AnnouncementBanner/AnnouncementBanner.tsx
@@ -16,7 +16,7 @@ import { topBarHeight } from "components/LandingPage/TopBar";
 import { useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
 import { Path } from "types/path";
-import theme from "types/theme";
+import theme, { themeColors } from "types/theme";
 
 export default function AnnouncementBanner(): ReactElement {
   const [banner, setBanner] = useState<string>("");
@@ -47,9 +47,7 @@ export default function AnnouncementBanner(): ReactElement {
   }
 
   return banner ? (
-    <Toolbar
-      sx={{ ...margins, backgroundColor: (t) => t.palette.warning.main }}
-    >
+    <Toolbar style={{ ...margins, backgroundColor: themeColors.warning }}>
       <IconButton onClick={closeBanner} size="large">
         <Cancel />
       </IconButton>
diff --git a/src/components/Buttons/LoadingButton.tsx b/src/components/Buttons/LoadingButton.tsx
index 12c3b05ae7..c3e39d631a 100644
--- a/src/components/Buttons/LoadingButton.tsx
+++ b/src/components/Buttons/LoadingButton.tsx
@@ -2,6 +2,8 @@ import { Button, CircularProgress } from "@mui/material";
 import { type ButtonProps } from "@mui/material/Button";
 import { type ReactElement, type ReactNode } from "react";
 
+import { themeColors } from "types/theme";
+
 interface LoadingProps {
   buttonProps?: ButtonProps & { "data-testid"?: string };
   children?: ReactNode;
@@ -23,8 +25,8 @@ export default function LoadingButton(props: LoadingProps): ReactElement {
       {props.loading && (
         <CircularProgress
           size={24}
-          sx={{
-            color: (t) => t.palette.success.main,
+          style={{
+            color: themeColors.success,
             position: "absolute",
             top: "50%",
             left: "50%",
diff --git a/src/components/Buttons/LoadingDoneButton.tsx b/src/components/Buttons/LoadingDoneButton.tsx
index 53dd0200c0..2055123076 100644
--- a/src/components/Buttons/LoadingDoneButton.tsx
+++ b/src/components/Buttons/LoadingDoneButton.tsx
@@ -4,6 +4,8 @@ import { ButtonProps } from "@mui/material/Button";
 import { ReactElement, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
+import { themeColors } from "types/theme";
+
 interface LoadingDoneProps {
   buttonProps?: ButtonProps;
   children?: ReactNode;
@@ -27,8 +29,8 @@ export default function LoadingDoneButton(
       variant="contained"
       {...props.buttonProps}
       disabled={props.disabled || props.loading}
-      sx={{
-        backgroundColor: props.done ? (t) => t.palette.success.main : undefined,
+      style={{
+        backgroundColor: props.done ? themeColors.success : undefined,
         color: props.done ? "white" : undefined,
         ...props.buttonProps?.style,
       }}
@@ -44,8 +46,8 @@ export default function LoadingDoneButton(
       {props.loading && !props.done && (
         <CircularProgress
           size={24}
-          sx={{
-            color: (t) => t.palette.success.main,
+          style={{
+            color: themeColors.success,
             position: "absolute",
             top: "50%",
             left: "50%",
diff --git a/src/components/ProjectExport/DownloadButton.tsx b/src/components/ProjectExport/DownloadButton.tsx
index bd82cf724b..f354f5b0d1 100644
--- a/src/components/ProjectExport/DownloadButton.tsx
+++ b/src/components/ProjectExport/DownloadButton.tsx
@@ -18,6 +18,7 @@ import {
 import { ExportStatus } from "components/ProjectExport/Redux/ExportProjectReduxTypes";
 import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
+import { themeColors } from "types/theme";
 import { getDateTimeString } from "utilities/utilities";
 
 function makeExportName(projectName: string): string {
@@ -111,6 +112,14 @@ export default function DownloadButton(
     }
   }
 
+  function iconColor(): `#${string}` {
+    return exportState.status === ExportStatus.Failure
+      ? themeColors.error
+      : props.colorSecondary
+        ? themeColors.secondary
+        : themeColors.primary;
+  }
+
   function iconFunction(): () => void {
     switch (exportState.status) {
       case ExportStatus.Failure:
@@ -127,14 +136,7 @@ export default function DownloadButton(
           <IconButton
             tabIndex={-1}
             onClick={iconFunction()}
-            sx={{
-              color:
-                exportState.status === ExportStatus.Failure
-                  ? (t) => t.palette.error.main
-                  : props.colorSecondary
-                    ? (t) => t.palette.secondary.main
-                    : (t) => t.palette.primary.main,
-            }}
+            style={{ color: iconColor() }}
             size="large"
           >
             {icon()}
diff --git a/src/components/ProjectSettings/ProjectArchive.tsx b/src/components/ProjectSettings/ProjectArchive.tsx
index 5b1d30b070..b52b461676 100644
--- a/src/components/ProjectSettings/ProjectArchive.tsx
+++ b/src/components/ProjectSettings/ProjectArchive.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 
 import { archiveProject, restoreProject } from "backend";
 import { ButtonConfirmation } from "components/Dialogs";
+import { themeColors } from "types/theme";
 
 interface ProjectArchiveProps extends ButtonProps {
   archive?: boolean;
@@ -39,7 +40,7 @@ export default function ProjectArchive(
         color={props.warn ? "secondary" : "primary"}
         onClick={() => setOpen(true)}
         id={`proj-${props.projectId}-${props.archive ? "archive" : "restore"}`}
-        sx={props.warn ? { color: (t) => t.palette.error.main } : {}}
+        style={props.warn ? { color: themeColors.error } : {}}
       >
         {t(props.archive ? "buttons.archive" : "buttons.restore")}
       </Button>
diff --git a/src/components/Statistics/ProgressBar/LinearProgressBar.tsx b/src/components/Statistics/ProgressBar/LinearProgressBar.tsx
index b336dff075..6330d42e53 100644
--- a/src/components/Statistics/ProgressBar/LinearProgressBar.tsx
+++ b/src/components/Statistics/ProgressBar/LinearProgressBar.tsx
@@ -1,7 +1,5 @@
-import Box from "@mui/material/Box";
-import LinearProgress from "@mui/material/LinearProgress";
-import Typography from "@mui/material/Typography";
-import { ReactElement } from "react";
+import { Box, LinearProgress, Typography } from "@mui/material";
+import { type ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
 interface ProgressBarProps {
diff --git a/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx b/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx
index eaffee3ff7..a57a44c8db 100644
--- a/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx
+++ b/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx
@@ -1,8 +1,9 @@
-import { type SxProps, type Theme, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import { type ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
 import { CharacterStatus } from "goals/CharacterInventory/CharacterInventoryTypes";
+import { themeColors } from "types/theme";
 
 interface CharacterStatusTextProps {
   status: CharacterStatus;
@@ -19,7 +20,7 @@ export default function CharacterStatusText(
       variant="body2"
       color="textSecondary"
       component="p"
-      sx={CharacterStatusSx(props.status)}
+      style={CharacterStatusStyle(props.status)}
       display={props.inline ? "inline" : "initial"}
     >
       {t(`buttons.${props.status}`)}
@@ -27,13 +28,13 @@ export default function CharacterStatusText(
   );
 }
 
-function CharacterStatusSx(status: CharacterStatus): SxProps<Theme> {
+function CharacterStatusStyle(status: CharacterStatus): { color: string } {
   switch (status) {
     case CharacterStatus.Accepted:
-      return { color: (t) => t.palette.success.main };
+      return { color: themeColors.success };
     case CharacterStatus.Rejected:
-      return { color: (t) => t.palette.error.main };
+      return { color: themeColors.error };
     case CharacterStatus.Undecided:
-      return { color: (t) => t.palette.primary.main };
+      return { color: themeColors.primary };
   }
 }
diff --git a/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx b/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx
index 13e38872b0..da2cfaa718 100644
--- a/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx
+++ b/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx
@@ -44,6 +44,7 @@ import {
 } from "goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/utilities";
 import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
 import { type StoreState, type StoreStateDispatch } from "rootRedux/types";
+import { themeColors } from "types/theme";
 import {
   type FileWithSpeakerId,
   newPronunciation,
@@ -350,13 +351,13 @@ export default function EditDialog(props: EditDialogProps): ReactElement {
             </Grid>
             <Grid item>
               <IconButton id={EditDialogId.ButtonSave} onClick={saveAndClose}>
-                <Check sx={{ color: (t) => t.palette.success.main }} />
+                <Check style={{ color: themeColors.success }} />
               </IconButton>
               <IconButton
                 id={EditDialogId.ButtonCancel}
                 onClick={conditionalCancel}
               >
-                <Close sx={{ color: (t) => t.palette.error.main }} />
+                <Close style={{ color: themeColors.error }} />
               </IconButton>
             </Grid>
           </Grid>
@@ -473,7 +474,7 @@ export default function EditDialog(props: EditDialogProps): ReactElement {
                 <CardContent>
                   <IconButton onClick={toggleFlag}>
                     {newWord.flag.active ? (
-                      <FlagFilled sx={{ color: (t) => t.palette.error.main }} />
+                      <FlagFilled sx={{ color: themeColors.error }} />
                     ) : (
                       <FlagOutlined />
                     )}