main pages/styles

stores/menuStore.ts

@@ -45,9 +45,9 @@ export const useMenuStore = defineStore("menuStore", () => {
           filter: `id_lang="${$i18n.locale.value}"&&active=true`,
           sort: "position_id",
         })) as MenuListResponse;
-        
-        const root = menuItems.value.items.find((item) => item.is_root);
-        defaultMenu.value = menuItems.value.items.find((item) => item.is_default);
+
+      const root = menuItems.value.items.find((item) => item.is_root);
+      defaultMenu.value = menuItems.value.items.find((item) => item.is_default);
 
       if (root) {
         menu.value = buildTreeRecursive(menuItems.value.items, root.id);
@@ -102,11 +102,9 @@ export const useMenuStore = defineStore("menuStore", () => {
     let img = "";
     for (const s in store.components) {
       store.components[s].section_img.map((item) => {
-        img = `${req?.headers.get("x-forwarded-proto") || url.protocol}://${
-          req?.headers.get("x-forwarded-host") || req?.headers.get("host")
-        }/api/files/${store.components[s].image_collection}/${
-          store.components[s].section_id
-        }/${item}?thumb=400x0`;
+        img = `${req?.headers.get("x-forwarded-proto") || url.protocol}://${req?.headers.get("x-forwarded-host") || req?.headers.get("host")
+          }/api/files/${store.components[s].image_collection}/${store.components[s].section_id
+          }/${item}?thumb=400x0`;
       });
       if (img.length > 0) return img;
     }

stores/store.ts

@@ -7,6 +7,7 @@ export const useStore = defineStore("store", () => {
   const pb = usePB();
   const { $i18n } = useNuxtApp();
   const menuStore = useMenuStore()
+  const colorMode = useColorMode()
 
   const components = ref({} as PBPageItem[]);
   const getSections = async (id: string) => {
@@ -60,9 +61,19 @@ export const useStore = defineStore("store", () => {
     return [];
   }
 
+  const isDark = computed({
+    get() {
+      return colorMode.value === "dark";
+    },
+    set(_isDark) {
+      colorMode.preference = _isDark ? "dark" : "light";
+    },
+  });
+
   return {
     currentPageID,
     components,
+    isDark,
     getComponents,
     getSections,
   };