如何修改el-dialog弹窗的颜色

在Element UI中，`el-dialog`组件默认的颜色主题是由Vue的CSS样式控制的。如果你想修改其弹窗的颜色，你可以通过自定义主题或者直接覆盖一些特定样式来达到目的。这里提供两种方法：

1. **自定义主题**:
- 首先，在你的项目中创建一个`theme.css`或者`custom-theme.scss`文件。
- 在这个文件里，找到对应`el-dialog`样式的类名，如`.el-dialog`。例如，你可以修改`.el-dialog__content`下的背景色、边框颜色等。
- 然后，在你的Vue配置文件`main.js`或全局CSS中引入这个自定义主题文件，并设置应用它：

     import Vue from 'vue'
     import App from './App.vue'
     import ElementUI from 'element-plus'
     import 'element-ui/lib/theme-chalk/index.css' // 引入Element UI的默认主题
     import customTheme from './theme/custom-theme.css' // 自定义主题

     Vue.use(ElementUI)
     Vue.config.productionTip = false
     document.body.style.setProperty('--primary-color', '#your-color') // 设置全局变量，替换为你的颜色值

     new Vue({
       render: h => h(App),
     }).$mount('#app')

或者直接在HTML模板上引用自定义主题：

     <template>
       <div id="app">
         <el-dialog :style="{ backgroundColor: '#your-color', borderColor: '#your-border-color' }" />
         <!-- ... -->
       </div>
     </template>

2. **直接覆盖样式**:
直接在你的CSS文件或组件内添加选择器，覆盖`el-dialog`的默认样式。例如：

   .el-dialog {
     background-color: #your-custom-color;
     border-color: #your-custom-border-color;
   }

记得将`#your-color`和`#your-border-color`替换为你想要的实际颜色值。