From c531e7231d3360eb5caaab3f51389fab6b809fe6 Mon Sep 17 00:00:00 2001
From: Alexandre Tuleu <alexandre.tuleu.2005@polytechnique.org>
Date: Mon, 14 Aug 2023 09:48:51 +0200
Subject: [PATCH] Added rendering of css variable the header.

---
 src/routes/+page.svelte | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cf44d90..ef7005b 100644
--- a/src/routes/+page.svelte
+++ b/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>