Forráskód Böngészése

fix: :bug: fix(ajuste status bar) Foi ajustado olayout do status bar para que respeite o temo do celular

Foi ajustado o layout do status bar para que respeite o tema do celular ex: aplicativo todo branco status bar branco com icones pretos

origin:bug-interno
kayo henrique 1 napja
szülő
commit
54a2ab7aa9
1 módosított fájl, 45 hozzáadás és 9 törlés
  1. 45 9
      src/App.vue

+ 45 - 9
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>