<script setup>
import { useDark, useToggle, useFullscreen, useWindowSize } from '@vueuse/core';

const { toggle } = useFullscreen()

const isDark = false
// useDark()
// const toggleDark = useToggle(isDark)

const theme = computed(() => isDark.value ? 'dark' : 'light')
const themeVars = {
  'nav-bar-background': '#0021C9',
  'nav-bar-icon-color': '#F5F5F5',
  'nav-bar-text-color': '#F5F5F5',
  'nav-bar-title-text-color': '#F5F5F5',
}

// const { width } = useWindowSize();
// watch(width, () => {
//   if (width.value <= 768) {
//     document.documentElement.style.fontSize = '16px';
//   }
//   if (width.value > 768) {
//     document.documentElement.style.fontSize = '20px';
//   }
// }, {
//   immediate: true
// });
</script>

<template>
  <van-config-provider :theme="theme" :theme-vars="themeVars"
    class="w-screen h-screen bg-light-300 text-dark-900 flex flex-col " :class="isDark && 'bg-dark-800 text-light-900'">
    <!-- dark/light mode -->

    <!-- <van-nav-bar title="标题">
      <template #right>
        <div @click="toggleDark()" class="text-18px">
          <i-carbon-moon v-show="isDark" class="text-light-900" />
          <i-carbon-sun v-show="!isDark" class="text-dark-900" />
        </div>
      </template>
    </van-nav-bar> -->

    <!-- fullscreen -->
    <!-- <van-nav-bar title="标题" right-text="全屏" @click-right="toggle">
    </van-nav-bar> -->

    <div class="overflow-y-auto w-full">
      <router-view></router-view>
    </div>
  </van-config-provider>
</template>


<style>
body {
  --van-font-size-xs: 0.625rem;
  --van-font-size-sm: 0.75rem;
  --van-font-size-md: 0.875rem;
  --van-font-size-lg: 1rem;

  --van-line-height-xs: 0.875rem;
  --van-line-height-sm: 1.125rem;
  --van-line-height-md: 1.25rem;
  --van-line-height-lg: 1.375rem;
}
</style>


