From a14621cdbe3bcc82ca6af5a703efc57d52a65184 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Tue, 7 Mar 2023 11:14:59 +0100
Subject: [PATCH] feat: Ajout d'un bouton pour changer le theme

---
 src/App.vue                   | 10 ++++++++++
 src/assets/base.css           |  7 ++++++-
 src/components/Score.vue      |  4 ++--
 src/components/ScoresList.vue | 30 +++++++++++++++++++++++++-----
 src/stores.js                 | 20 ++++++++++++++++++--
 5 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e13c07e..fc0de71 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,15 @@
 <script setup>
 import { RouterView } from "vue-router";
+import { useStore } from "@/stores";
+
+const store = useStore();
+if (store.theme == "dark") {
+  document.body.classList.remove("theme-light");
+  document.body.classList.add("theme-dark");
+} else if (store.theme == "light") {
+  document.body.classList.remove("theme-dark");
+  document.body.classList.add("theme-light");
+}
 </script>
 
 <template>
diff --git a/src/assets/base.css b/src/assets/base.css
index 6e4dee0..5bd4f85 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -11,13 +11,18 @@
 }
 
 /* semantic color variables for this project */
-:root {
+:root, body.theme-light {
   --color-background: var(--color-white);
   --color-text: var(--color-black);
   --color-highlight: var(--color-green);
   --header-size: var(--header-size-small);
 }
 
+body.theme-dark {
+  --color-background: var(--color-black);
+  --color-text: var(--color-white);
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --color-background: var(--color-black);
diff --git a/src/components/Score.vue b/src/components/Score.vue
index 270c662..24aa0c0 100644
--- a/src/components/Score.vue
+++ b/src/components/Score.vue
@@ -36,7 +36,7 @@ function formatAnswers(answers) {
         weight: answer.weight,
         image: answer.image,
       };
-    })
+    });
 }
 
 function formatScore(score) {
@@ -54,7 +54,7 @@ function formatScore(score) {
         answers: answers,
         splide: ref(),
       };
-    })
+    });
 }
 
 const title = score ? score.title : "";
diff --git a/src/components/ScoresList.vue b/src/components/ScoresList.vue
index e59c03a..bd60db7 100644
--- a/src/components/ScoresList.vue
+++ b/src/components/ScoresList.vue
@@ -17,17 +17,37 @@ const scores = data.filter((score) => {
 function getTranslation(translations, key) {
   return translations.find((translation) => translation[key] == store.language);
 }
-function changeLanguage() {
-  store.changeLanguage()
-}
 </script>
 
 <template>
   <header>
+    <ul>
+      <li
+        v-if="store.theme == ''"
+        @click="store.switchTheme"
+        title="Thème de votre système"
+      >
+        🌓
+      </li>
+      <li
+        v-if="store.theme == 'dark'"
+        @click="store.switchTheme"
+        title="Thème sombre"
+      >
+        🌑
+      </li>
+      <li
+        v-if="store.theme == 'light'"
+        @click="store.switchTheme"
+        title="Thème clair"
+      >
+        🌞
+      </li>
+    </ul>
     <h1>Ceiba Scores App</h1>
     <ul>
-      <li v-if="store.language == 'en-US'" @click="changeLanguage">🇫🇷</li>
-      <li v-if="store.language == 'fr-FR'" @click="changeLanguage">🇺🇸</li>
+      <li v-if="store.language == 'fr-FR'" @click="store.switchLanguage">🇫🇷</li>
+      <li v-if="store.language == 'en-US'" @click="store.switchLanguage">🇺🇸</li>
     </ul>
   </header>
   <main>
diff --git a/src/stores.js b/src/stores.js
index 6316e8f..e481ed8 100644
--- a/src/stores.js
+++ b/src/stores.js
@@ -4,13 +4,29 @@ export const useStore = defineStore({
   id: "counter",
   state: () => ({
     language: "fr-FR",
+    theme: "",
   }),
   persist: {
     enabled: true,
   },
   actions: {
-    changeLanguage() {
-      this.language = this.language == "fr-FR" ? "en-US" : "fr-FR"
+    switchLanguage() {
+      this.language = this.language == "fr-FR" ? "en-US" : "fr-FR";
+    },
+    switchTheme() {
+      if (this.theme == "") {
+        this.theme = "dark";
+        document.body.classList.remove("theme-light");
+        document.body.classList.add("theme-dark");
+      } else if (this.theme == "dark") {
+        this.theme = "light";
+        document.body.classList.remove("theme-dark");
+        document.body.classList.add("theme-light");
+      } else {
+        this.theme = "";
+        document.body.classList.remove("theme-light");
+        document.body.classList.remove("theme-dark");
+      }
     },
   },
 });