Add helmet for theme-color in settings.

Update colours in main app.
This commit is contained in:
Paul 2021-07-03 14:27:57 +01:00
parent 81dcc4789f
commit a4ac87f24d
2 changed files with 16 additions and 3 deletions

View file

@ -134,7 +134,7 @@ function Theme(props: Props) {
content={ content={
isTouchscreenDevice isTouchscreenDevice
? theme["primary-header"] ? theme["primary-header"]
: theme["tertiary-background"] : theme["background"]
} }
/> />
</Helmet> </Helmet>

View file

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