web菜单--自定义样式

最新推荐文章于 2024-07-23 11:18:48 发布

前端世界的蒋小姐

最新推荐文章于 2024-07-23 11:18:48 发布

阅读量192

点赞数

文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_51258044/article/details/129028144

版权

1.文件src\styles\variables.scss

定义变量

// sidebar
$menuText:var(--menuText,#bfcbd9);

$menuActiveText:var(--menuActiveText,#409EFF);

$subMenuActiveText:var(--subMenuActiveText,#f4f4f5);

$menuBg:var(--menuBg,#304156);

$menuHover:var(--menuHover,#263445);

$subMenuBg:var(--subMenuBg,#1f2d3d);

$subMenuHover:var(--subMenuHover,#001528);

$sideBarWidth: var(--sideBarWidth,210px);

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

2.修改样式变量


document.getElementsByTagName('body')[0].style.setProperty('--menuText', '#ffffff')
document.getElementsByTagName('body')[0].style.setProperty('--subMenuActiveText', '#008080')
document.getElementsByTagName('body')[0].style.setProperty('--menuActiveText', '#20B2AA')
document.getElementsByTagName('body')[0].style.setProperty('--menuBg', '#20B2AA')
document.getElementsByTagName('body')[0].style.setProperty('--menuHover', '#AFEEEE')
document.getElementsByTagName('body')[0].style.setProperty('--subMenuBg', '#008B8B')
document.getElementsByTagName('body')[0].style.setProperty('--subMenuHover', '#AFEEEE')
document.getElementsByTagName('body')[0].style.setProperty('--sideBarWidth', '210px')

3.保存配置