elementplus el-button dark

### Element Plus 中 `el-button` 组件在暗黑模式下的使用方法

对于Element Plus中的`el-button`组件，在暗黑模式下可以通过CSS变量轻松自定义按钮的颜色和其他样式属性。Element Plus默认提供了一套适用于深色主题的样式，这些样式会自动应用到所有内置组件上[^1]。

为了确保按钮能够适配暗黑模式，可以利用Element Plus提供的全局配置选项来开启暗黑模式的支持：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'; // 导入默认样式表
import 'element-plus/theme-chalk/dark/css-vars.css'; // 导入暗黑模式css变量文件

const app = createApp(App);
app.use(ElementPlus, {
    size: 'default',
    zIndex: 3000,
});
app.mount('#app');

如果希望进一步定制特定于项目的颜色方案，则可以在项目中覆盖相应的CSS变量。例如修改按钮背景色、文字颜色等:

// 自定义样式调整
:root {
  --el-color-primary: #ff6700;
}

[data-theme="dark"] :root {
  --el-fill-color-light: hsla(218, 9%, 25%, .8); /* 修改为适合黑暗环境的颜色 */
}

通过上述方式，不仅可以使`el-button`组件适应暗黑模式，还能保持与其他UI元素的一致性和协调感。