Web メニュー -- カスタム スタイル

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. 設定を保存します