|
@@ -17,33 +17,69 @@ defineOptions({
|
|
|
const { locale } = useI18n();
|
|
const { locale } = useI18n();
|
|
|
|
|
|
|
|
const $q = useQuasar();
|
|
const $q = useQuasar();
|
|
|
|
|
+
|
|
|
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
|
? "dark"
|
|
? "dark"
|
|
|
: "light";
|
|
: "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(
|
|
watch(
|
|
|
() => $q.dark.isActive,
|
|
() => $q.dark.isActive,
|
|
|
async (value) => {
|
|
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(
|
|
watch(
|
|
|
() => locale.value,
|
|
() => locale.value,
|
|
|
async (value) => {
|
|
async (value) => {
|
|
|
- await Preferences.set({ key: "locale", value: value });
|
|
|
|
|
|
|
+ await Preferences.set({
|
|
|
|
|
+ key: "locale",
|
|
|
|
|
+ value,
|
|
|
|
|
+ });
|
|
|
},
|
|
},
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
onBeforeMount(async () => {
|
|
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;
|
|
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;
|
|
const userLocale = localePref || window.navigator.language;
|
|
|
|
|
+
|
|
|
console.log(theme, userLocale);
|
|
console.log(theme, userLocale);
|
|
|
- $q.dark.set(theme == "dark");
|
|
|
|
|
});
|
|
});
|
|
|
-</script>
|
|
|
|
|
|
|
+</script>
|