|
|
@@ -21,44 +21,42 @@ 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.setStyle({
|
|
|
+ style: isDark ? Style.Dark : Style.Light,
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
watch(
|
|
|
() => $q.dark.isActive,
|
|
|
async (value) => {
|
|
|
- await Preferences.set({ key: "theme", value: value });
|
|
|
+ await Preferences.set({ key: "theme", value: value ? "dark" : "light" });
|
|
|
+ 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();
|
|
|
-
|
|
|
const { value: themePref } = await Preferences.get({ key: "theme" });
|
|
|
const theme = themePref || systemTheme;
|
|
|
+ const isDark = theme === "dark";
|
|
|
|
|
|
- if (isNative) {
|
|
|
- await StatusBar.show();
|
|
|
-
|
|
|
- await StatusBar.setBackgroundColor({
|
|
|
- color: "#FFFFFF",
|
|
|
- });
|
|
|
-
|
|
|
- await StatusBar.setStyle({
|
|
|
- style: Style.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>
|