diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx
index e37f0b6549e6ad7dcf2b3c36ad7979067056f45c..a348dd02a1cb01b6044a322bf6f7869044e5f9e5 100644
--- a/src/context/Theme.tsx
+++ b/src/context/Theme.tsx
@@ -134,7 +134,7 @@ function Theme(props: Props) {
                     content={
                         isTouchscreenDevice
                             ? theme["primary-header"]
-                            : theme["tertiary-background"]
+                            : theme["background"]
                     }
                 />
             </Helmet>
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index 6b20e0c351df33a36a1b719b5972988a34c41936..5f11d615f4063cf33371230d6614534c21d9b58e 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -1,15 +1,17 @@
 import { Text } from "preact-i18n";
-import { useEffect } from "preact/hooks";
+import { Helmet } from "react-helmet";
 import styles from "./Settings.module.scss";
 import { Children } from "../../types/Preact";
 import Header from '../../components/ui/Header';
+import { ThemeContext } from "../../context/Theme";
 import Category from '../../components/ui/Category';
+import { useContext, useEffect } from "preact/hooks";
 import IconButton from "../../components/ui/IconButton";
 import LineDivider from "../../components/ui/LineDivider";
-import { ArrowBack, X, XCircle } from "@styled-icons/boxicons-regular";
 import { Switch, useHistory, useParams } from "react-router-dom";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import ButtonItem from "../../components/navigation/items/ButtonItem";
+import { ArrowBack, X, XCircle } from "@styled-icons/boxicons-regular";
 
 interface Props {
     pages: {
@@ -30,6 +32,7 @@ interface Props {
 
 export function GenericSettings({ pages, switchPage, category, custom, children, defaultPage, showExitButton }: Props) {
     const history = useHistory();
+    const theme = useContext(ThemeContext);
     const { page } = useParams<{ page: string; }>();
 
     function exitSettings() {
@@ -53,6 +56,16 @@ export function GenericSettings({ pages, switchPage, category, custom, children,
 
     return (
         <div className={styles.settings} data-mobile={isTouchscreenDevice}>
+            <Helmet>
+                <meta
+                    name="theme-color"
+                    content={
+                        isTouchscreenDevice
+                            ? theme["primary-header"]
+                            : theme["background"]
+                    }
+                />
+            </Helmet>
             {isTouchscreenDevice && (
                 <Header placement="primary">
                     {typeof page === "undefined" ? (