Add setting to toggle light/dark mode

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

js/src/App.vue

@@ -54,6 +54,7 @@ import {
   defineAsyncComponent,
   computed,
   watch,
+  onBeforeUnmount,
 } from "vue";
 import { LocationType } from "@/types/user-location.model";
 import { useMutation, useQuery } from "@vue/apollo-composable";
@@ -155,6 +156,7 @@ onBeforeMount(async () => {
 });
 
 const snackbar = inject<Snackbar>("snackbar");
+const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
 
 onMounted(() => {
   online.value = window.navigator.onLine;
@@ -187,6 +189,7 @@ onMounted(() => {
       },
     });
   });
+  darkModePreference.addEventListener("change", changeTheme);
 });
 
 onUnmounted(() => {
@@ -289,6 +292,23 @@ watch(config, async (configWatched: IConfig | undefined) => {
 });
 
 const isDemoMode = computed(() => config.value?.demoMode);
+
+const changeTheme = () => {
+  console.debug("changing theme");
+  if (
+    localStorage.getItem("theme") === "dark" ||
+    (!("theme" in localStorage) &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches)
+  ) {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+};
+
+onBeforeUnmount(() => {
+  darkModePreference.removeEventListener("change", changeTheme);
+});
 </script>
 
 <style lang="scss">

js/src/assets/oruga-tailwindcss.css

@@ -194,6 +194,10 @@ body {
   @apply pl-2;
 }
 
+.o-field--addons .o-radio:not(:only-child) input {
+  @apply rounded-full;
+}
+
 /* Editor */
 button.menubar__button {
   @apply dark:text-white;

js/src/i18n/en_US.json

@@ -1408,5 +1408,14 @@
   "Most recently published": "Most recently published",
   "Least recently published": "Least recently published",
   "With the most participants": "With the most participants",
-  "Number of members": "Number of members"
-}
+  "Number of members": "Number of members",
+  "More options": "More options",
+  "Reported by someone anonymously": "Reported by someone anonymously",
+  "Back to homepage": "Back to homepage",
+  "Category list": "Category list",
+  "No categories with public upcoming events on this instance were found.": "No categories with public upcoming events on this instance were found.",
+  "Theme": "Theme",
+  "Adapt to system theme": "Adapt to system theme",
+  "Light": "Light",
+  "Dark": "Dark"
+}

js/src/i18n/fr_FR.json

@@ -1406,5 +1406,14 @@
   "{timezoneLongName} ({timezoneShortName})": "{timezoneLongName} ({timezoneShortName})",
   "{title} ({count} todos)": "{title} ({count} todos)",
   "{username} was invited to {group}": "{username} a été invité à {group}",
-  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap"
+  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
+  "More options": "Plus d'options",
+  "Reported by someone anonymously": "Signalé par quelqu'un anonymement",
+  "Back to homepage": "Retour à la page d'accueil",
+  "Category list": "Liste des catégories",
+  "No categories with public upcoming events on this instance were found.": "Aucune catégorie avec des événements publics à venir n'a été trouvée.",
+  "Theme": "Thème",
+  "Adapt to system theme": "S’adapter au thème du système",
+  "Light": "Clair",
+  "Dark": "Sombre"
 }

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) {

js/tailwind.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   content: ["./public/**/*.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  darkMode: "class",
   theme: {
     extend: {
       colors: {

lib/web/templates/page/index.html.heex

@@ -7,6 +7,13 @@
     <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png" sizes="152x152" />
     <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color={theme_color()} />
     <meta name="theme-color" content={theme_color()} />
+    <script>
+      if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark')
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+    </script>
     <%= if is_root(assigns) do %>
       <link rel="preload" href="/img/shape-1.svg" as="image" />
       <link rel="preload" href="/img/shape-2.svg" as="image" />