LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

fix(mobile): support a dynamic mobile browser theme color

Browse Source
This commit is contained in:
Gabe Kangas 2023-05-06 17:06:14 -07:00
parent 2c5949fecc
commit 630a5bf782
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/components/layouts/Main/Main.tsx
View File

@ -95,7 +95,6 @@ export const Main: FC = () => {
<link rel="authorization_endpoint" href="/api/auth/provider/indieauth" /> <link rel="authorization_endpoint" href="/api/auth/provider/indieauth" />
<meta name="msapplication-TileColor" content="#ffffff" /> <meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png" /> <meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

27
web/components/theme/Theme.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable react/no-danger */ /* eslint-disable react/no-danger */
import { FC } from 'react'; import Head from 'next/head';
import { FC, useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { ClientConfig } from '../../interfaces/client-config.model'; import { ClientConfig } from '../../interfaces/client-config.model';
import { clientConfigStateAtom } from '../stores/ClientConfigStore'; import { clientConfigStateAtom } from '../stores/ClientConfigStore';
@ -12,16 +13,30 @@ export const Theme: FC = () => {
.filter(variable => !!appearanceVariables[variable]) .filter(variable => !!appearanceVariables[variable])
.map(variable => `--${variable}: ${appearanceVariables[variable]}`); .map(variable => `--${variable}: ${appearanceVariables[variable]}`);
const [themeColor, setThemeColor] = useState('#fff');
useEffect(() => {
const color = getComputedStyle(document.documentElement).getPropertyValue(
'--theme-color-background-header',
);
setThemeColor(color);
}, [appearanceVars]);
return ( return (
<style <>
dangerouslySetInnerHTML={{ <Head>
__html: ` <meta name="theme-color" content={themeColor} />
</Head>
<style
dangerouslySetInnerHTML={{
__html: `
:root { :root {
${appearanceVars.join(';\n')} ${appearanceVars.join(';\n')}
} }
${customStyles} ${customStyles}
`, `,
}} }}
/> />
</>
); );
}; };