feat: 💄 add theme selection to website

frontend/src/App.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
+import darkThemeSvg from "@/assets/moon.svg";
+import lightThemeSvg from "@gouvfr/dsfr/dist/artwork/light.svg";
+import systemThemeSvg from "@gouvfr/dsfr/dist/artwork/pictograms/system/system.svg";
+
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import { registerSW } from "virtual:pwa-register";
 
-import HeaderMain from "@/components/HeaderMain.vue";
-
 const online = ref(navigator.onLine);
 
 const updateOnlineStatus = () => {
@@ -20,14 +22,86 @@ onBeforeUnmount(() => {
   window.removeEventListener("offline", updateOnlineStatus);
 });
 
+onMounted(useScheme);
+
 registerSW({ immediate: true });
+
+const preferences = reactive<{
+  theme: "dark" | "light" | undefined;
+  scheme: "dark" | "light" | "system" | undefined;
+}>({
+  theme: undefined,
+  scheme: undefined,
+});
+
+onMounted(() => {
+  const { theme, scheme, setScheme } = useScheme() as UseSchemeResult;
+  preferences.theme = theme.value as "dark" | "light";
+  preferences.scheme = scheme.value as "dark" | "light" | "system";
+
+  watchEffect(() => {
+    preferences.scheme = preferences.theme as "dark" | "light";
+  });
+
+  watchEffect(() =>
+    setScheme(preferences.scheme as "dark" | "light" | "system"),
+  );
+});
+
+const isThemeModalOpen = ref(false);
+const options = [
+  {
+    label: "Thème clair",
+    value: "light",
+    svgPath: lightThemeSvg,
+  },
+  {
+    label: "Thème sombre",
+    value: "dark",
+    img: darkThemeSvg,
+  },
+  {
+    label: "Thème système",
+    value: "system",
+    hint: "Utilise les paramètres système",
+    svgPath: systemThemeSvg,
+  },
+];
 </script>
 
 <template>
-  <HeaderMain v-show="online" />
+  <div v-show="online">
+    <AppHeader
+      :class="{ 'marianne-only': !wholeLogo }"
+      v-model="searchQuery"
+      :logo-text="logoText"
+      :quick-links="quickLinks"
+    >
+      <template #after-quick-links>
+        <DsfrButton
+          type="button"
+          icon="ri-sun-line"
+          label="Paramètres d'affichage"
+          @click="isThemeModalOpen = true"
+        />
+      </template>
+    </AppHeader>
+    <DsfrModal
+      :opened="isThemeModalOpen"
+      title="Changer le thème"
+      @close="isThemeModalOpen = false"
+    >
+      <DsfrRadioButtonSet
+        v-model="preferences.scheme"
+        :options="options"
+        name="theme-selector"
+        legend="Choisissez un thème pour personnaliser l’apparence du site."
+      />
+    </DsfrModal>
+  </div>
   <router-view v-if="online" />
   <div v-else id="app">
-    <HeaderMain />
+    <AppHeader />
     <div class="text-center relative top-1/6 m-4">
       <h1>Problème de connexion</h1>
       <p>Vous n'avez pas accès à Internet.</p>

frontend/src/components.d.ts

@@ -1,36 +1,37 @@
 /* eslint-disable */
+/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {};
-
-/* prettier-ignore */
-declare module 'vue' {
+export {}
+declare module "vue" {
   export interface GlobalComponents {
-    AskingExpert: typeof import('./components/AskingExpert.vue')['default']
-    ContactExpert: typeof import('./components/ContactExpert.vue')['default']
-    DsfrAlert: typeof import('@gouvminint/vue-dsfr')['DsfrAlert']
-    DsfrButton: typeof import('@gouvminint/vue-dsfr')['DsfrButton']
-    DsfrCheckbox: typeof import('@gouvminint/vue-dsfr')['DsfrCheckbox']
-    DsfrFileUpload: typeof import('@gouvminint/vue-dsfr')['DsfrFileUpload']
-    DsfrHeader: typeof import('@gouvminint/vue-dsfr')['DsfrHeader']
-    DsfrInput: typeof import('@gouvminint/vue-dsfr')['DsfrInput']
-    DsfrModal: typeof import('@gouvminint/vue-dsfr')['DsfrModal']
-    DsfrPicture: typeof import('@gouvminint/vue-dsfr')['DsfrPicture']
-    DsfrRadioButton: typeof import('@gouvminint/vue-dsfr')['DsfrRadioButton']
-    DsfrSelect: typeof import('@gouvminint/vue-dsfr')['DsfrSelect']
-    DsfrStepper: typeof import('@gouvminint/vue-dsfr')['DsfrStepper']
-    DsfrTable: typeof import('@gouvminint/vue-dsfr')['DsfrTable']
-    DsfrTag: typeof import('@gouvminint/vue-dsfr')['DsfrTag']
-    HeaderMain: typeof import('./components/HeaderMain.vue')['default']
-    MissingCardAlert: typeof import('./components/MissingCardAlert.vue')['default']
-    OnboardingSwiper: typeof import('./components/OnboardingSwiper.vue')['default']
-    PopupVideo: typeof import('./components/PopupVideo.vue')['default']
-    ResultPage: typeof import('./components/ResultPage.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SnackbarAlert: typeof import('./components/SnackbarAlert.vue')['default']
-    StepsGuide: typeof import('./components/StepsGuide.vue')['default']
-    VIcon: typeof import('@gouvminint/vue-dsfr')['VIcon']
+    AppHeader: (typeof import("./components/AppHeader.vue"))["default"];
+    AskingExpert: (typeof import("./components/AskingExpert.vue"))["default"];
+    ContactExpert: (typeof import("./components/ContactExpert.vue"))["default"];
+    DsfrAlert: (typeof import("@gouvminint/vue-dsfr"))["DsfrAlert"];
+    DsfrButton: (typeof import("@gouvminint/vue-dsfr"))["DsfrButton"];
+    DsfrCheckbox: (typeof import("@gouvminint/vue-dsfr"))["DsfrCheckbox"];
+    DsfrFileUpload: (typeof import("@gouvminint/vue-dsfr"))["DsfrFileUpload"];
+    DsfrHeader: (typeof import("@gouvminint/vue-dsfr"))["DsfrHeader"];
+    DsfrInput: (typeof import("@gouvminint/vue-dsfr"))["DsfrInput"];
+    DsfrModal: (typeof import("@gouvminint/vue-dsfr"))["DsfrModal"];
+    DsfrPicture: (typeof import("@gouvminint/vue-dsfr"))["DsfrPicture"];
+    DsfrRadioButton: (typeof import("@gouvminint/vue-dsfr"))["DsfrRadioButton"];
+    DsfrRadioButtonSet: (typeof import("@gouvminint/vue-dsfr"))["DsfrRadioButtonSet"];
+    DsfrSelect: (typeof import("@gouvminint/vue-dsfr"))["DsfrSelect"];
+    DsfrStepper: (typeof import("@gouvminint/vue-dsfr"))["DsfrStepper"];
+    DsfrTable: (typeof import("@gouvminint/vue-dsfr"))["DsfrTable"];
+    DsfrTag: (typeof import("@gouvminint/vue-dsfr"))["DsfrTag"];
+    HeaderMain: (typeof import("./components/HeaderMain.vue"))["default"];
+    MissingCardAlert: (typeof import("./components/MissingCardAlert.vue"))["default"];
+    OnboardingSwiper: (typeof import("./components/OnboardingSwiper.vue"))["default"];
+    PopupVideo: (typeof import("./components/PopupVideo.vue"))["default"];
+    ResultPage: (typeof import("./components/ResultPage.vue"))["default"];
+    RouterLink: (typeof import("vue-router"))["RouterLink"];
+    RouterView: (typeof import("vue-router"))["RouterView"];
+    SnackbarAlert: (typeof import("./components/SnackbarAlert.vue"))["default"];
+    StepsGuide: (typeof import("./components/StepsGuide.vue"))["default"];
+    VIcon: (typeof import("@gouvminint/vue-dsfr"))["VIcon"];
   }
 }