elementplus 侧边栏背景颜色设置

Element Plus 是 Vue.js 的一个 UI 框架，它提供了丰富的组件和易用的 API。对于侧边栏背景颜色的设置，在 Element Plus 中，你可以通过 CSS 或者它们提供的主题系统来定制。

1. **CSS 配置**：直接在你的样式表中添加规则。例如，如果你想要全局更改所有侧边栏的背景色，可以这样做：

.el-scrollbar__wrap {
  background-color: #your-color-code; /* 替换为你喜欢的颜色 */
}

如果你只想针对特定组件，可以使用更具体的类名选择器。

2. **Vue 主题配置**：Element Plus 提供了 `theme` 属性来管理应用的主题。你可以创建一个 JSON 文件，定义主题变量，然后在需要的地方引用它。比如：

{
  "variables": {
    "primary-color": "#3f51b5", // 默认侧边栏背景颜色
    "sidebar-background": "#2c3e50"
  }
}

在组件中设置主题：

<template>
  <el-container :theme="theme">
    <el-collapse default-active="$route.meta.defaultActive" />
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      theme: 'dark', // 或者 'light'
    };
  },
};
</script>

这将把侧边栏背景设为你在主题文件中定义的颜色。