:root {
  :global {
    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;
    }
  }
}