tyyx_mobile/src/App.vue

<script setup lang="ts">
import type { ConfigProviderProps, ConfigProviderTheme } from 'vant'
import { useDark, useToggle } from '@vueuse/core'

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

const theme = computed<ConfigProviderTheme>(() => isDark.value ? 'dark' : 'light')

const themeVars: ConfigProviderProps['themeVars'] = {

}
</script>

<template>
  <van-config-provider
    :theme="theme" :theme-vars="themeVars"
    class="w-screen h-screen bg-light-900 text-dark-900 flex flex-col " :class="isDark && 'bg-dark-900 text-light-900'"
  >
    <!-- <van-nav-bar title="标题">
      <template #right>
        <button @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" />
        </button>
      </template>
    </van-nav-bar> -->
    <div class="overflow-y-auto">
      <router-view />
    </div>
  </van-config-provider>
</template>