refactor frontend

Signed-off-by: Omar Sánchez Pizarro <omar.sanchez@pistacero.net>

web/frontend/src/presentation/composables/useDarkMode.js

@@ -0,0 +1,37 @@
+import { ref, onMounted } from 'vue';
+
+export function useDarkMode() {
+  const isDark = ref(false);
+
+  function toggle() {
+    isDark.value = !isDark.value;
+    if (isDark.value) {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('darkMode', 'true');
+    } else {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('darkMode', 'false');
+    }
+  }
+
+  function init() {
+    const saved = localStorage.getItem('darkMode');
+    if (saved === 'true' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      isDark.value = true;
+      document.documentElement.classList.add('dark');
+    } else {
+      isDark.value = false;
+      document.documentElement.classList.remove('dark');
+    }
+  }
+
+  onMounted(() => {
+    init();
+  });
+
+  return {
+    isDark,
+    toggle,
+    init,
+  };
+}