From 6f6178b066fe8c64c4c9a64d95bd00f04285458d Mon Sep 17 00:00:00 2001
From: Alexandre Tuleu <alexandre.tuleu.2005@polytechnique.org>
Date: Mon, 14 Aug 2023 15:40:35 +0200
Subject: [PATCH] Adds a theme selector

---
 src/lib/components/ThemeVariantButton.svelte | 20 +++++++++++++
 src/lib/themeVariant.ts                      |  5 ++++
 src/routes/+layout.svelte                    |  5 +++-
 src/routes/+page.svelte                      | 30 ++++++++++++++++++--
 4 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/ThemeVariantButton.svelte
 create mode 100644 src/lib/themeVariant.ts

diff --git a/src/lib/components/ThemeVariantButton.svelte b/src/lib/components/ThemeVariantButton.svelte
new file mode 100644
index 0000000..4ac937d
--- /dev/null
+++ b/src/lib/components/ThemeVariantButton.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { themeVariant, type ThemeVariant } from '$lib/themeVariant';
+
+	const variants: Array<ThemeVariant> = ['default', 'dark', 'light'];
+
+	function next() {
+		const newVariant = (variants.findIndex((v) => v == $themeVariant) + 1) % 3;
+		themeVariant.set(variants[newVariant]);
+	}
+</script>
+
+<button on:click={next}>
+	{#if $themeVariant == 'default'}
+		<i class="fa fa-circle-half-stroke" />
+	{:else if $themeVariant == 'light'}
+		<i class="fa-regular fa-circle" />
+	{:else if $themeVariant == 'dark'}
+		<i class="fa-solid fa-circle" />
+	{/if}
+</button>
diff --git a/src/lib/themeVariant.ts b/src/lib/themeVariant.ts
new file mode 100644
index 0000000..5e7a7ed
--- /dev/null
+++ b/src/lib/themeVariant.ts
@@ -0,0 +1,5 @@
+import { persistentWritable } from './persistentStore';
+
+export type ThemeVariant = 'default' | 'dark' | 'light';
+
+export const themeVariant = persistentWritable<ThemeVariant>('theme-variant', 'default');
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 68cf6a1..bf2c504 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import '@fortawesome/fontawesome-free/css/all.min.css';
+	import { themeVariant } from '$lib/themeVariant';
 </script>
 
-<slot />
+<div class:is-light={$themeVariant == 'light'} class:is-dark={$themeVariant == 'dark'}>
+	<slot />
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ef7005b..ac4e802 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,16 +1,39 @@
 <script lang="ts">
 	import Brand from '$lib/components/Brand.svelte';
 	import ServiceGroup from '$lib/components/ServiceGroup.svelte';
+	import ThemeVariantButton from '$lib/components/ThemeVariantButton.svelte';
+	import type { ColorConfig } from '$lib/config';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 
-	function renderColorVariables(): string {
+	function cssVariables(colors: ColorConfig): string {
 		const cssVars: Array<string> = [];
-		for (const [key, value] of Object.entries(data.config.colors.dark)) {
+		for (const [key, value] of Object.entries(colors)) {
 			cssVars.push(`--${key}:${value}`);
 		}
-		return '<style>:root{' + cssVars.join(';') + '}</style>';
+		return cssVars.join(';');
+	}
+
+	function renderColorVariables() {
+		return `<style>
+:root, body .is-light {
+  ${cssVariables(data.config.colors.light)}
+}
+@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
+  :root, body {
+    ${cssVariables(data.config.colors.light)}
+  }
+}
+:root, body .is-dark {
+  ${cssVariables(data.config.colors.dark)}
+}
+@media (prefers-color-scheme: dark) {
+  :root, body {
+    ${cssVariables(data.config.colors.dark)}
+  }
+}
+</style>`;
 	}
 </script>
 
@@ -26,6 +49,7 @@
 	{#if data.config.subtitle}
 		<h2>{data.config.subtitle}</h2>
 	{/if}
+	<ThemeVariantButton />
 </header>
 {#each data.config.services as group, i}
 	<ServiceGroup {group} groupData={data.serviceData[i]} />