From 07a04f52f4ac34933586eef3a450e572ffc795bb Mon Sep 17 00:00:00 2001
From: Citron <theo@de-carpentier.fr>
Date: Sun, 25 May 2025 16:05:43 +0200
Subject: [PATCH] [+] dark theme

---
 index.html                        |  2 +-
 src/App.vue                       | 73 +++++++++++++++++++++----------
 src/assets/style.css              | 25 +++--------
 src/components/ExperienceInfo.vue | 14 ++++--
 src/components/ResumePage.vue     | 18 ++++----
 5 files changed, 78 insertions(+), 54 deletions(-)
diff --git a/index.html b/index.html
index 37485da..c0f1bf6 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     <meta name="description" content="Morgane de Carpentier - Conceptrice Dévelopeuse FullStack sur Strasbourg.">
     <title>Morgane de Carpentier</title>
   </head>
-  <body class="text-sm min-h-screen bg-[#caca] print:min-h-0" id="app">
+  <body class="text-sm min-h-screen bg-[#caca] print:min-h-0 dark:bg-gray-900 dark:text-gray-300 print:text-black print:bg-white print-h-full" id="app">
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index cc1dcfb..db68613 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,12 @@
 <template>
 	<header
-		class="print:hidden sticky top-0 z-10 text-center border-b bg-[#caca]"
+		class="p-1 flex justify-between gap-1 items-center print:hidden sticky top-0 z-10 text-center border-b bg-[#caca] dark:bg-slate-900 border-gray-200 dark:border-gray-600"
 		:aria-label="t('Menu')"
 	>
 		<button
+			v-if="locale !== 'fr'"
 			@click="locale = 'fr'"
-			class="px-1 border rounded-sm hover:bg-slate-100 m-1 bg-white"
-			:aria-pressed="locale === 'fr'"
+			class="px-1 border rounded-sm border-gray-200 dark:border-gray-600 bg-white dark:bg-slate-700 hover:bg-slate-100 dark:hover:bg-slate-600"
 			lang="fr"
 		>
 			<img
@@ -17,14 +17,13 @@
 				:alt="t('IMG_ALT.FRENCH_FLAG')"
 				aria-hidden="true"
 			/>
-			<span class="sr-only"> Traduire en </span>
-			<span> Français </span>
+			<span> Traduire en français </span>
 		</button>
 
 		<button
+			v-else
 			@click="locale = 'en'"
-			class="px-1 border rounded-sm hover:bg-slate-100 m-1 bg-white"
-			:aria-pressed="locale === 'en'"
+			class="px-1 border rounded-sm border-gray-200 dark:border-gray-600 bg-white dark:bg-slate-700 hover:bg-slate-100 dark:hover:bg-slate-600"
 			lang="en"
 		>
 			<img
@@ -35,20 +34,31 @@
 				:alt="t('IMG_ALT.ENGLISH_FLAG')"
 				aria-hidden="true"
 			/>
-
-			<span class="sr-only"> Translate in </span>
-			<span> English </span>
+			<span> Translate in English </span>
 		</button>
 
-		<button
-			@click="print"
-			class="px-1 border rounded-sm hover:bg-slate-100 m-1 bg-white hidden md:inline"
-		>
-			<i
-				class="fa-solid fa-print"
-				aria-hidden="true"
-			></i>
-			{{ t("Imprimer") }}
+		<button class="bg-transparent mr-2">
+			<label class="relative inline-block w-9 h-5 cursor-pointer">
+				<input
+					v-model="useDarkTheme"
+					type="checkbox"
+					class="peer sr-only"
+				/>
+				<span
+					class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-blue-600 dark:bg-neutral-700 dark:peer-checked:bg-slate-500 peer-disabled:opacity-50 peer-disabled:pointer-events-none"
+				></span>
+				<span
+					class="absolute top-1/2 start-0.5 -translate-y-1/2 size-4 bg-white rounded-full shadow-xs transition-transform duration-200 ease-in-out peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white flex items-center justify-center"
+				>
+					<i
+						class="fa text-xs text-black"
+						:class="{
+							'fa-sun': !useDarkTheme,
+							'fa-moon': useDarkTheme,
+						}"
+					></i>
+				</span>
+			</label>
 		</button>
 	</header>
 
@@ -80,6 +90,10 @@ import { useI18n } from "vue-i18n";
 
 const { locale, t } = useI18n();
 const rolling = ref(false);
+const useDarkTheme = ref(
+	window.matchMedia &&
+		window.matchMedia("(prefers-color-scheme: dark)").matches,
+);
 
 watch(
 	() => locale.value,
@@ -89,14 +103,29 @@ watch(
 	{ immediate: true },
 );
 
-function print() {
-	window.print();
-}
+watch(
+	() => useDarkTheme.value,
+	() => {
+		if (useDarkTheme.value) {
+			document.body.classList.add("dark");
+		} else {
+			document.body.classList.remove("dark");
+		}
+	},
+	{ immediate: true },
+);
 
 function doABarrelRoll() {
 	if (rolling.value) {
 		return;
 	}
+
+	window.scroll({
+		top: 0,
+		left: 0,
+		behavior: "smooth",
+	});
+
 	rolling.value = true;
 	const avatar = document.getElementById("avatar")!.classList;
 	avatar.add("do-a-barrel-roll");
diff --git a/src/assets/style.css b/src/assets/style.css
index dc03381..a676ccf 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -1,27 +1,11 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
 	--font-fira-code: "Fira Code";
 }
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-	*,
-	::after,
-	::before,
-	::backdrop,
-	::file-selector-button {
-		border-color: var(--color-gray-200, currentcolor);
-	}
-}
-
 @layer base {
 	h1,
 	h2,
@@ -29,7 +13,10 @@
 		@apply font-fira-code;
 	}
 	a {
-		@apply text-blue-600;
+		@apply text-blue-600 dark:text-blue-400;
+	}
+	button {
+		@apply cursor-pointer disabled:cursor-default;
 	}
 }
 
diff --git a/src/components/ExperienceInfo.vue b/src/components/ExperienceInfo.vue
index 77182a9..9c68872 100644
--- a/src/components/ExperienceInfo.vue
+++ b/src/components/ExperienceInfo.vue
@@ -1,9 +1,15 @@
 <template>
-	<li class="grid md:grid-cols-6 md:gap-1 mt-2 md:mt-0">
-		<div class="md:col-span-1 text-center md:text-left text-slate-600">
+	<li
+		class="grid md:grid-cols-6 print:grid-cols-6 md:gap-1 print:gap-1 mt-2 md:mt-0 print:mt-0"
+	>
+		<div
+			class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600 print:text-slate-600 dark:text-slate-400"
+		>
 			{{ date }}
 		</div>
-		<div class="md:col-span-5 text-center md:text-left">
+		<div
+			class="md:col-span-5 print:col-span-5 text-center md:text-left print:text-left"
+		>
 			<span
 				class="font-bold"
 				v-if="title"
@@ -23,7 +29,7 @@
 			</ul>
 			<div
 				v-if="technos"
-				class="text-left text-slate-700 font-mono"
+				class="text-left text-slate-700 print:text-slate-700 dark:text-gray-400 font-mono"
 			>
 				<i
 					class="fab fa-envira text-slate-500 mr-1"
diff --git a/src/components/ResumePage.vue b/src/components/ResumePage.vue
index 4374c66..de38e34 100644
--- a/src/components/ResumePage.vue
+++ b/src/components/ResumePage.vue
@@ -1,10 +1,10 @@
 <template>
 	<main
 		:aria-label="t('Mon CV')"
-		class="relative md:h-[297mm] md:w-[210mm] overflow-hidden bg-white shadow-lg print:m-0 print:h-screen! print:w-screen! print:shadow-none grid md:grid-cols-3 print:grid-cols-3 md:grid-rows-[min-content_1fr] print:grid-rows-[min-content_1fr] m-auto"
+		class="relative md:h-[297mm] md:w-[210mm] overflow-hidden bg-white print:bg-white dark:bg-slate-700 shadow-lg print:m-0 print:min-h-screen! print:min-w-screen! print:shadow-none grid md:grid-cols-3 print:grid-cols-3 md:grid-rows-[min-content_1fr] print:grid-rows-[min-content_1fr] m-auto"
 	>
 		<div
-			class="order-1 md:col-span-1 print:col-span-1 md:p-[10mm] print:p-[10mm] md:pb-0 print:pb-0 md:bg-slate-100 print:bg-slate-100"
+			class="order-1 md:col-span-1 print:col-span-1 md:p-[10mm] print:p-[10mm] md:pb-0 print:pb-0 md:bg-slate-100 print:bg-slate-100 dark:bg-slate-800"
 		>
 			<div class="m-[4mm]">
 				<img
@@ -12,7 +12,7 @@
 					src="/avatar.webp"
 					height="150"
 					width="150"
-					class="rounded-full border-[#caca] border-[1mm] m-auto"
+					class="rounded-full border-[#caca] print:border-[#caca] dark:border-gray-600 border-[1mm] m-auto"
 					:alt="t('IMG_ALT.AVATAR')"
 				/>
 			</div>
@@ -66,7 +66,7 @@
 						class="grid md:grid-cols-6 print:grid-cols-6 md:gap-1 print:gap-1"
 					>
 						<div
-							class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600"
+							class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600 print:text-slate-600 dark:text-slate-400"
 						>
 							2014-2015
 						</div>
@@ -87,7 +87,7 @@
 						class="grid md:grid-cols-6 print:grid-cols-6 md:gap-1 print:gap-1"
 					>
 						<div
-							class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600"
+							class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600 print:text-slate-600 dark:text-slate-400"
 						>
 							2013-2014
 						</div>
@@ -101,7 +101,7 @@
 						class="grid md:grid-cols-6 print:grid-cols-6 md:gap-1 print:gap-1"
 					>
 						<div
-							class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600"
+							class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600 print:text-slate-600 dark:text-slate-400"
 						>
 							2011-2013
 						</div>
@@ -116,7 +116,7 @@
 			</section>
 		</div>
 		<div
-			class="order-4 md:order-3 print:order-3 md:col-span-1 print:col-span-1 p-[10mm] pr-[8px] bg-slate-100 grid grid-cols-2 md:grid-cols-1 print:grid-cols-1"
+			class="order-4 md:order-3 print:order-3 md:col-span-1 print:col-span-1 p-[10mm] pr-[8px] bg-slate-100 print:bg-slate-100 dark:bg-slate-800 grid grid-cols-2 md:grid-cols-1 print:grid-cols-1"
 		>
 			<section
 				class="order-4 md:order-1 print:order-1 md:mt-[6px] print:mt-[6px]"
@@ -261,7 +261,9 @@
 			aria-hidden="true"
 		>
 			<!-- Display the url links at the bottom of the resume when printed -->
-			<ul class="bg-white m-[10mm] mb-[8mm] p-[2mm] border rounded-sm">
+			<ul
+				class="bg-white/50 m-[4mm] p-[2mm] border border-dashed rounded-sm"
+			>
 				<li lang="en">
 					<sup aria-hidden="true">1</sup>
 					{{ t("LINKS.KISS") }}
