Add setting to toggle light/dark mode

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Settings/PreferencesView.vue

@@ -13,6 +13,36 @@
       ]"
     />
     <div>
+      <o-field :label="t('Theme')" addonsClass="flex flex-col">
+        <o-field>
+          <o-checkbox v-model="systemTheme">{{
+            t("Adapt to system theme")
+          }}</o-checkbox>
+        </o-field>
+        <o-field>
+          <fieldset>
+            <legend class="sr-only">{{ t("Theme") }}</legend>
+            <o-radio
+              :class="{ 'border-mbz-bluegreen border-2': theme === 'light' }"
+              class="p-4 bg-white text-zinc-800 rounded-md mt-2 mr-2"
+              :disabled="systemTheme"
+              v-model="theme"
+              name="theme"
+              native-value="light"
+              >{{ t("Light") }}</o-radio
+            >
+            <o-radio
+              :class="{ 'border-mbz-bluegreen border-2': theme === 'dark' }"
+              class="p-4 bg-zinc-800 rounded-md text-white mt-2 ml-2"
+              :disabled="systemTheme"
+              v-model="theme"
+              name="theme"
+              native-value="dark"
+              >{{ t("Dark") }}</o-radio
+            >
+          </fieldset>
+        </o-field>
+      </o-field>
       <o-field :label="t('Language')" label-for="setting-language">
         <o-select
           :loading="loadingTimezones || loadingUserSettings"
@@ -120,7 +150,7 @@ import { Address, IAddress } from "@/types/address.model";
 import { useTimezones } from "@/composition/apollo/config";
 import { useUserSettings } from "@/composition/apollo/user";
 import { useHead } from "@vueuse/head";
-import { computed, defineAsyncComponent } from "vue";
+import { computed, defineAsyncComponent, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useMutation } from "@vue/apollo-composable";
 
@@ -140,6 +170,44 @@ useHead({
 
 // langs: Record<string, string> = langs;
 
+const theme = ref(localStorage.getItem("theme"));
+const systemTheme = ref(!("theme" in localStorage));
+
+watch(systemTheme, (newSystemTheme) => {
+  console.debug("changing system theme", newSystemTheme);
+  if (newSystemTheme) {
+    theme.value = null;
+    localStorage.removeItem("theme");
+  } else {
+    theme.value = "light";
+    localStorage.setItem("theme", theme.value);
+  }
+  changeTheme();
+});
+
+watch(theme, (newTheme) => {
+  console.debug("changing theme value", newTheme);
+  if (newTheme) {
+    localStorage.setItem("theme", newTheme);
+  }
+  changeTheme();
+});
+
+const changeTheme = () => {
+  console.debug("changing theme to apply");
+  if (
+    localStorage.getItem("theme") === "dark" ||
+    (!("theme" in localStorage) &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches)
+  ) {
+    console.debug("applying dark theme");
+    document.documentElement.classList.add("dark");
+  } else {
+    console.debug("removing dark theme");
+    document.documentElement.classList.remove("dark");
+  }
+};
+
 const selectedTimezone = computed({
   get() {
     if (loggedUser.value?.settings?.timezone) {