Skip to content
On this page

暗黑模式

如何启用

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

html
<html class="dark">
  <head></head>
  <body></body>
</html>

Element Plus 设置

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

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

Ant Design Vue 设置

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

动态切换

如果需要动态切换,建议使用 useDark | VueUse ↗

vue
<template>
  <button @click="toggleDark()">
    <span>{{ isDark ? 'Dark' : 'Light' }}</span>
  </button>
  <fm-making-form
    :field-models="fieldModels"
  ></fm-making-form>
</template>

<script setup>
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()

const toggleDark = () => {
  useToggle(isDark)()

  // 如果全量引入 css,ant-design-vue 的样式需要这样动态加载。
  if (isDark.value) {
    loadCss('https://unpkg.com/ant-design-vue/dist/antd.dark.css')
  } else {
    loadCss('https://unpkg.com/ant-design-vue/dist/antd.css')
  }
}

const loadCss = (url) => {
  return new Promise((resolve, reject) => {
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = url
    document.head.appendChild(link)
    link.onload = () => {
      resolve()
    }
  })
}
</script>