feat: Ajout d'un bouton pour changer le theme
This commit is contained in:
parent
0ead0dacc6
commit
a14621cdbe
10
src/App.vue
10
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>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 : "";
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue