Added rendering of css variable the header.

src/routes/+page.svelte

@@ -4,8 +4,22 @@
 	import type { PageData } from './$types';
 
 	export let data: PageData;
+
+	function renderColorVariables(): string {
+		const cssVars: Array<string> = [];
+		for (const [key, value] of Object.entries(data.config.colors.dark)) {
+			cssVars.push(`--${key}:${value}`);
+		}
+		return '<style>:root{' + cssVars.join(';') + '}</style>';
+	}
 </script>
 
+<svelte:head>
+	<!-- it is safe here because config is comming from config.yml and thus is trusted. -->
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html renderColorVariables()}
+</svelte:head>
+
 <header>
 	<Brand brand={data.config} />
 	<h1>{data.config.title}</h1>
@@ -16,3 +30,4 @@
 {#each data.config.services as group, i}
 	<ServiceGroup {group} groupData={data.serviceData[i]} />
 {/each}
+<pre> {JSON.stringify(data.config, null, 2)}</pre>