暗黑模式

如何启用

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

html

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

Element Plus 设置

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

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

Ant Design Vue 设置

4.x3.x

// main.js
import { theme } from 'ant-design-vue'

app.provide('themeAlgorithm', theme.darkAlgorithm)

// 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 use-antd-form></fm-making-form>
</template>

<script setup>
import { useDark, useToggle } from '@vueuse/core'
import { ref, provide } from 'vue'
import { theme } from 'ant-design-vue'

const isDark = useDark()

const themeAlgorithm = ref(theme.defaultAlgorithm)

provide('themeAlgorithm', themeAlgorithm)

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

  if (isDark.value) {
    themeAlgorithm.value = theme.darkAlgorithm
  } else {
    themeAlgorithm.value = theme.defaultAlgorithm
  }
}
</script>

TIP

如果你尚未更新到最新版本，使用的是老版本，可以使用如下方式配置。

展开查看代码

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>

暗黑模式 ​

如何启用 ​

Element Plus 设置 ​

Ant Design Vue 设置 ​

动态切换 ​

暗黑模式

如何启用

Element Plus 设置

Ant Design Vue 设置

动态切换