From d838790b8fbca371750d3c51c4d38bb841fe7ef0 Mon Sep 17 00:00:00 2001 From: nimbleghost <132819643+nimbleghost@users.noreply.github.com> Date: Wed, 28 Jun 2023 20:42:34 +0200 Subject: [PATCH 1/3] Fix ntfy upgrade banner in dark mode --- web/src/components/ActionBar.jsx | 5 ++++- web/src/components/Navigation.jsx | 22 +++++++++++++++++----- web/src/components/theme.js | 2 -- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/web/src/components/ActionBar.jsx b/web/src/components/ActionBar.jsx index 6a36cdb6..62a16286 100644 --- a/web/src/components/ActionBar.jsx +++ b/web/src/components/ActionBar.jsx @@ -44,7 +44,10 @@ const ActionBar = (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) => { - {showUpgradeBanner && } + {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 + + )} { ); }; -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%)", }} > - + { 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", }, diff --git a/web/src/components/theme.js b/web/src/components/theme.js index f789a0c5..cdfaf07d 100644 --- a/web/src/components/theme.js +++ b/web/src/components/theme.js @@ -34,7 +34,6 @@ export const lightPalette = { error: { main: "#c30000", }, - actionBarBackground: "linear-gradient(150deg, #338574 0%, #56bda8 100%)", }; /** @type {import("@mui/material").ThemeOptions['palette']} */ @@ -52,7 +51,6 @@ export const darkPalette = { error: { main: "#fe4d2e", }, - actionBarBackground: "linear-gradient(150deg, #203631 0%, #2a6e60 100%)", }; export default themeOptions; From 0d231d8bd9f4783367548043b60198b202af3716 Mon Sep 17 00:00:00 2001 From: nimbleghost <132819643+nimbleghost@users.noreply.github.com> Date: Wed, 28 Jun 2023 21:18:04 +0200 Subject: [PATCH 2/3] Fix snackbars in dark mode --- web/src/components/App.jsx | 10 ++---- web/src/components/theme.js | 70 +++++++++++++++++++++++-------------- 2 files changed, 46 insertions(+), 34 deletions(-) diff --git a/web/src/components/App.jsx b/web/src/components/App.jsx index 6c4761f1..70d6936a 100644 --- a/web/src/components/App.jsx +++ b/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] ); diff --git a/web/src/components/theme.js b/web/src/components/theme.js index cdfaf07d..64217eee 100644 --- a/web/src/components/theme.js +++ b/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']} */ -export const lightPalette = { - mode: "light", - primary: { - main: "#338574", +/** @type {import("@mui/material").ThemeOptions} */ +export const lightTheme = { + ...baseThemeOptions, + components: { + ...baseThemeOptions.components, }, - secondary: { - main: "#6cead0", - }, - error: { - main: "#c30000", + palette: { + mode: "light", + primary: { + main: "#338574", + }, + secondary: { + main: "#6cead0", + }, + error: { + main: "#c30000", + }, }, }; -/** @type {import("@mui/material").ThemeOptions['palette']} */ -export const darkPalette = { - mode: "dark", - background: { - paper: "#1b2124", +/** @type {import("@mui/material").ThemeOptions} */ +export const darkTheme = { + ...baseThemeOptions, + components: { + ...baseThemeOptions.components, + MuiSnackbarContent: { + styleOverrides: { + root: { + color: "#000", + backgroundColor: "#aeaeae", + }, + }, + }, }, - primary: { - main: "#65b5a3", - }, - secondary: { - main: "#6cead0", - }, - error: { - main: "#fe4d2e", + palette: { + mode: "dark", + background: { + paper: "#1b2124", + }, + primary: { + main: "#65b5a3", + }, + secondary: { + main: "#6cead0", + }, + error: { + main: "#fe4d2e", + }, }, }; - -export default themeOptions; From 6b4c04c390c45b16b72729ba1f7ac8198bd2fc10 Mon Sep 17 00:00:00 2001 From: nimbleghost <132819643+nimbleghost@users.noreply.github.com> Date: Thu, 29 Jun 2023 00:22:58 +0200 Subject: [PATCH 3/3] Make action bar match theme colour when run as PWA --- web/src/components/ActionBar.jsx | 24 ++++++++++++++++++++---- web/src/components/Navigation.jsx | 2 +- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/web/src/components/ActionBar.jsx b/web/src/components/ActionBar.jsx index 62a16286..1f41aac0 100644 --- a/web/src/components/ActionBar.jsx +++ b/web/src/components/ActionBar.jsx @@ -19,11 +19,14 @@ import Navigation from "./Navigation"; import accountApi from "../app/AccountApi"; import PopupMenu from "./PopupMenu"; import { SubscriptionPopup } from "./SubscriptionPopup"; +import { useIsLaunchedPWA } from "./hooks"; const ActionBar = (props) => { const theme = useTheme(); const { t } = useTranslation(); const location = useLocation(); + const isLaunchedPWA = useIsLaunchedPWA(); + let title = "ntfy"; if (props.selected) { title = topicDisplayName(props.selected); @@ -32,6 +35,22 @@ const ActionBar = (props) => { } else if (location.pathname === routes.account) { title = t("action_bar_account"); } + + const getActionBarBackground = () => { + if (isLaunchedPWA) { + return "#317f6f"; + } + + switch (theme.palette.mode) { + case "dark": + return "linear-gradient(150deg, #203631 0%, #2a6e60 100%)"; + + case "light": + default: + return "linear-gradient(150deg, #338574 0%, #56bda8 100%)"; + } + }; + return ( { { return ( <> - + {showNotificationPermissionRequired && } {showNotificationPermissionDenied && } {showNotificationBrowserNotSupportedBox && }