/* 耀石黑 dark*/
html.dark {
  /* 主题色&功能色 开始 */

  // 品牌色
  --brand-color: #1764ff;
  // 品牌色 hover
  --brand-color-hover: #2b7aff;
  // 品牌色 active
  --brand-color-active: #1557db;
  // 品牌色disabled
  --brand-color-disabled: #b2ccff;
  // 品牌色focus
  --brand-color-focus: #d9e5ff;
  // 品牌色light交互状态使用
  --brand-color-light: #24365c;
  // 错误色
  --error-color: #ff4040;
  // 错误色 hover
  --error-color-hover: #ff7474;
  // 错误色 active
  --error-color-active: #db3131;
  // 错误色 disabled
  --error-color-disabled: #ffb9b0;
  // 错误色 focus
  --error-color-focus: #ffd8d2;
  // 错误色 light交互状态使用
  --error-color-light: #fff0ed;
  // 警示色
  --warning-color: #ff9000;
  // 警示色 hover
  --warning-color-hover: #ffa938;
  // 警示色 active
  --warning-color-active: #ea8a0e;
  // 警示色 disabled
  --warning-color-disabled: #ffc882;
  // 警示色 focus
  --warning-color-focus: #ffe2c2;
  // 警示色 light交互状态使用
  --warning-color-light: #fff4e9;
  // 成功色
  --success-color: #1fbb79;
  // 成功色 hover
  --success-color-hover: #43c78f;
  // 成功色 active
  --success-color-active: #2ba471;
  // 成功色 disabled
  --success-color-disabled: #92dab2;
  // 成功色 focus
  --success-color-focus: #c6f3d7;
  // 成功色 light交互状态使用
  --success-color-light: #e3f9e9;

  /* 主题色&功能色 结束 */

  /* 文字&图标色彩 开始 */

  --text-color-primary: #e6e6e6;
  --text-color-secondary: #b3b3b3;
  --text-color-placeholder: #808080;
  --text-color-disabled: #808080;
  --text-color-anti: #ffffff;
  --text-color-anti-opacity: rgba(255, 255, 255, 0.24);
  // 主题色文字色彩
  --text-color-brand: var(--brand-color);
  // 链接文字
  --text-color-link: var(--brand-color);

  /* 文字&图标色彩 结束 */

  /* 中性色彩交互token 开始 */

  --bg-color-container-hover: #333333;
  --bg-color-container-active: #404040;
  --bg-color-secondarycontainer-hover: #404040;
  --bg-color-secondarycontainer-active: #4d4d4d;
  --bg-color-component-hover: #404040;
  --bg-color-component-active: #4d4d4d;
  --bg-color-component-disabled: #1a1a1a;

  /* 中性色彩交互token 结束 */

  /* 中性色彩 开始 */

  --bg-color-page: #181818;
  --bg-color-container: #262626;
  --bg-color-secondarycontainer: #333333;
  --bg-color-component: #333333;
  --component-stroke: #3c3c3c;
  --component-border: #262626;

  /* 中性色彩 结束 */

  // Element Plus 颜色变量，统一使用自定义颜色
  --el-color-primary: var(--brand-color);
  --el-color-primary-light-3: var(--brand-color-hover);
  --el-color-primary-light-5: var(--brand-color-active);
  --el-color-primary-light-7: var(--brand-color-disabled);
  --el-color-primary-light-8: var(--brand-color-focus);
  --el-color-primary-light-9: var(--brand-color-light);
  --el-color-primary-dark-2: var(--brand-color-hover);

  --el-color-success: var(--success-color);
  --el-color-success-light-3: var(--success-color-hover);
  --el-color-success-light-5: var(--success-color-active);
  --el-color-success-light-7: var(--success-color-disabled);
  --el-color-success-light-8: var(--success-color-focus);
  --el-color-success-light-9: var(--success-color-light);
  --el-color-success-dark-2: var(--success-color-hover);

  --el-color-warning: var(--warning-color);
  --el-color-warning-light-3: var(--warning-color-hover);
  --el-color-warning-light-5: var(--warning-color-active);
  --el-color-warning-light-7: var(--warning-color-disabled);
  --el-color-warning-light-8: var(--warning-color-focus);
  --el-color-warning-light-9: var(--warning-color-light);
  --el-color-warning-dark-2: var(--warning-color-hover);

  --el-color-danger: var(--error-color);
  --el-color-danger-light-3: var(--error-color-hover);
  --el-color-danger-light-5: var(--error-color-active);
  --el-color-danger-light-7: var(--error-color-disabled);
  --el-color-danger-light-8: var(--error-color-focus);
  --el-color-danger-light-9: var(--error-color-light);
  --el-color-danger-dark-2: var(--error-color-hover);

  --el-color-error: var(--error-color);
  --el-color-error-light-3: var(--error-color-hover);
  --el-color-error-light-5: var(--error-color-active);
  --el-color-error-light-7: var(--error-color-disabled);
  --el-color-error-light-8: var(--error-color-focus);
  --el-color-error-light-9: var(--error-color-light);
  --el-color-error-dark-2: var(--error-color-hover);

  --el-color-info: var(--text-color-secondary);
  --el-color-info-light-3: var(--text-color-secondary);
  --el-color-info-light-5: var(--text-color-placeholder);
  --el-color-info-light-7: var(--text-color-disabled);
  --el-color-info-light-8: var(--text-color-disabled);
  --el-color-info-light-9: var(--text-color-disabled);
  --el-color-info-dark-2: var(--text-color-secondary);

  //   --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
  //   --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
  //   --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
  //   --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
  --el-bg-color-page: var(--bg-color-page);
  --el-bg-color: var(--bg-color-container);
  --el-bg-color-overlay: var(--bg-color-secondarycontainer);
  --el-text-color-primary: var(--text-color-primary);
  --el-text-color-regular: var(--text-color-primary);
  --el-text-color-secondary: var(--text-color-secondary);
  --el-text-color-placeholder: var(--text-color-placeholder);
  --el-text-color-disabled: var(--text-color-disabled);
  --el-border-color-darker: var(--component-border);
  --el-border-color-dark: var(--component-border);
  --el-border-color: var(--component-stroke);
  --el-border-color-light: var(--component-stroke);
  --el-border-color-lighter: var(--component-stroke);
  --el-border-color-extra-light: var(--component-stroke);
  --el-fill-color-darker: var(--bg-color-container-active);
  --el-fill-color-dark: var(--bg-color-secondarycontainer);
  --el-fill-color: var(--bg-color-component);
  --el-fill-color-light: var(--bg-color-component-hover);
  --el-fill-color-lighter: var(--bg-color-container-hover);
  --el-fill-color-extra-light: var(--bg-color-page);
  --el-fill-color-blank: transparent;
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);

  --el-menu-base-level-padding: 8px;
  --el-menu-level-padding: 25px;
  --el-menu-level: 0;
  --el-menu-item-height: 40px;
  --el-menu-hover-bg-color: var(--brand-color-hover);
  --el-text-color-secondary: var(--text-color-anti);
  --el-menu-text-color: var(--text-color-secondary);
  --el-menu-active-color: var(--text-color-anti);
  --el-menu-active-background: var(--brand-color);
}

html.dark .el-button {
  --el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
}

html.dark .el-card {
  --el-card-bg-color: var(--el-bg-color-overlay);
}

html.dark .el-empty {
  --el-empty-fill-color-0: var(--el-color-black);
  --el-empty-fill-color-1: #4b4b52;
  --el-empty-fill-color-2: #36383d;
  --el-empty-fill-color-3: #1e1e20;
  --el-empty-fill-color-4: #262629;
  --el-empty-fill-color-5: #202124;
  --el-empty-fill-color-6: #212224;
  --el-empty-fill-color-7: #1b1c1f;
  --el-empty-fill-color-8: #1c1d1f;
  --el-empty-fill-color-9: #18181a;
}
