:root {
  --g-box-shadow-color: rgb(0 0 0 / 12%);

  /* ----- 应用 ----- */
  // 应用背景色
  --g-app-bg: var(--el-bg-color);
  // 主区域背景色
  --g-main-bg: var(--el-bg-color-page);

  /* ----- 顶部 ----- */
  // 背景色
  --g-header-bg: #222b45;
  // 文字颜色
  --g-header-color: #fff;
  // 导航文字颜色
  --g-header-menu-color: #fff;
  // 导航鼠标悬浮文字颜色
  --g-header-menu-hover-color: #fff;
  // 导航鼠标悬浮背景色
  --g-header-menu-hover-bg: #334067;
  // 导航选中文字颜色
  --g-header-menu-active-color: #fff;
  // 导航选中背景色
  --g-header-menu-active-bg: #334067;

  /* ----- 主导航 ----- */
  // 背景色
  --g-main-sidebar-bg: #222b45;
  // 菜单文字颜色
  --g-main-sidebar-menu-color: #eee;
  // 菜单鼠标悬浮文字颜色
  --g-main-sidebar-menu-hover-color: #fff;
  // 菜单鼠标悬浮背景色
  --g-main-sidebar-menu-hover-bg: #334067;
  // 菜单选中文字颜色
  --g-main-sidebar-menu-active-color: #fff;
  // 菜单选中背景色
  --g-main-sidebar-menu-active-bg: #334067;

  /* ----- 次导航 ----- */
  // 背景色
  --g-sub-sidebar-bg: #fff;
  // 菜单背景色
  --g-sub-sidebar-menu-bg: #e8e8e8;
  // 菜单文字颜色
  --g-sub-sidebar-menu-color: var(--el-text-color-primary);
  // 菜单鼠标悬浮文字颜色
  --g-sub-sidebar-menu-hover-color: var(--el-text-color-primary);
  // 菜单鼠标悬浮背景色
  --g-sub-sidebar-menu-hover-bg: #e1e1e1;
  // 菜单选中文字颜色
  --g-sub-sidebar-menu-active-color: #fff;
  // 菜单选中背景色
  --g-sub-sidebar-menu-active-bg: var(--el-color-primary);

  /* ----- 顶栏 ----- */
  --g-toolbar-bg: var(--el-bg-color);

  /* ----- 进度条 ----- */
  --g-nprogress-color: var(--el-color-primary);

  /* ----- 暗黑模式 ----- */
  &.dark {
    --g-box-shadow-color: rgb(0 0 0 / 72%);

    /* ----- 应用 ----- */
    // 应用背景色
    --g-app-bg: var(--el-bg-color);
    // 主区域背景色
    --g-main-bg: var(--el-bg-color-page);

    /* ----- 顶部 ----- */
    // 背景色
    --g-header-bg: var(--el-bg-color);
    // 文字颜色
    --g-header-color: #fff;
    // 导航文字颜色
    --g-header-menu-color: #ccc;
    // 导航鼠标悬浮文字颜色
    --g-header-menu-hover-color: #fff;
    // 导航鼠标悬浮背景色
    --g-header-menu-hover-bg: var(--el-color-primary-light-5);
    // 导航选中文字颜色
    --g-header-menu-active-color: #fff;
    // 导航选中背景色
    --g-header-menu-active-bg: var(--el-color-primary-light-3);

    /* ----- 主导航 ----- */
    // 背景色
    --g-main-sidebar-bg: var(--el-bg-color);
    // 菜单文字颜色
    --g-main-sidebar-menu-color: #ccc;
    // 菜单鼠标悬浮文字颜色
    --g-main-sidebar-menu-hover-color: #fff;
    // 菜单鼠标悬浮背景色
    --g-main-sidebar-menu-hover-bg: var(--el-color-primary-light-5);
    // 菜单选中文字颜色
    --g-main-sidebar-menu-active-color: #fff;
    // 菜单选中背景色
    --g-main-sidebar-menu-active-bg: var(--el-color-primary-light-3);

    /* ----- 次导航 ----- */
    // 背景色
    --g-sub-sidebar-bg: var(--el-bg-color-page);
    // 菜单背景色
    --g-sub-sidebar-menu-bg: var(--el-bg-color);
    // 菜单文字颜色
    --g-sub-sidebar-menu-color: var(--el-text-color-secondary);
    // 菜单鼠标悬浮文字颜色
    --g-sub-sidebar-menu-hover-color: var(--el-text-color-primary);
    // 菜单鼠标悬浮背景色
    --g-sub-sidebar-menu-hover-bg: var(--el-color-primary-light-5);
    // 菜单选中文字颜色
    --g-sub-sidebar-menu-active-color: var(--el-text-color-primary);
    // 菜单选中背景色
    --g-sub-sidebar-menu-active-bg: var(--el-color-primary-light-3);

    /* ----- 顶栏 ----- */
    --g-toolbar-bg: var(--el-bg-color);

    /* ----- 进度条 ----- */
    --g-nprogress-color: var(--el-color-primary);
  }
}