2022-11-13 07:26:55 +03:00
|
|
|
/* eslint-disable react/no-danger */
|
2023-05-07 03:06:14 +03:00
|
|
|
import Head from 'next/head';
|
|
|
|
|
import { FC, useEffect, useState } from 'react';
|
2022-11-13 07:26:55 +03:00
|
|
|
import { useRecoilValue } from 'recoil';
|
|
|
|
|
import { ClientConfig } from '../../interfaces/client-config.model';
|
|
|
|
|
import { clientConfigStateAtom } from '../stores/ClientConfigStore';
|
|
|
|
|
|
|
|
|
|
export const Theme: FC = () => {
|
|
|
|
|
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
|
|
|
|
|
const { appearanceVariables, customStyles } = clientConfig;
|
|
|
|
|
|
2023-05-07 00:10:13 +03:00
|
|
|
const appearanceVars = Object.keys(appearanceVariables || {})
|
2022-11-13 07:26:55 +03:00
|
|
|
.filter(variable => !!appearanceVariables[variable])
|
|
|
|
|
.map(variable => `--${variable}: ${appearanceVariables[variable]}`);
|
|
|
|
|
|
2023-05-07 03:06:14 +03:00
|
|
|
const [themeColor, setThemeColor] = useState('#fff');
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const color = getComputedStyle(document.documentElement).getPropertyValue(
|
|
|
|
|
'--theme-color-background-header',
|
|
|
|
|
);
|
|
|
|
|
setThemeColor(color);
|
|
|
|
|
}, [appearanceVars]);
|
|
|
|
|
|
2022-11-13 07:26:55 +03:00
|
|
|
return (
|
2023-05-07 03:06:14 +03:00
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<meta name="theme-color" content={themeColor} />
|
|
|
|
|
</Head>
|
|
|
|
|
<style
|
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
|
__html: `
|
2022-11-13 07:26:55 +03:00
|
|
|
:root {
|
|
|
|
|
${appearanceVars.join(';\n')}
|
|
|
|
|
}
|
2023-06-28 03:43:46 +03:00
|
|
|
`,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<style
|
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
|
__html: `
|
2022-11-13 07:26:55 +03:00
|
|
|
${customStyles}
|
|
|
|
|
`,
|
2023-05-07 03:06:14 +03:00
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
2022-11-13 07:26:55 +03:00
|
|
|
);
|
|
|
|
|
};
|
