Fix snackbars in dark mode

web/src/components/App.jsx

@@ -5,7 +5,7 @@ import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { useLiveQuery } from "dexie-react-hooks";
 import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom";
 import { AllSubscriptions, SingleSubscription } from "./Notifications";
-import themeOptions, { darkPalette, lightPalette } from "./theme";
+import { darkTheme, lightTheme } from "./theme";
 import Navigation from "./Navigation";
 import ActionBar from "./ActionBar";
 import notifier from "../app/Notifier";
@@ -46,13 +46,7 @@ const App = () => {
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
   const themePreference = useLiveQuery(() => prefs.theme());
   const theme = React.useMemo(
-    () =>
+    () => createTheme(darkModeEnabled(prefersDarkMode, themePreference) ? darkTheme : lightTheme),
-      createTheme({
-        ...themeOptions,
-        palette: {
-          ...(darkModeEnabled(prefersDarkMode, themePreference) ? darkPalette : lightPalette),
-        },
-      }),
     [prefersDarkMode, themePreference]
   );
 

web/src/components/theme.js

@@ -1,5 +1,5 @@
 /** @type {import("@mui/material").ThemeOptions} */
-const themeOptions = {
+const baseThemeOptions = {
   components: {
     MuiListItemIcon: {
       styleOverrides: {
@@ -22,35 +22,53 @@ const themeOptions = {
 
 // https://github.com/binwiederhier/ntfy-android/blob/main/app/src/main/res/values/colors.xml
 
-/** @type {import("@mui/material").ThemeOptions['palette']} */
+/** @type {import("@mui/material").ThemeOptions} */
-export const lightPalette = {
+export const lightTheme = {
-  mode: "light",
+  ...baseThemeOptions,
-  primary: {
+  components: {
-    main: "#338574",
+    ...baseThemeOptions.components,
   },
-  secondary: {
+  palette: {
-    main: "#6cead0",
+    mode: "light",
-  },
+    primary: {
-  error: {
+      main: "#338574",
-    main: "#c30000",
+    },
+    secondary: {
+      main: "#6cead0",
+    },
+    error: {
+      main: "#c30000",
+    },
   },
 };
 
-/** @type {import("@mui/material").ThemeOptions['palette']} */
+/** @type {import("@mui/material").ThemeOptions} */
-export const darkPalette = {
+export const darkTheme = {
-  mode: "dark",
+  ...baseThemeOptions,
-  background: {
+  components: {
-    paper: "#1b2124",
+    ...baseThemeOptions.components,
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          color: "#000",
+          backgroundColor: "#aeaeae",
+        },
+      },
+    },
   },
-  primary: {
+  palette: {
-    main: "#65b5a3",
+    mode: "dark",
-  },
+    background: {
-  secondary: {
+      paper: "#1b2124",
-    main: "#6cead0",
+    },
-  },
+    primary: {
-  error: {
+      main: "#65b5a3",
-    main: "#fe4d2e",
+    },
+    secondary: {
+      main: "#6cead0",
+    },
+    error: {
+      main: "#fe4d2e",
+    },
   },
 };
-
-export default themeOptions;