From a4ac87f24db06b4f7ad093c623688eaeffb985fc Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sat, 3 Jul 2021 14:27:57 +0100
Subject: [PATCH] Add helmet for theme-color in settings. Update colours in
main app.
---
src/context/Theme.tsx | 2 +-
src/pages/settings/GenericSettings.tsx | 17 +++++++++++++++--
2 files changed, 16 insertions(+), 3 deletions(-)
diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx
index e37f0b6..a348dd0 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 6b20e0c..5f11d61 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" ? (
--
GitLab