如何启用

如果需要在项目中使用暗黑模式，只需在 html 上添加一个名为 dark 的类。

  1. <html class="dark">
  2.   <head></head>
  3.   <body></body>
  4. </html>

Element Plus 设置

需要在项目入口文件导入 css 变量

  1. // main.js
  2. import 'element-plus/theme-chalk/dark/css-vars.css'

Ant Design Vue 设置

  1. // main.js
  2. import 'ant-design-vue/dist/antd.dark.css'

动态切换

如果需要动态切换，建议使用 useDark | VueUse。

  1. <template>
  2.   <button @click="toggleDark()">
  3.     <span>{{ isDark ? 'Dark' : 'Light' }}</span>
  4.   </button>
  5.   <fm-making-form
  6.     :field-models="fieldModels"
  7.   ></fm-making-form>
  8. </template>
  10. <script setup>
  11. import { useDark, useToggle } from '@vueuse/core'
  13. const isDark = useDark()
  15. const toggleDark = () => {
  16.   useToggle(isDark)()
  18.   // 如果全量引入 css，ant-design-vue 的样式需要这样动态加载。
  19.   if (isDark.value) {
  20.     loadCss('https://unpkg.com/ant-design-vue/dist/antd.dark.css')
  21.   } else {
  22.     loadCss('https://unpkg.com/ant-design-vue/dist/antd.css')
  23.   }
  24. }
  26. const loadCss = (url) => {
  27.   return new Promise((resolve, reject) => {
  28.     const link = document.createElement('link')
  29.     link.rel = 'stylesheet'
  30.     link.href = url
  31.     document.head.appendChild(link)
  32.     link.onload = () => {
  33.       resolve()
  34.     }
  35.   })
  36. }
  37. </script>