mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 12:49:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

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" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<meta
name="viewport"
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 */
import { FC } from 'react';
import Head from 'next/head';
import { FC, useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { ClientConfig } from '../../interfaces/client-config.model';
import { clientConfigStateAtom } from '../stores/ClientConfigStore';
@ -12,16 +13,30 @@ export const Theme: FC = () => {
.filter(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 (
<style
dangerouslySetInnerHTML={{
__html: `
<>
<Head>
<meta name="theme-color" content={themeColor} />
</Head>
<style
dangerouslySetInnerHTML={{
__html: `
:root {
${appearanceVars.join(';\n')}
}
${customStyles}
`,
}}
/>
}}
/>
</>
);
};