Merge pull request #792 from nimbleghost/fix-ntfy-banner

Fix ntfy upgrade banner in dark mode

web/src/components/ActionBar.jsx

@@ -44,7 +44,10 @@ const ActionBar = (props) => {
       <Toolbar
         sx={{
           pr: "24px",
-          background: theme.palette.actionBarBackground,
+          background:
+            theme.palette.mode === "light"
+              ? "linear-gradient(150deg, #338574 0%, #56bda8 100%)"
+              : "linear-gradient(150deg, #203631 0%, #2a6e60 100%)",
         }}
       >
         <IconButton

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/Navigation.jsx

@@ -18,6 +18,7 @@ import {
   Box,
   IconButton,
   Button,
+  useTheme,
 } from "@mui/material";
 import * as React from "react";
 import { useContext, useState } from "react";
@@ -82,6 +83,7 @@ const Navigation = (props) => {
 Navigation.width = navWidth;
 
 const NavList = (props) => {
+  const theme = useTheme();
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
@@ -190,7 +192,11 @@ const NavList = (props) => {
           </ListItemIcon>
           <ListItemText primary={t("nav_button_subscribe")} />
         </ListItemButton>
-        {showUpgradeBanner && <UpgradeBanner />}
+        {showUpgradeBanner && (
+          // The text background gradient didn't seem to do well with switching between light/dark mode,
+          // So adding a `key` forces React to replace the entire component when the theme changes
+          <UpgradeBanner key={`upgrade-banner-${theme.palette.mode}`} mode={theme.palette.mode} />
+        )}
       </List>
       <SubscribeDialog
         key={`subscribeDialog${subscribeDialogKey}`} // Resets dialog when canceled/closed
@@ -203,7 +209,7 @@ const NavList = (props) => {
   );
 };
 
-const UpgradeBanner = () => {
+const UpgradeBanner = ({ mode }) => {
   const { t } = useTranslation();
   const [dialogKey, setDialogKey] = useState(0);
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -220,13 +226,16 @@ const UpgradeBanner = () => {
         width: `${Navigation.width - 1}px`,
         bottom: 0,
         mt: "auto",
-        background: "linear-gradient(150deg, rgba(196, 228, 221, 0.46) 0%, rgb(255, 255, 255) 100%)",
+        background:
+          mode === "light"
+            ? "linear-gradient(150deg, rgba(196, 228, 221, 0.46) 0%, rgb(255, 255, 255) 100%)"
+            : "linear-gradient(150deg, #203631 0%, #2a6e60 100%)",
       }}
     >
       <Divider />
       <ListItemButton onClick={handleClick} sx={{ pt: 2, pb: 2 }}>
         <ListItemIcon>
-          <CelebrationIcon sx={{ color: "#55b86e" }} fontSize="large" />
+          <CelebrationIcon sx={{ color: mode === "light" ? "#55b86e" : "#00ff95" }} fontSize="large" />
         </ListItemIcon>
         <ListItemText
           sx={{ ml: 1 }}
@@ -236,7 +245,10 @@ const UpgradeBanner = () => {
             style: {
               fontWeight: 500,
               fontSize: "1.1rem",
-              background: "-webkit-linear-gradient(45deg, #09009f, #00ff95 80%)",
+              background:
+                mode === "light"
+                  ? "-webkit-linear-gradient(45deg, #09009f, #00ff95 80%)"
+                  : "-webkit-linear-gradient(45deg,rgb(255, 255, 255), #00ff95 80%)",
               WebkitBackgroundClip: "text",
               WebkitTextFillColor: "transparent",
             },

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,11 +39,24 @@ export const lightPalette = {
     error: {
       main: "#c30000",
     },
-  actionBarBackground: "linear-gradient(150deg, #338574 0%, #56bda8 100%)",
+  },
 };
 
-/** @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",
@@ -52,7 +70,5 @@ export const darkPalette = {
     error: {
       main: "#fe4d2e",
     },
-  actionBarBackground: "linear-gradient(150deg, #203631 0%, #2a6e60 100%)",
+  },
 };
-
-export default themeOptions;