sfp_vue_franchisee_ginastica_cerebro/src/App.vue

<template>
  <router-view />
</template>

<script setup>
import { Cookies, useQuasar } from "quasar";
import { watch } from "vue";
import { useI18n } from "vue-i18n";

defineOptions({
  name: "App",
});

const { locale } = useI18n();

const $q = useQuasar();
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
  ? "dark"
  : "light";

const theme = Cookies.get("theme") || systemTheme;

$q.dark.set(theme == "dark");

watch(
  () => $q.dark.isActive,
  (value) => {
    Cookies.set("theme", value ? "dark" : "light", {
      expires: 365,
      sameSite: "Lax",
      path: "/",
    });
  },
);

watch(
  () => locale.value,
  (value) => {
    Cookies.set("locale", value, {
      expires: 365,
      sameSite: "Lax",
      path: "/",
    });
  },
);
</script>