1. 确定Element Plus菜单的背景色样式类名 Element Plus的菜单组件通常会有一系列的类名来控制其样式,包括背景色。您可以通过浏览器的开发者工具(通常按F12打开)来检查元素的样式,并找到控制背景色的类名。对于菜单背景色,通常会有一个类名如.el-menu、.el-menu--dark(针对深色主题)或者与具体状态(如hover、act...
:root { --el-menu-hover-bg-color: #000; --el-menu-active-color: #fff; --el-menu-text-color: #fff; --el-menu-bg-color: pink; } 1 0 replies xpbsm Jun 11, 2024 css 变量名有作用域,找到任意父元素,覆盖你需要修改的变量 & { --el-menu-text-color: #d7bbbb; --el-menu-hov...
继续查看样式可以发现“--el-menu-hover-text-color”实际上继承自“--el-color-primary”。这是elementplus的主色系。 主色系包含几个变量,指定了不同的颜色。如下图 element-plus色系 其实我希望自己的主题颜色是绿色。success的几个绿色就很不错,所以我可以直接在elementplus.css中写入 :root { --el-color-...
import { ElMessage } from 'element-plus' /** * 颜色转换函数 * @method hexToRgb hex 颜色转 rgb 颜色 * @method rgbToHex rgb 颜色转 Hex 颜色 * @method getDarkColor 加深颜色值 * @method getLightColor 变浅颜色值 */ export function useChangeColor() { // str 颜色值字符串 const hexToR...
例如，可以将其设置为绿色："--el-menu-hover-text-color: green;"> 此外，"--el-menu-hover-text-color"是基于"--el-color-primary"（Element Plus的主色系）的。主色系包含多个变量，你可以根据需要选择，如success系列的绿色。例如，在"elementplus.css"中设置为绿色，就成为了默认颜色。如果你...
// option是传入的样式,这里的不全,只是定义透明背景与文字颜色 // 还需要加入全局menu样式,来控制hover与focus时候的背景色(直接用了!important) const { routers, option, maxLength, className, id } = context.props; let routersCopy = JSON.parse(JSON.stringify(routers)); ...
--qd-bg-color-hover #f5f7fd 通用划过的背景色 --qd-bg-color-menu #4d4d4d dropdown的dark模式下的特殊背景色 --qd-bg-color-disabled #f3f3f3 一个特殊的背景色,从checkbox 开始有的,而且选中和不选中还不一样 --qd-disabled-inner-color #e0e0e0 一个特殊的disabled颜色,用在了radio --qd-checkb...
导航菜单默认为垂直模式,通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外,在菜单中通过 sub-menu 组件可以生成二级菜单。 Menu 还提供了background-color、text-color和active-text-color,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
有了上一章的基础,接下来我们来引入我们开发所需要的UI组件elementplus,实现顶部和底部整体布局以及配置黑暗模式 。最终效果如下: 基础模式 黑暗模式 一、引入组件 //安装elementplus 1、npm installelement-plus--save //安装 @element-plus/icons 图标库 ...