:root {
  body[data-skin=default] {
    --xly-skin-header-color: #383d41; // 顶部导航栏背景色
    --xly-skin-menu-color: #343848; // 左侧一级菜单背景色
    --xly-skin-menu-span-color: #ccd6df; // 菜单字体色
    --xly-skin-submenu-color: #303538; // 展开后二级菜单背景色
    --xly-skin-active-color: #1890FF; // 激活色
    --xly-skin-modal-bg-color: #646464; // modal弹窗header背景色
  }

  body[data-skin=color1] {
    --xly-skin-header-color: #6e5064;
    --xly-skin-menu-color: #b482a4;
    --xly-skin-menu-span-color: #FFF;
    --xly-skin-submenu-color: #7c5a71;
    --xly-skin-active-color: #84c015;
    --xly-skin-modal-bg-color: #6e5064;
  }

  body[data-skin=color2] {
    --xly-skin-header-color: #0010fc;
    --xly-skin-menu-color: #515bf3;
    --xly-skin-menu-span-color: #FFF;
    --xly-skin-submenu-color: #656ab3;
    --xly-skin-active-color: #dd8547;
    --xly-skin-modal-bg-color: #0010fc;
  }

  body[data-skin=color3] {
    --xly-skin-header-color: #433598;
    --xly-skin-menu-color: #7160d5;
    --xly-skin-menu-span-color: #FFF;
    --xly-skin-submenu-color: #624fce;
    --xly-skin-active-color: #dd8547;
    --xly-skin-modal-bg-color: #433598;
  }

  body[data-skin=color4] {
    --xly-skin-header-color: #e1408e;
    --xly-skin-menu-color: #c56f98;
    --xly-skin-menu-span-color: #FFF;
    --xly-skin-submenu-color: #cd5790;
    --xly-skin-active-color: #03bcff;
    --xly-skin-modal-bg-color: #e1408e;
  }

  body[data-skin=color5] {
    --xly-skin-header-color: #f46b5f;
    --xly-skin-menu-color: #e69892;
    --xly-skin-menu-span-color: #FFF;
    --xly-skin-submenu-color: #c6655e;
    --xly-skin-active-color: #cdd32b;
    --xly-skin-modal-bg-color: #f46b5f;
  }

  body[data-skin=color6] {
    --xly-skin-header-color: #fa375c;
    --xly-skin-menu-color: #eb8498;
    --xly-skin-menu-span-color: #FFF;
    --xly-skin-submenu-color: #cc576f;
    --xly-skin-active-color: #cdd32b;
    --xly-skin-modal-bg-color: #fa375c;
  }

  body[data-skin=color7] {
    --xly-skin-header-color: #6f41ed;
    --xly-skin-menu-color: #8b70d5;
    --xly-skin-menu-span-color: #FFF;
    --xly-skin-submenu-color: rgb(76, 82, 169);
    --xly-skin-active-color: #cdd32b;
    --xly-skin-modal-bg-color: #6f41ed;
  }

  body[data-skin=color8] {
    --xly-skin-header-color: #fd4138;
    --xly-skin-menu-color: #e3736e;
    --xly-skin-menu-span-color: #FFF;
    --xly-skin-submenu-color: #c3514b;
    --xly-skin-active-color: #cdd32b;
    --xly-skin-modal-bg-color: #fd4138;
  }
}