ForcePilot/web/src/assets/css/base.dark.css

/* 深色模式 */
:root.dark {
  --main-1000: #e1f6fb;
  --main-900:  #c4eaf5;
  --main-800:  #a3d8e8;
  --main-700:  #82c3d6;
  --main-600:  #5faec2;
  --main-500:  #4a9fb8;
  --main-400:  #3996ae;
  --main-300:  #24839a;
  --main-200:  #046a82;
  --main-100:  #035065;
  --main-50:   #023944;
  --main-40:   #01151f;
  --main-30:   #010d14;
  --main-20:   #010a0f;
  --main-10:   #00070a;
  --main-5:    #000405;
  --main-1:    #000102;
  --main-0:    #000000;

  --gray-10000: #ffffff;
  --gray-2000:  #f8fafa;
  --gray-1000:  #f5f7f7;
  --gray-900:   #eff2f2;
  --gray-800:   #eef0f0;
  --gray-700:   #e4e6e6;
  --gray-600:   #d7d9d9;
  --gray-500:   #bdbfbf;
  --gray-400:   #979999;
  --gray-300:   #697070;
  --gray-200:   #4c4d4d;
  --gray-150:   #323333;
  --gray-100:   #1e1f1f;
  --gray-50:    #151616;
  --gray-25:    #0c0d0d;
  --gray-10:    #080808;
  --gray-0:     #030303;

  /* Standard Color System - 深色模式5档色阶系统 */
  --color-primary-50: #023944;    /* 主色调-最深 */
  --color-primary-100: #035065;   /* 主色调-深 */
  --color-primary-500: #4a9fb8;   /* 主色调-标准 */
  --color-primary-700: #5faec2;   /* 主色调-浅 */
  --color-primary-900: #82c3d6;   /* 主色调-最浅 */

  /* 保留原有的 main 变量 */
  --main-color: #4a9fb8;
  --main-bright: #5faec2;

  --color-secondary-50: #151616;   /* 次要色-最深 */
  --color-secondary-100: #1e1f1f;  /* 次要色-深 */
  --color-secondary-500: #8fa5b0;  /* 次要色-标准 */
  --color-secondary-700: #9fb5c0;  /* 次要色-浅 */
  --color-secondary-900: #b8c8d0;  /* 次要色-最浅 */

  --color-success-50: #162312;     /* 成功色-最深 */
  --color-success-100: #273921;    /* 成功色-深 */
  --color-success-500: #52c41a;    /* 成功色-标准 */
  --color-success-700: #73d13d;    /* 成功色-浅 */
  --color-success-900: #95de64;    /* 成功色-最浅 */

  --color-error-50: #2a1215;       /* 错误色-最深 */
  --color-error-100: #58181c;      /* 错误色-深 */
  --color-error-500: #ff4d4f;      /* 错误色-标准 */
  --color-error-700: #ff7875;      /* 错误色-浅 */
  --color-error-900: #ffa39e;      /* 错误色-最浅 */

  --color-warning-50: #2b2111;     /* 警告色-最深 */
  --color-warning-100: #614700;    /* 警告色-深 */
  --color-warning-500: #faad14;    /* 警告色-标准 */
  --color-warning-700: #ffc53d;    /* 警告色-浅 */
  --color-warning-900: #ffd666;    /* 警告色-最浅 */

  --color-info-50: #111b26;        /* 信息色-最深 */
  --color-info-100: #111d2c;       /* 信息色-深 */
  --color-info-500: #3d8fff;       /* 信息色-标准 */
  --color-info-700: #40a9ff;       /* 信息色-浅 */
  --color-info-900: #69c0ff;       /* 信息色-最浅 */

  --color-accent-50: #0f2e2e;      /* 强调色-最深 */
  --color-accent-100: #164e63;     /* 强调色-深 */
  --color-accent-500: #13c2c2;     /* 强调色-标准 */
  --color-accent-700: #36cfc9;     /* 强调色-浅 */
  --color-accent-900: #5cdbd3;     /* 强调色-最浅 */

  --chart-palette-1: var(--main-300);
  --chart-palette-2: #3EA896;
  --chart-palette-3: #D6AD37;
  --chart-palette-4: #CF6666;
  --chart-palette-5: #8672B4;
  --chart-palette-6: #529AB8;
  --chart-palette-7: #D48242;
  --chart-palette-8: #82B354;
  --chart-palette-9: #C46E9E;
  --chart-palette-10: #7A7A7A;


  --bg-sider: #141414;
  --color-text: #ffffff;

  /* Ant Design 兼容变量 - 深色模式 */
  --color-bg-container: #1f1f1f;
  --color-bg-elevated: #262626;
  --color-text-secondary: rgba(255, 255, 255, 0.65);
  --color-text-tertiary: rgba(255, 255, 255, 0.45);

  /* Shadow System - 深色模式阴影系统 */
  --shadow-0: rgba(0, 0, 0, 0.1);
  --shadow-1: rgba(0, 0, 0, 0.2);
  --shadow-2: rgba(0, 0, 0, 0.3);
  --shadow-3: rgba(0, 0, 0, 0.4);
  --shadow-4: rgba(0, 0, 0, 0.5);
  --shadow-5: rgba(0, 0, 0, 0.6);


  --color-trans-light: rgba(0, 0, 0, 0.85);
  --color-trans-dark: rgba(255, 255, 255, 0.85);
}

:root.dark .markmap {
  --markmap-max-width: 9999px;
  --markmap-a-color: var(--main-500);
  --markmap-a-hover-color: var(--main-600);
  --markmap-code-bg: var(--gray-50);
  --markmap-code-color: var(--gray-700);
  --markmap-highlight-bg: var(--color-warning-50);
  --markmap-table-border: 1px solid currentColor;
  --markmap-font: 300 16px / 20px sans-serif;
  --markmap-circle-open-bg: var(--main-0);
  --markmap-text-color: var(--gray-700);
  --markmap-highlight-node-bg: var(--color-error-50);
}

:root.dark .md-editor {
  --md-bk-color: var(--gray-0);
}