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({
-        ...themeOptions,
-        palette: {
-          ...(darkModeEnabled(prefersDarkMode, themePreference) ? darkPalette : lightPalette),
-        },
-      }),
+    () => createTheme(darkModeEnabled(prefersDarkMode, themePreference) ? darkTheme : lightTheme),
     [prefersDarkMode, themePreference]
   );
 

web/src/components/theme.js

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