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,85 @@ 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
+      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

@@ -7,6 +7,7 @@ export {};
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    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']
@@ -18,6 +19,7 @@ declare module 'vue' {
     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']