astra
/
ntfy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update colors

pull/790/head
nimbleghost 2023-06-28 17:20:01 +02:00
parent 4f39c7c155
commit e607944ad1
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/ActionBar.jsx
View File

@ -1,4 +1,4 @@
import { AppBar, Toolbar, IconButton, Typography, Box, MenuItem, Button, Divider, ListItemIcon } from "@mui/material"; import { AppBar, Toolbar, IconButton, Typography, Box, MenuItem, Button, Divider, ListItemIcon, useTheme } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu"; import MenuIcon from "@mui/icons-material/Menu";
import * as React from "react"; import * as React from "react";
import { useState } from "react"; import { useState } from "react";
@ -21,6 +21,7 @@ import PopupMenu from "./PopupMenu";
import { SubscriptionPopup } from "./SubscriptionPopup"; import { SubscriptionPopup } from "./SubscriptionPopup";
const ActionBar = (props) => { const ActionBar = (props) => {
const theme = useTheme();
const { t } = useTranslation(); const { t } = useTranslation();
const location = useLocation(); const location = useLocation();
let title = "ntfy"; let title = "ntfy";
@ -43,7 +44,7 @@ const ActionBar = (props) => {
<Toolbar <Toolbar
sx={{ sx={{
pr: "24px", pr: "24px",
background: "linear-gradient(150deg, rgba(51,133,116,1) 0%, rgba(86,189,168,1) 100%)", background: theme.palette.actionBarBackground,
}} }}
> >
<IconButton <IconButton

17
web/src/components/theme.js
View File

@ -1,5 +1,3 @@
import { grey, red } from "@mui/material/colors";
/** @type {import("@mui/material").ThemeOptions} */ /** @type {import("@mui/material").ThemeOptions} */
const themeOptions = { const themeOptions = {
components: { components: {
@ -22,6 +20,8 @@ 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['palette']} */
export const lightPalette = { export const lightPalette = {
mode: "light", mode: "light",
@ -32,20 +32,27 @@ export const lightPalette = {
main: "#6cead0", main: "#6cead0",
}, },
error: { error: {
main: red.A400, main: "#c30000",
}, },
actionBarBackground: "linear-gradient(150deg, #338574 0%, #56bda8 100%)",
}; };
/** @type {import("@mui/material").ThemeOptions['palette']} */ /** @type {import("@mui/material").ThemeOptions['palette']} */
export const darkPalette = { export const darkPalette = {
...lightPalette,
mode: "dark", mode: "dark",
background: { background: {
paper: grey["800"], paper: "#1b2124",
}, },
primary: { primary: {
main: "#65b5a3",
},
secondary: {
main: "#6cead0", main: "#6cead0",
}, },
error: {
main: "#fe4d2e",
},
actionBarBackground: "linear-gradient(150deg, #203631 0%, #2a6e60 100%)",
}; };
export default themeOptions; export default themeOptions;