Merge branch 'fix/diaria-kay-ajuste-status-bar' of Softpar/sfp_front_vue_diarista_cliente into development

src/App.vue

@@ -17,33 +17,69 @@ defineOptions({
 const { locale } = useI18n();
 
 const $q = useQuasar();
+
 const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
   ? "dark"
   : "light";
 
+const updateStatusBar = async (isDark) => {
+  if (!Capacitor.isNativePlatform()) {
+    return;
+  }
+
+  await StatusBar.show();
+
+  await StatusBar.setBackgroundColor({
+    color: isDark ? "#121212" : "#FFFFFF",
+  });
+
+  await StatusBar.setStyle({
+    style: isDark ? Style.Light : Style.Dark,
+  });
+};
+
 watch(
   () => $q.dark.isActive,
   async (value) => {
-    await Preferences.set({ key: "theme", value: value });
+    const theme = value ? "dark" : "light";
+
+    await Preferences.set({
+      key: "theme",
+      value: theme,
+    });
+
+    await updateStatusBar(value);
   },
 );
 
 watch(
   () => locale.value,
   async (value) => {
-    await Preferences.set({ key: "locale", value: value });
+    await Preferences.set({
+      key: "locale",
+      value,
+    });
   },
 );
 
 onBeforeMount(async () => {
-  const isNative = Capacitor.isNativePlatform();
-  if (isNative) await StatusBar.show();
-  const { value: themePref } = await Preferences.get({ key: "theme" });
+  const { value: themePref } = await Preferences.get({
+    key: "theme",
+  });
+
   const theme = themePref || systemTheme;
-  if (isNative) await StatusBar.setStyle({ style: Style.Dark });
-  const { value: localePref } = await Preferences.get({ key: "locale" });
+  const isDark = theme === "dark";
+
+  $q.dark.set(isDark);
+
+  await updateStatusBar(isDark);
+
+  const { value: localePref } = await Preferences.get({
+    key: "locale",
+  });
+
   const userLocale = localePref || window.navigator.language;
+
   console.log(theme, userLocale);
-  $q.dark.set(theme == "dark");
 });
-</script>
+</script>