feat: Ajout d'un bouton pour changer le theme

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="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>