parra/ntfy
parra/ntfy
1
0
Fork 0
mirror of https://github.com/binwiederhier/ntfy.git synced 2024-11-26 05:09:16 +01:00
Code Releases Activity

Fix snackbars in dark mode

Browse source
This commit is contained in:
nimbleghost 2023-06-28 21:18:04 +02:00
parent d838790b8f
commit 0d231d8bd9
2 changed files with 46 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
web/src/components/App.jsx
View file

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

70
web/src/components/theme.js
View file

@ -1,5 +1,5 @@
/** @type {import("@mui/material").ThemeOptions} */ /** @type {import("@mui/material").ThemeOptions} */
const themeOptions = { const baseThemeOptions = {
components: { components: {
MuiListItemIcon: { MuiListItemIcon: {
styleOverrides: { styleOverrides: {
@ -22,35 +22,53 @@ const themeOptions = {
// https://github.com/binwiederhier/ntfy-android/blob/main/app/src/main/res/values/colors.xml // 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;