diff --git a/web/src/components/ActionBar.jsx b/web/src/components/ActionBar.jsx
index a16022e4..6a36cdb6 100644
--- a/web/src/components/ActionBar.jsx
+++ b/web/src/components/ActionBar.jsx
@@ -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 * as React from "react";
 import { useState } from "react";
@@ -21,6 +21,7 @@ import PopupMenu from "./PopupMenu";
 import { SubscriptionPopup } from "./SubscriptionPopup";
 
 const ActionBar = (props) => {
+  const theme = useTheme();
   const { t } = useTranslation();
   const location = useLocation();
   let title = "ntfy";
@@ -43,7 +44,7 @@ const ActionBar = (props) => {
       <Toolbar
         sx={{
           pr: "24px",
-          background: "linear-gradient(150deg, rgba(51,133,116,1) 0%, rgba(86,189,168,1) 100%)",
+          background: theme.palette.actionBarBackground,
         }}
       >
         <IconButton
diff --git a/web/src/components/theme.js b/web/src/components/theme.js
index c833e631..f789a0c5 100644
--- a/web/src/components/theme.js
+++ b/web/src/components/theme.js
@@ -1,5 +1,3 @@
-import { grey, red } from "@mui/material/colors";
-
 /** @type {import("@mui/material").ThemeOptions} */
 const themeOptions = {
   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']} */
 export const lightPalette = {
   mode: "light",
@@ -32,20 +32,27 @@ export const lightPalette = {
     main: "#6cead0",
   },
   error: {
-    main: red.A400,
+    main: "#c30000",
   },
+  actionBarBackground: "linear-gradient(150deg, #338574 0%, #56bda8 100%)",
 };
 
 /** @type {import("@mui/material").ThemeOptions['palette']} */
 export const darkPalette = {
-  ...lightPalette,
   mode: "dark",
   background: {
-    paper: grey["800"],
+    paper: "#1b2124",
   },
   primary: {
+    main: "#65b5a3",
+  },
+  secondary: {
     main: "#6cead0",
   },
+  error: {
+    main: "#fe4d2e",
+  },
+  actionBarBackground: "linear-gradient(150deg, #203631 0%, #2a6e60 100%)",
 };
 
 export default themeOptions;