From 485f9a0202e0ebdd06e3c61a807647f2b29eefb2 Mon Sep 17 00:00:00 2001
From: Gabriel Arriagada <65878291+GNosii@users.noreply.github.com>
Date: Mon, 8 May 2023 01:57:37 +0000
Subject: [PATCH] add support for browser color preferences

---
 frontend/src/store/useSettingsStore.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/store/useSettingsStore.ts b/frontend/src/store/useSettingsStore.ts
index e496cf2c4..d255056d2 100644
--- a/frontend/src/store/useSettingsStore.ts
+++ b/frontend/src/store/useSettingsStore.ts
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import type { Ref } from "vue";
+import { Ref, isRef } from "vue";
 import { computed, ref, unref } from "vue";
 import { useAuthStore } from "~/store/auth";
 import { settingsLog } from "~/composables/useLog";
@@ -54,7 +54,7 @@ export const useSettingsStore = defineStore("settings", () => {
   async function saveSettings() {
     const store = useAuthStore();
     const data = {
-      theme: darkMode.value ? "dark" : "light",
+      theme: isRef(darkMode) ? (darkMode.value ? "dark" : "light") : getColorPreference(),
       language: locale.value,
     };
     try {
@@ -91,6 +91,15 @@ export const useSettingsStore = defineStore("settings", () => {
     });
   }
 
+  function getColorPreference() {
+    const media: MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+    media.addEventListener("change", (event) => {
+      settingsLog("preferred color scheme changed", event.matches);
+      darkMode.value = event.matches;
+    });
+    return media.matches ? "dark" : "light";
+  }
+
   return {
     darkMode,
     toggleDarkMode,