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>