<script setup lang="ts">
import { useDark, useToggle } from "@vueuse/core";

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

const onToggleDark = () => {
  toggleDark();
};
</script>

<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #ccc;
    "
  >
    <el-button type="primary" @click="onToggleDark"> 切换 </el-button>
    测试暗黑模式
    <div class="box">dd</div>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 300px;
  height: 200px;
  background-color: $hj-bg;
}
</style>
