feat: Ajout d'un bouton pour changer le theme

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>

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);

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 : "";

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="store.switchLanguage">🇫🇷</li>
-      <li v-if="store.language == 'fr-FR'" @click="changeLanguage">🇺🇸</li>
+      <li v-if="store.language == 'en-US'" @click="store.switchLanguage">🇺🇸</li>
     </ul>
   </header>
   <main>

src/stores.js

@@ -4,13 +4,29 @@ export const useStore = defineStore({
   id: "counter",
   state: () => ({
     language: "fr-FR",
+    theme: "",
   }),
   persist: {
     enabled: true,
   },
   actions: {
-    changeLanguage() {
+    switchLanguage() {
-      this.language = this.language == "fr-FR" ? "en-US" : "fr-FR"
+      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");
+      }
     },
   },
 });