Support color customization from the admin (#2338)

* Add user-customizable theming. Closes #1915

* Prettified Code!

* Add user-customizable theming. Closes #1915

* Add explicit color for page content background

* Prettified Code!

Co-authored-by: gabek <gabek@users.noreply.github.com>

web/components/theme/Theme.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable react/no-danger */
+import { FC } from 'react';
+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;
+
+  const appearanceVars = Object.keys(appearanceVariables)
+    .filter(variable => !!appearanceVariables[variable])
+    .map(variable => `--${variable}: ${appearanceVariables[variable]}`);
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: `
+				:root {
+					${appearanceVars.join(';\n')}
+				}
+				${customStyles}
+			`,
+      }}
+    />
+  );
+};