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

/* color palette from <https://github.com/vuejs/theme> */
/* https://material-foundation.github.io/material-theme-builder/ */
:root {
  --main-1000: #01151f;  /* 更深沉的深蓝黑 */
  --main-900:  #023944;  /* 深海蓝 */
  --main-800:  #035065;  /* 深蓝绿 */
  --main-700:  #046a82;  /* 增加明度的蓝青色 */
  --main-600:  #24839a;  /* 冷色调中略带灰 */
  --main-500:  #3996ae;  /* 平衡且主色调友好 */
  --main-400:  #5faec2;  /* 更加柔和的中亮蓝 */
  --main-300:  #82c3d6;  /* 明亮通透，视觉清爽 */
  --main-200:  #a3d8e8;  /* 比原先更清澈淡蓝 */
  --main-100:  #c4eaf5;  /* 接近原色，但稍微柔和 */
  --main-50:   #e1f6fb;  /* 极浅天蓝，适合背景过渡 */
  --main-40:   #eaf3f5;  /* 淡灰蓝调 */
  --main-30:   #f2fbfd;  /* 几近白的蓝调提示 */
  --main-20:   #f5f9fa;  /* 比原配色更均匀些 */
  --main-10:   #fafcfd;
  --main-5:    #fcfefe;
  --main-1:    #fefefe;
  --main-0:    #ffffff;


  --gray-10000: #000000; /* 保持纯黑 */
  --gray-2000:  #0d0d0d; /* 更精致的暗灰，用于极深背景 */
  --gray-1000:  #161616; /* 深灰黑，适用于主文本 */
  --gray-900:   #1f1f1f;
  --gray-800:   #333333; /* 标准深灰，适合背景 */
  --gray-700:   #4d4d4d;
  --gray-600:   #707070; /* 调和中灰，适合次要文本 */
  --gray-500:   #999999; /* 更柔和的中灰色 */
  --gray-400:   #bfbfbf;
  --gray-300:   #d9d9d9; /* 修正了原300/200重复 */
  --gray-200:   #e6e6e6; /* 稍微加深一点，便于分层 */
  --gray-150:   #f0f0f0;
  --gray-100:   #f2f2f2;
  --gray-50:    #f7f7f7;
  --gray-25:    #fafafa;
  --gray-10:    #fcfcfc;
  --gray-0:     #ffffff;

  --main-color: #016179;
  /* 鲜艳一点的 */
  --main-bright: #0188a6;
  --secondry-color: #4e616d;
  --error-color: #ba1a1a;
  --color-primary: #1c7796;
  --color-primary-bg: #d6eef1;
  --color-success: #45b30e;
  --color-error: #c73234;
  --color-info: #0058d4;

  /* Chart Colors - 图表颜色系统 */
  --chart-primary: var(--main-500);        /* 主色调 - 用于主要数据 */
  --chart-primary-light: var(--main-400);  /* 主色调浅色 - 用于渐变 */
  --chart-primary-dark: var(--main-600);   /* 主色调深色 - 用于强调 */

  --chart-success: #52c41a;               /* 成功色 - 绿色 */
  --chart-success-light: #95de64;        /* 成功色浅色 */
  --chart-success-dark: #389e0d;         /* 成功色深色 */

  --chart-warning: #faad14;               /* 警告色 - 橙色 */
  --chart-warning-light: #ffd666;        /* 警告色浅色 */
  --chart-warning-dark: #d48806;         /* 警告色深色 */

  --chart-error: #f5222d;                /* 错误色 - 红色 */
  --chart-error-light: #ff7875;          /* 错误色浅色 */
  --chart-error-dark: #cf1322;          /* 错误色深色 */

  --chart-info: #1890ff;                 /* 信息色 - 蓝色 */
  --chart-info-light: #69c0ff;           /* 信息色浅色 */
  --chart-info-dark: #096dd9;            /* 信息色深色 */

  --chart-secondary: #722ed1;           /* 次要色 - 紫色 */
  --chart-secondary-light: #b37feb;      /* 次要色浅色 */
  --chart-secondary-dark: #531dab;       /* 次要色深色 */

  --chart-accent: #13c2c2;               /* 强调色 - 青色 */
  --chart-accent-light: #5cdbd3;        /* 强调色浅色 */
  --chart-accent-dark: #08979c;          /* 强调色深色 */

  /* Chart Palette - 图表调色板 */
  --chart-palette-1: var(--chart-primary);
  --chart-palette-2: var(--chart-success);
  --chart-palette-3: var(--chart-warning);
  --chart-palette-4: var(--chart-error);
  --chart-palette-5: var(--chart-info);
  --chart-palette-6: var(--chart-secondary);
  --chart-palette-7: var(--chart-accent);
  --chart-palette-8: #fa541c;            /* 橙红色 */
  --chart-palette-9: #eb2f96;            /* 粉红色 */
  --chart-palette-10: #a0d911;           /* 黄绿色 */

  --bg-sider: var(--main-5);
  --color-text: var(--c-black);

  --min-width: 400px;
}