vue useDark函数

`useDark` 函数是一个自定义的 Vue Hook，用于在 Vue 组件中控制暗色模式。它可以监听系统的暗色模式设置，也可以手动切换暗色模式。

下面是一个简单的示例：

<template>
  <div :class="{'dark': isDark}">
    <button @click="toggleDarkMode">切换暗色模式</button>
    <p v-if="isDark">当前为暗色模式</p>
    <p v-else>当前为普通模式</p>
  </div>
</template>

<script>
import { useDark } from '@/hooks/useDark';

export default {
  setup() {
    const { isDark, toggleDarkMode } = useDark();

    return {
      isDark,
      toggleDarkMode,
    };
  },
};
</script>

<style scoped>
/* 暗色模式样式 */
.dark {
  background-color: #333;
  color: #fff;
}
</style>

在这个示例中，我们使用 `useDark` 函数获取了当前是否为暗色模式以及切换暗色模式的方法。然后在模板中根据当前模式来显示相应的内容。同时，我们定义了一个 `.dark` 样式，用于在暗色模式下改变背景色和字体颜色。

需要注意的是，`useDark` 函数并不是 Vue 自带的 Hook，需要自己实现或引入第三方库。