add user profiles and theme selectors

frontend/composables/use-preferences.ts

@@ -1,9 +1,41 @@
 import { Ref } from "vue";
 
+export type DaisyTheme =
+  | "light"
+  | "dark"
+  | "cupcake"
+  | "bumblebee"
+  | "emerald"
+  | "corporate"
+  | "synthwave"
+  | "retro"
+  | "cyberpunk"
+  | "valentine"
+  | "halloween"
+  | "garden"
+  | "forest"
+  | "aqua"
+  | "lofi"
+  | "pastel"
+  | "fantasy"
+  | "wireframe"
+  | "black"
+  | "luxury"
+  | "dracula"
+  | "cmyk"
+  | "autumn"
+  | "business"
+  | "acid"
+  | "lemonade"
+  | "night"
+  | "coffee"
+  | "winter";
+
 export type LocationViewPreferences = {
   showDetails: boolean;
   showEmpty: boolean;
   editorSimpleView: boolean;
+  theme: DaisyTheme;
 };
 
 /**
@@ -17,6 +49,7 @@ export function useViewPreferences(): Ref<LocationViewPreferences> {
       showDetails: true,
       showEmpty: true,
       editorSimpleView: true,
+      theme: "garden",
     },
     { mergeDefaults: true }
   );

frontend/composables/use-theme.ts

@@ -0,0 +1,42 @@
+import { ComputedRef } from "vue";
+import { DaisyTheme } from "./use-preferences";
+
+export interface UseTheme {
+  theme: ComputedRef<DaisyTheme>;
+  setTheme: (theme: DaisyTheme) => void;
+}
+
+const themeRef = ref<DaisyTheme>("garden");
+
+export function useTheme(): UseTheme {
+  const preferences = useViewPreferences();
+  themeRef.value = preferences.value.theme;
+
+  const setTheme = (newTheme: DaisyTheme) => {
+    preferences.value.theme = newTheme;
+
+    if (htmlEl) {
+      htmlEl.value.setAttribute("data-theme", newTheme);
+    }
+
+    themeRef.value = newTheme;
+  };
+
+  const htmlEl = ref<HTMLElement>(null);
+
+  onMounted(() => {
+    if (htmlEl.value) {
+      return;
+    }
+
+    htmlEl.value = document.querySelector("html");
+    console.log(htmlEl.value);
+  });
+
+  const theme = computed(() => {
+    console.log(themeRef.value);
+    return themeRef.value;
+  });
+
+  return { theme, setTheme };
+}