feat: Ajout d'un bouton pour changer le theme
continuous-integration/drone/push Build is passing Details
continuous-integration/drone Build is passing Details

This commit is contained in:
Simon 2023-03-07 11:14:59 +01:00
parent 0ead0dacc6
commit a14621cdbe
5 changed files with 61 additions and 10 deletions

View File

@ -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>

View File

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

View File

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

View File

@ -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>

View File

@ -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");
}
},
},
});