Dark Mode
How to enable dark mode
If you need to use dark mode in your project, just add a class called ** 'dark' ** to your html.
html
<html class="dark">
<head></head>
<body></body>
</html>Element Plus Setting
You need to import css variables into the project entry file
js
// main.js
import 'element-plus/theme-chalk/dark/css-vars.css'Ant Design Vue Setting
js
// main.js
import 'ant-design-vue/dist/antd.dark.css'Dynamically Switchable
If you want to switch dark mode dynamically, we recommend to use 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)()
// ant-design-vue styles need to be dynamically loaded like this if css is fully introduced.
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>