主题

我们基于 Ant Design 视觉风格搭建了 Godzilla Design，这套风格经过设计师的精心调配，适合大多数中后台项目。如果对视觉风格有额外的要求，推荐使用以下的方式进行定制。

一、主题开发配置

// 在quantex-scaffold项目的配置文件config/config.ts中
  themeConfig: {
    // 指定默认主题: 对应themes中的id
    defaultTheme: 'themeDark',
    mainTheme: 'themeDark',
    // 主题配置
    themes: [
      {
        // 名称
        name: '深色',
        // id
        id: 'themeDark',
        // 主题文件路径
        path: path.join(__dirname, '../packages/quantex-plugin-theme-dark'),
        // chart主题配置文件
        chartConfig: darkChart,
      },
      {
        name: '浅色',
        id: 'themeWhite',
        path: path.join(__dirname, '../packages/quantex-plugin-theme-white'),
        chartConfig: whiteChart,
      },
    ],
  },

二、实现原理

背景

基于Morris规范和新设计体系进行组件主题开发。

1. quantex-design 是基于 ant-design 的二次封装；
2. ant-design 使用的是 less 方式 处理 css;
3. quantex-scaffold 使用的是 sass 方式处理 css;
4. quantex-scaffold 同时会依赖 ant-design css;
5. css variables 一定程度上吸收了 less/sass 处理 css 的方式，且主流浏览器都已支持；
6. 因此在点击主题切换按钮时，quantex-design 和 ant-design 所有的组件样式都需要进行切换。
7. 为减少代码量，同时可以复用部分代码。决定使用 css variables + 样式覆盖的方案进行主题切换的实现。
8. 样式覆盖：需要针对所有组件的所有样式进行覆盖。
9. css variables: 样式覆盖使用的样式需要使用 css variables 进行定义。
10. 因此在 build 完成之后，会生成组件 css 文件 + css variables 文件；主题切换加载不同 css variables 文件即可。

原理

1. 使用 css variales 对组件样式进行覆盖；
2. build 生成组件样式文件和 css variables 文件；
3. 组件样式使用的 css 变量都定义在统一的 css variables 文件中；
4. 切换主题即加载不同 css variables 文件；
5. 同时自定义主题只需要根据现有 css variables 文件进行修改；

三、变量定义及使用

这里以黑色主题为例进行说明。

主色变量定义：

packages/quantex-plugin-theme-dark/colors.scss

:root {
  // ======中性色======
  // Gray
  --gray-1: #ffffff;
  --gray-2: #fafafa;
  --gray-3: #f5f5f5;
  --gray-4: #f0f0f0;
  --gray-5: #d9d9d9;
  --gray-6: #bfbfbf;
  --gray-7: #8c8c8c;
  --gray-8: #595959;
  --gray-9: #434343;
  --gray-10: #2e2e2e;
  --gray-11: #262626;
  --gray-12: #1f1f1f;
  --gray-13: #141414;
  --gray-14: #000000;
  // 顶部栏背景色
  --top: #353234;

  // ======功能色======
  // Blue / 蓝
  --blue-1: #c3eeff;
  --blue-2: #a3e2ff;
  --blue-3: #7ad1ff;
  --blue-4: #50b9fa;
  --blue-5: #269aed;
  --blue-6: #007de0;
  --blue-7: #0071d9;
  --blue-8: #0060ba;
  --blue-9: #154c88;
  --blue-10: #1e3a5d;

  // Green / 绿
  --green-1: #dafadf;
  --green-2: #c7ebd1;
  --green-3: #88dba8;
  --green-4: #43c478;
  --green-5: #16a163;
  --green-6: #077d55;
  --green-7: #075e45;
  --green-8: #174b3e;
  --green-9: #1f3c34;
  --green-10: #20312d;

  // Orange / 橘
  --orange-1: #fcf2eb;
  --orange-2: #fcddc7;
  --orange-3: #fcbc97;
  --orange-4: #fc9162;
  --orange-5: #e86427;
  --orange-6: #bf4815;
  --orange-7: #9e3c1b;
  --orange-8: #7c341a;
  --orange-9: #642e1d;
  --orange-10: #502e22;

  // Vocanao / 火山
  --volcano-1: #ffeee6;
  --volcano-2: #ffc4a8;
  --volcano-3: #ffa480;
  --volcano-4: #f77d54;
  --volcano-5: #eb542a;
  --volcano-6: #dd3a16;
  --volcano-7: #c02c11;
  --volcano-8: #a62514;
  --volcano-9: #86271a;
  --volcano-10: #702623;

  // Magenta / 法式洋红
  --magenta-1: #fff0f6;
  --magenta-2: #ffc7de;
  --magenta-3: #ff9eca;
  --magenta-4: #f571b1;
  --magenta-5: #e8469a;
  --magenta-6: #db1f86;
  --magenta-7: #b51070;
  --magenta-8: #9c1869;
  --magenta-9: #7b245d;
  --magenta-10: #61264e;

  // Lime / 青柠
  --lime-1: #f8ffc2;
  --lime-2: #dee8a7;
  --lime-3: #cadb7b;
  --lime-4: #b4cf53;
  --lime-5: #9dc22f;
  --lime-6: #86b60e;
  --lime-7: #638f04;
  --lime-8: #4e710d;
  --lime-9: #40561d;
  --lime-10: #32401f;

  // Red / 红色
  --red-1: #fff1f0;
  --red-2: #ffe3e0;
  --red-3: #ffbbb8;
  --red-4: #ff918f;
  --red-5: #fa6466;
  --red-6: #ed3943;
  --red-7: #c72633;
  --red-8: #af2a3a;
  --red-9: #882c3a;
  --red-10: #612a31;

  // Golden Purple / 酱紫
  --purple-1: #f9f0ff;
  --purple-2: #eed9ff;
  --purple-3: #d2abf7;
  --purple-4: #b27ceb;
  --purple-5: #9152de;
  --purple-6: #732dd2;
  --purple-7: #521bab;
  --purple-8: #4f2b93;
  --purple-9: #422a78;
  --purple-10: #38285b;

  // Calendula Gold / 金盏花
  --gold-1: #fff8d2;
  --gold-2: #ffefad;
  --gold-3: #ffe285;
  --gold-4: #ffd35c;
  --gold-5: #ffc233;
  --gold-6: #f6a609;
  --gold-7: #cf8300;
  --gold-8: #a86500;
  --gold-9: #7b5221;
  --gold-10: #5d4222;

  // Cyan / 明青
  --cyan-1: #c5dbd8;
  --cyan-2: #99cfc7;
  --cyan-3: #70c2ba;
  --cyan-4: #4cb5ae;
  --cyan-5: #2ca8a4;
  --cyan-6: #109b9b;
  --cyan-7: #0f8a8a;
  --cyan-8: #067275;
  --cyan-9: #0c585d;
  --cyan-10: #0f4449;

  // Geek Blue / 极客蓝
  --geekblue-1: #d2e2ff;
  --geekblue-2: #bfd4ff;
  --geekblue-3: #96b6ff;
  --geekblue-4: #6d93fc;
  --geekblue-5: #416af0;
  --geekblue-6: #384ced;
  --geekblue-7: #2a38c9;
  --geekblue-8: #2c32a5;
  --geekblue-9: #2c3484;
  --geekblue-10: #2c3066;

  // Yellow / 黄
  --yellow-1: #feffde;
  --yellow-2: #ffffbd;
  --yellow-3: #faf691;
  --yellow-4: #ede464;
  --yellow-5: #e0d03a;
  --yellow-6: #d4ba15;
  --yellow-7: #ad9209;
  --yellow-8: #8d7309;
  --yellow-9: #6c5919;
  --yellow-10: ##554825;

  // ======黑白透明度色板======
  // 深色背景下
  --white-100: rgba(255, 255, 255, 1);
  --white-85: rgba(255, 255, 255, 0.85);
  --white-65: rgba(255, 255, 255, 0.65);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-35: rgba(255, 255, 255, 0.35);
  --white-25: rgba(255, 255, 255, 0.25);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-8: rgba(255, 255, 255, 0.08);
  --white-4: rgba(255, 255, 255, 0.04);
  --white-2: rgba(255, 255, 255, 0.02);

  // 浅色背景下
  --black-100: rgba(0, 0, 0, 1);
  --black-85: rgba(0, 0, 0, 0.85);
  --black-45: rgba(0, 0, 0, 0.45);
  --black-25: rgba(0, 0, 0, 0.25);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-8: rgba(0, 0, 0, 0.08);
  --black-4: rgba(0, 0, 0, 0.04);
  --black-2: rgba(0, 0, 0, 0.02);

  // ======主色20%======
  --blue-6-20: rgba(0, 125, 224, 0.2);
  --green-6-20: rgba(7, 125, 85, 0.2);
  --orange-6-20: rgba(191, 72, 21, 0.2);
  --volcano-6-20: rgba(223, 44, 5, 0.2);
  --magenta-6-20: rgba(219, 31, 134, 0.2);
  --lime-6-20: rgba(134, 182, 14, 0.2);
  --red-6-20: rgba(237, 57, 67, 0.2);
  --purple-6-20: rgba(127, 57, 225, 0.2);
  --gold-6-20: rgba(246, 166, 9, 0.2);
  --cyan-6-20: rgba(16, 155, 155, 0.2);
  --geekblue-6-20: rgba(25, 65, 226, 0.2);
  --yellow-6-20: rgba(212, 186, 21, 0.2);

  --blue-5-10: rgba(38, 154, 237, 0.1);
  --gold-6-35: rgba(246, 166, 9, 0.35);
  --red-6-35: rgba(237, 57, 67, 0.35);
  --red-5-20: rgba(250, 100, 102, 0.2);
  --red-5-30: rgba(250, 100, 102, 0.3);
}

组件基础变量定义：

packages/quantex-plugin-theme-dark/index.scss

@import './colors';

:root {
  // === 主题色、功能色 ===
  --primary-color: var(--blue-6); // 主色
  --primary-color-hover: var(--blue-5);
  --primary-color-focus: var(--blue-5);
  --primary-color-active: var(--blue-6);

  --success-color: var(--green-6);
  --success-color-hover: var(--green-5);
  --success-color-focus: var(--green-5);
  --success-color-active: var(--green-6);

  --warning-color: var(--gold-6);
  --warning-color-hover: var(--gold-5);
  --warning-color-focus: var(--gold-5);
  --warning-color-active: var(--gold-6);

  --error-color: var(--red-6);
  --error-color-hover: var(--red-5);
  --error-color-focus: var(--red-5);
  --error-color-active: var(--red-6);

  --white: var(--gray-1);
  --black: var(--gray-14);
  // 顶部栏背景色
  --top: #353234;

  --disabled-bg: var(--white-4); // 禁用背景色

  // === 文字颜色 ===
  --text-color-primary: var(--white-85); // 主要文字颜色
  --text-color-secondary: var(--white-45); // 次要文字
  --text-color-weak: var(--white-25); // 弱一点文字颜色
  --text-color-weaker: var(--white-15); // 更弱一点文字颜色
  --text-color-disabled: var(--white-15); // disabled文字颜色

  --text-selection-color: var(--white); // 鼠标选中文字颜色
  --text-selection-bg: var(--blue-6-20); // 鼠标选中内容的背景色

  // === 通用 token ===
  --body-bg: var(--black); // body 背景色
  --layout-bg: var(--gray-12); // 通用背景颜色：系统内容区、footer 区背景色、工作台内容区
  --component-bg: var(--gray-10); // 大部分组件背景色
  --component-split-line-color: var(--white-4); // 组件分割线颜色
  --split-line-color: var(--body-bg); // 布局分割线

  --border-color-base: var(--gray-9); // 边框基础颜色 使用场景：表格外边框线...

  --trend-up-color: var(--error-color); // 上升趋势颜色
  --trend-down-color: var(--success-color); // 下降趋势颜色

  //====== Shadow & Radius =======
  --shadow-color: var(--black-15); // 小阴影颜色
  --shadow-color-secondary: var(--black-25); // 大阴影颜色
  --box-shadow: 0, 2px, 8px, 0px, var(--shadow-color); // 小阴影 气泡框等小框使用的阴影
  --box-shadow-secondary: 0, 3px, 8px, 4px, var(--shadow-color-secondary); // 大阴影：Modal、Alert 等 大的面板使用的阴影

  --common-transition: all 0.3s ease; // common transition

  //====== 输入框通用变量 ======= 包含组件Input、InputNumber、Select、AutoComplete、Cascader、DatePicker、TimePicker等
  --input-bg: var(--white-8); // input 默认背景色
  --input-disabled-bg: var(--white-15); // input disabled 背景色
  --input-disabled-color: var(--text-color-secondary); // input disabled 文字色
  --input-right-icon-color: var(
    --white-25
  ); // input 右侧图标 color 包含 clear,close, info, loading, search
  --input-right-icon-disabled-color: var(
    --black-15
  ); // input 右侧图标 disabled color 包含 clear,close, info, loading, search
  --input-placeholder-color: var(--text-color-weak); // input 占位符颜色
  --input-placeholder-disabled-color: var(--text-color-disabled); // input disabled 占位符颜色
  --input-border-color: var(--input-bg); // input border 默认 color
  --input-border-hover-color: var(--blue-9); // input border hover color
  --input-border-focus-color: var(--primary-color); // input border focus color
  --input-affix-color: var(--text-color-secondary); // input 前、后缀  color
  --input-affix-disabled-color: var(--text-color-disabled); // input disabled 前、后缀  color
  --input-addon-color: var(--text-color-secondary); // input 前后addon  color
  --input-addon-split-line-color: var(--white-8); // input 前后addon 分割线 color
  --input-addon-disabled-color: var(--text-color-disabled); // input disabled 前后addon  color

  //====== 下拉框通用变量 =======
  --dropdown-bg: var(--component-bg); // dropdown menu 背景色
  --dropdown-border-color: var(--gray-9); // dropdown menu 通用边框颜色
  --dropdown-arrow-bg: var(--gray-9); // 箭头背景色
  --dropdown-box-shadow: var(--box-shadow); // dropdown menu shadow 阴影
  //====== 选项active/hover通用变量 ======= dropdown Select、AutoComplete、Cascader、Calendar、Menu
  --item-active-color: var(--primary-color); // dropdown menu item 激活文字颜色
  --item-disabled-color: var(--white-25); // dropdown menu item disabled 文字颜色
  --item-active-bg: var(--white-4); // dropdown menu item active 背景色
  --item-hover-bg: var(--white-4); // dropdown menu item hover 背景色

  --active-bar-bg: var(
    --primary-color
  ); // 激活状态底边线高亮背景颜色： Tabs、DatePicker、AgGrid Filter 面板

  //====== icon 通用变量 ======= 向上箭头、向下箭头、
  --icon-color: var(--text-color-secondary); // icon 颜色
  --icon-hover-color: var(--text-color-primary); // icon 颜色
  --icon-color-disabled: var(--white-25); // icon disabled 颜色

  // ========layout ============
  --layout-sider-bg: var(--gray-11); // 侧边栏
  --layout-header-bg: var(--top); // 系统头部及 Tab 栏
  --layout-header-search-bg: var(--white-4); // 系统头部搜索背景
  --layout-header-icon-bg: var(--white-15); // 系统header 图标背景色
  --layout-header-icon-color: var(--text-color-primary); // 系统header 图标颜色
  --layout-footer-bg: var(--layout-bg); // 底部
  --layout-nav-bg: var(--top); // 导航栏背景色
  --layout-nav-tab-bg: var(--top); // 页面导航 Tab
  --layout-nav-tab-active-bg: var(--gray-9); // 页面导航 Tab 激活状态
  --layout-nav-tab-hover-bg: var(--gray-9); // 页面导航 Tab hover 状态
  --layout-nav-tab-color: var(--text-color-secondary); // 页面导航 Tab 文字颜色
  --layout-nav-tab-hover-color: var(--text-color-primary); // 页面导航 Tab hover 文字颜色
  --layout-nav-tab-active-color: var(--text-color-primary); // 页面导航 Tab 选中文字颜色
  --layout-sider-tab-bg: var(--top); // 系统菜单顶部 Tab（菜单/工作台） 背景
  --layout-sider-tab-active-bg: var(--gray-9); // 系统菜单顶部 Tab（菜单/工作台） 激活状态
  --layout-sider-tab-hover-bg: var(--gray-9); // 系统菜单顶部 Tab（菜单/工作台） hover 状态
  --layout-sider-collapse-btn-bg: var(--gray-10); // 系统菜单折叠按钮背景色
  --layout-sider-collapse-btn-hover-bg: var(--gray-9); // 系统菜单折叠按钮背景色
  --layout-sider-collapse-btn-color: var(--white-25);
  --layout-sider-collapse-btn-hover-color: var(--white-45); // 系统菜单折叠按钮颜
  --layout-sider-collapsed-menu-color: var(
    --text-color-secondary
  ); // 系统菜单折叠时，menu 整体的颜色
  --layout-sider-collapsed-menu-hover-color: var(
    --text-color-primary
  ); // 系统菜单折叠时，menu hover 整体的颜色
  --layout-sider-collapsed-menu-hover-bg: var(--gray-10); // 系统菜单折叠时，menu hover 整体的bg
  --layout-sider-collapsed-menu-selected-color: var(
    --text-color-primary
  ); // 系统菜单折叠时，menu selected 整体的颜色
  --layout-sider-collapsed-menu-selected-bg: var(
    --gray-9
  ); // 系统菜单折叠时，menu selected 整体的bg
  // ======== workbench ============
  --workbench-action-icon-color: var(--text-color-secondary); // 工作台右侧操作icon颜色
  --workbench-action-icon-hover-color: var(--text-color-primary); // 工作台右侧操作icon hover 颜色
  --workbench-header-bg: var(--gray-11); // 工作台 header bg
  --workbench-body-bg: var(--layout-bg); // 工作台 内容区 bg

  //====== scrollbar =======
  --scrollbar-track-bg: transparent; // 滚动条滑轨背景色
  --scrollbar-thumb-border-color: var(--gray-10); // 滚动条滑块边框
  --scrollbar-thumb-bg: var(--white-8); // 滚动条滑块背景色
  --scrollbar-thumb-hover-bg: var(--white-45); // 滚动条滑块鼠标 hover 状态背景色
  --scrollbar-width: 4px; // 默认宽度
  --scrollbar-hover-width: 10px; // hover宽度

  //========== 【Antd 组件】 ===========
  // === 【通用】 ===
  //====== Button =======
  // default button
  --btn-default-bg: var(--white-8); // 默认按钮背景色
  --btn-default-hover-bg: var(--white-15); // 默认按钮 hover 背景色
  --btn-primary-bg: var(--primary-color); // primary按钮背景色
  --btn-primary-hover-bg: var(--primary-color-hover); // primary按钮 hover 背景色
  --btn-dashed-border-color: var(--white-15); // dashed 按钮边框颜色
  --btn-dashed-border-hover-color: var(--btn-dashed-border-color); // dashed 按钮 hover 边框颜色

  --btn-link-color: var(--primary-color); // link 按钮文字颜色
  --btn-link-hover-color: var(--blue-4); // link 按钮 hover 文字颜色
  --btn-text-hover-bg: var(--white-15); // text 按钮 hover 背景色
  // dangerous button
  --btn-dangerous-default-color: var(--red-5); // dangerous 默认按钮文字颜色
  --btn-dangerous-default-bg: var(--red-5-20); // dangerous默认按钮背景色
  --btn-dangerous-default-hover-bg: var(--red-5-30); // dangerous默认按钮 hover 背景色
  --btn-dangerous-primary-color: var(--white-100); // dangerous primary按钮文字颜色
  --btn-dangerous-primary-bg: var(--error-color); // dangerous primary按钮背景色
  --btn-dangerous-primary-hover-bg: var(--error-color-hover); // dangerous primary按钮 hover 背景色
  --btn-dangerous-dashed-color: var(--red-5); // dangerous dashed 按钮文字颜色
  --btn-dangerous-dashed-border-color: var(--red-5); // dangerous dashed 按钮边框颜色

  --btn-dangerous-text-color: var(--red-5); // dangerous text 按钮文字颜色
  --btn-dangerous-text-hover-color: var(--red-4); // dangerous text 按钮 hover 文字颜色
  --btn-dangerous-link-color: var(--red-5); // dangerous link 按钮文字颜色
  --btn-dangerous-link-hover-color: var(--red-4); // dangerous link 按钮 hover 文字颜色
  // disabled button
  --btn-disabled-color: var(--white-25); // 按钮 disabled 文字色
  --btn-disabled-bg: var(--btn-default-bg); // 默认按钮 disabled 背景色
  --btn-dashed-border-disabled-color: var(
    --btn-dashed-border-color
  ); // dashed 按钮 disabled 边框颜色

  // === 【布局】 ===
  //====== Divider =======
  --divider-bg: transparent;
  --divider-line-color: var(--white-8); // 分割线颜色

  // === 【导航】 ===
  //====== Breadcrumb =======
  --breadcrumb-color: var(--text-color-secondary); // breadcrumb 默认文字颜色
  --breadcrumb-active-color: var(--text-color-primary); // breadcrumb 激活文字颜色
  --breadcrumb-hover-color: var(--breadcrumb-active-color); // breadcrumb hover文字颜色
  --breadcrumb-separator-color: var(--breadcrumb-color); // breadcrumb 分隔符颜色
  //====== Dropdown =======
  //====== Menu =======
  --menu-bg: transparent; // menu 背景色
  --menu-color: var(--white-85); // menu 颜色
  --menu-item-bg: transparent; // menu item 背景色
  --menu-item-color: var(--white-85); // menu item 颜色
  --menu-item-selected-color: var(--white-100); // menu item selected 颜色
  // 选项active/hover通用变量
  --menu-arrow-color: var(--white-45); // menu 右侧折叠箭头 颜色
  --menu-group-title-color: var(--white-45); // menu group title 颜色
  --menu-popup-box-shadow: var(--box-shadow-secondary); // 弹出menu 阴影
  //====== PageHeader =======
  --page-header-bg: var(--gray-12); // 背景
  --page-header-title-color: var(--text-color-primary); // page header title 颜色
  --page-header-sub-title-color: var(--text-color-secondary); // page header sub title 颜色
  --page-header-back-button-color: var(--text-color-primary); // page header back 颜色
  --page-header-back-button-hover-color: var(--primary-color); // page header back hover 颜色
  //====== Pagination =======
  --pagination-item-bg: var(--white-4); // pagination item 背景色
  --pagination-item-active-bg: var(--blue-6-20); // pagination item active 背景色
  --pagination-item-active-disabled-bg: var(--white-8); // diabled 状态下选中项的背景色
  --pagination-item-active-color: var(--primary-color); // pagination item active 文字颜色
  --pagination-item-hover-color: var(--primary-color); //分页项hover文字颜色
  --pagination-item-hover-bg: var(--primary-color); // 分页项hover背景颜色
  --pagination-item-link-color: var(--text-color-weaker); // 省略号颜色

  //====== Steps =======
  --steps-finish-icon-bg: transparent; // finish icon bg
  --steps-finish-icon-color: var(--primary-color); // finish icon color
  --steps-finish-line-color: var(--primary-color); // finish 步骤条 线
  --steps-process-icon-bg: var(--primary-color); // process icon bg
  --steps-process-icon-color: var(--text-color-primary); // process icon color
  --steps-process-line-color: var(--white-15); // process line color
  --steps-wait-icon-bg: transparent; // wait icon bg
  --steps-wait-icon-color: var(--white-35); // wait icon color
  --steps-wait-line-color: var(--white-15); // wait line color
  --steps-error-icon-bg: transparent; // error icon bg
  --steps-error-icon-color: var(--error-color); // error icon color
  --steps-error-line-color: var(--white-15); // error line color
  --steps-dot-bg: transparent; // dot bg
  --steps-dot-color: var(--primary-color); // dot color
  --steps-nav-active-line-color: var(--primary-color); // nav active line
  --steps-nav-arrow-color: var(--white-35); // nav arrow color

  // === 【数据录入】 ===
  //====== AutoComplete =======
  // 下拉框通用变量
  // 选项active/hover通用变量
  //====== Cascader =======
  // 下拉框通用变量
  // 选项active/hover通用变量

  //====== Checkbox =======
  --checkbox-bg: var(--white-4); // checkbox 背景色
  --checkbox-border-color: var(--white-25); // checkbox border 颜色
  --checkbox-border-hover-color: var(--primary-color); // checkbox border hover 颜色
  --checkbox-border-checked-color: var(--primary-color); // checkbox border checked 颜色
  --checkbox-checked-bg: var(--primary-color); // checkbox checked 背景色
  --checkbox-checked-icon-color: var(--text-color-primary); // checkbox checked 对号颜色
  --checkbox-half-checked-inner-bg: var(
    --checkbox-checked-bg
  ); // checkbox half checked inner 背景色
  --checkbox-disabled-color: var(--text-color-disabled); // checkbox disabled 文字颜色
  --checkbox-disabled-border-color: var(--text-color-disabled); // checkbox disabled border色

  //====== DatePicker =======
  // 输入框通用变量
  // 下拉框通用变量
  // 选项active/hover通用变量
  --date-picker-dropdown-arrow-color: var(--text-color-secondary); // datepicker dropdown 箭头颜色
  --date-picker-dropdown-arrow-hover-color: var(--white-65); // datepicker dropdown 箭头hover颜色
  --date-picker-dropdown-today-border-color: var(
    --primary-color
  ); // datepicker dropdown today 边框颜色
  --date-picker-dropdown-item-hover-bg: var(--white-8); // datepicker dropdown hover项 背景
  --date-picker-dropdown-item-active-bg: var(--primary-color); // datepicker dropdown 选中项 背景
  --date-picker-dropdown-item-in-range-bg: var(
    --blue-6-20
  ); // datepicker dropdown 选中范围内项 背景
  --date-picker-dropdown-item-not-in-range-border-color: var(
    --primary-color
  ); // datepicker dropdown 不在选中范围内项 边框颜色
  --date-picker-dropdown-body-border-color: var(
    --primary-color
  ); // datepicker dropdown 内部区域边框颜色

  //====== Form =======
  // 参考具体组件的变量设置
  //====== Input =======
  // 输入框通用变量
  //====== InputNumber =======
  --input-number-bg: var(--white-8); // input number 背景色
  --input-number-handler-bg: var(--white-8); // input number handler 背景色
  //====== Mentions =======
  //====== Radio =======
  // default
  --radio-default-bg: var(--white-4); // radio 背景色
  --radio-default-border-color: var(--white-25); // radio border 颜色
  --radio-default-hover-border-color: var(--primary-color); // radio hover border 颜色
  --radio-default-checked-border-color: var(--primary-color); // radio checked border 颜色
  --radio-default-checked-inner-bg: var(--primary-color); // radio checked 内部圆点 背景色
  --radio-default-disabled-border-color: var(--white-15); // radio disabled border 颜色
  --radio-default-disabled-inner-bg: var(--white-15); // radio disabled 内部圆点 背景色
  // outlined button
  --radio-outline-bg: var(--white-4); // radio 边框型 背景色
  --radio-outline-hover-bg: var(--white-8); // radio 边框型 hover 背景色
  --radio-outline-disabled-bg: var(--white-4); // radio 边框型 disabled 背景色
  --radio-outline-disabled-color: var(--white-25); // radio 边框型 disabled 背景色
  --radio-outline-checked-bg: var(--white-8); // radio 边框型 checked 背景色
  --radio-outline-checked-color: var(--primary-color); // radio 边框型 checked 文字颜色
  --radio-outline-checked-hover-color: var(--blue-5); // radio 边框型 checked hover 文字颜色
  --radio-outline-checked-hover-bg: var(--white-15); // radio 边框型 checked hover 背景色
  --radio-outline-checked-disabled-color: var(
    --text-color-secondary
  ); // radio 边框型 disabled 文字颜色
  --radio-outline-checked-disabled-bg: var(--white-8); // radio 边框型 disabled 背景色
  // solid button
  --radio-solid-bg: var(--white-4); // radio 实心型 背景色
  --radio-solid-hover-bg: var(--white-8); // radio实心型 hover背景色
  --radio-solid-disabled-bg: var(--white-4); // radio实心型 disabled 背景色
  --radio-solid-disabled-color: var(--white-25); // radio实心型 disabled 文字颜色
  --radio-solid-checked-bg: var(--primary-color); // radio实心型 checked 背景色
  --radio-solid-checked-hover-bg: var(--blue-5); // radio实心型 checked hover 背景色
  --radio-solid-checked-disabled-bg: var(--white-8); // radio实心型 checked disabled 背景色
  --radio-solid-checked-disabled-color: var(
    --text-color-secondary
  ); // radio实心型 checked disabled 文字颜色

  //====== Rate =======
  --rate-color: var(--white-15); // 评分的默认颜色
  --rate-checked-color: var(--yello-6); // 评分的选中颜色
  --rate-hover-color: var(--yello-6); // 评分hover时的颜色
  //====== Select =======
  // 输入框通用变量
  // 下拉框通用变量
  // 选项active/hover通用变量
  --select-selection-item-bg: var(--white-8); // 输入框内 selection item 背景色
  --select-selection-item-disabled-color: var(
    --text-color-secondary
  ); // 输入框内 selection item disabled 文字颜色
  --select-dropdown-bg: var(--gray-10); // select 下拉框 背景
  --select-dropdown-shadow: var(--box-shadow); // select 下拉框 阴影
  // ====== select clear icon bg======
  --select-icon-bg: #313131; // normal, hover, focused 状态下的 bg
  --select-icon-disabled-bg: #404040; // disabled 状态下的 bg
  --select-icon-warning-bg: #4a3a1b; // warning 状态下的 bg
  --select-icon-error-bg: #482426; // error 状态下的 bg

  //====== Slider =======
  --slider-rail-bg: var(--white-8); // 默认轨道背景色
  --slider-rail-hover-bg: var(--white-15); // 默认轨道hover背景色
  --slider-track-bg: var(--blue-6); // 已选中 轨道背景色
  --slider-track-hover-bg: var(--blue-5); // 已选中 轨道hover背景色
  --slider-track-disabled-bg: var(--white-25); // 已选中 轨道 禁用 背景色
  --slider-handle-bg: var(--gray-11); // 手柄 bg
  --slider-handle-border-color: var(--blue-6); // 手柄border color
  --slider-handle-border-focus-color: var(--blue-6); // 手柄border focus color
  --slider-handle-border-hover-color: var(--blue-4); // 手柄border hover color
  --slider-handle-border-disabled-color: var(--white-25); // 手柄border disabled color
  //====== Switch =======
  --switch-bg: var(--white-15); // switch 默认背景色
  --switch-disabled-bg: var(--white-8); // switch disabled 背景色
  --switch-checked-bg: var(--primary-color); // switch checked 背景色
  --switch-checked-disabled-bg: var(--blue-9); // switch checked disabled 背景色
  --switch-handle-color: var(--text-color-primary); // switch 手柄颜色

  //====== TimePicker =======
  // 输入框通用变量
  // 下拉框通用变量
  --picker-dropdown-item-bg: var(--gray-10); // picker dropdown item default bg
  --picker-dropdown-footer-bg: var(--gray-10); // picker dropdown footer bg
  --picker-dropdown-footer-border-color: var(--white-4); // picker dropdown footer top border color

  // 选项active/hover通用变量
  //====== Transfer =======
  --transfer-bg: transparent; // 背景色
  --transfer-border-color: var(--gray-9); // 边框颜色
  --transfer-header-bg: var(--white-4); // 顶部背景色
  --transfer-footer-bg: var(--gray-10); // 底部背景色
  --transfer-list-item-hover-bg: var(--white-4); // hover 项背景色
  --transfer-list-item-checked-bg: var(--white-8); // 选中项背景色
  --transfer-list-item-disabled-color: var(--text-color-disabled); // disabled项文字颜色
  //====== TreeSelect =======
  // 输入框通用变量
  // 下拉框通用变量
  // 选项active/hover通用变量
  --tree-select-drop-border-color: var(--gray-9); // 下拉框边框颜色
  //====== Upload =======
  // 1. 文件上传
  // 1.1 列表
  --upload-file-list-item-hover-bg: var(--white-4); // 列表item hover 背景色
  // 2. 图片上传
  // 2。1 图片卡
  // 2。1 图片列表
  --upload-image-card-bg: var(--white-4); // 图片卡 背景色
  --upload-image-card-border-color: var(--gray-9); // 图片卡 虚线边框颜色
  --upload-image-card-hover-border-color: var(--primary-color); // 图片卡 hover 虚线边框颜色
  --upload-image-card-disabled-bg: var(--white-8); // 图片卡 disabled 背景色
  --upload-image-card-error-bg: var(--red-6-20); // 图片卡 error 背景色
  // 3. 拖拽上传
  --upload-drag-bg: var(--white-4); // 拖拽上传背景色
  --upload-drag-border-color: var(--gray-9); // 虚线边框颜色
  --upload-drag-hover-border-color: var(--primary-color); //  hover 虚线边框颜色
  //====== Form =======
  --form-border-color: var(--gray-9); // form 边框
  --form-bg: var(--gray-12); // 背景
  --form-error-item-bg: var(--red-6-20); // error form 中 item bg
  --form-error-item-hover-border-color: var(--red-6); // error form 中 item hover border color
  --form-error-item-active-border-color: var(--red-6); // error form 中 item active border color
  --form-warning-item-bg: var(--gold-6-20); // warning form 中 item bg
  --form-warning-item-hover-border-color: var(--gold-6); // warning form 中 item hover border color
  --form-warning-item-active-border-color: var(
    --gold-6
  ); // warning form 中 item active border color

  // === 【数据展示】 ===
  //====== Avatar =======
  --avatar-bg: var(--white-15); // avatar 背景色
  --avatar-icon-color: var(--white-85); // icon 颜色
  //====== Badge =======
  --badge-count-default-bg: var(--error-color); // 计数徽标 默认 背景色
  --badge-ribbon-corner-color: var(--white-25); // 缎带型徽标ribbon corner颜色
  //====== Calendar =======
  --calendar-bg: transparent; // calendar 背景色
  --calendar-item-bg: var(--white-4); // 日期项的背景色
  --calendar-item-hover-bg: var(--white-8); // 日期项 hover 背景色
  --calendar-item-active-bg: var(--blue-6-20); // 日期项选中背景色
  --calendar-item-top-border-color: var(--white-4); // calendar 顶部边框颜色
  --calendar-item-top-border-active-color: var(--primary-color); // calendar active top border 颜色
  --calendar-item-date-color: var(--text-color-primary); // 日期项的 日期值 文字颜色
  --calendar-item-date-active-color: var(--blue-5); // 日期项的 日期值 文字选中颜色
  --calendar-item-date-disabled-color: var(--text-color-disabled); // 禁用日期项的 日期值 文字色
  --calendar-item-not-in-view-date-color: var(
    --text-color-disabled
  ); // 不在当月的日期项 的 日期值 文字颜色
  //====== Card =======
  --card-bg: var(--component-bg); // 卡片背景色
  --card-border-color: var(--gray-9); // 卡片边框
  --card-split-line-color: var(--white-4); // 卡片 内部分割线
  //====== Carousel =======
  --carousel-bg: var(--blue-5); // 跑马灯背景色
  --carousel-slick-bg: var(--white-25); // 滑块背景色
  --carousel-slick-hover-bg: var(--white-45); // 轮播滑块 hover 背景色
  --carousel-slick-active-bg: var(--white-45); // 轮播滑块激活背景色

  //====== Collapse =======
  --collapse-content-bg: var(--gray-12); // 背景色
  --collapse-header-bg: var(--white-4); // 顶部背景色
  --collapse-border-color: var(--border-color-base); // 边框颜色
  //====== Comment ======= 不需定义变量
  //====== Descriptions =======
  --descriptions-bg: transparent; // 描述列表背景色
  --descriptions-border-color: var(--white-8); // 边框颜色
  --descriptions-item-label-bg: var(--gray-11); // 标签列背景色
  --descriptions-item-content-bg: var(--gray-12); // 内容列背景色

  //====== Empty ======= 不需定义变量
  //====== Image ======= 不需定义变量
  //====== List =======
  --list-bg: var(--white-4); // 列表背景色
  --list-bottom-border-color: var(--white-4);

  //====== Typography =======
  --typography-mark-bg: var(--gold-5);
  --typography-code-bg: var(--gray-10);
  --typography-code-border-color: var(--gray-9);
  --typography-keyboard-bg: var(--gray-10);
  --typography-keyboard-border-color: var(--gray-9);

  //====== Popover =======
  --popover-bg: var(--component-bg); // 气泡框背景色
  --popover-border-color: var(--gray-9); // 边框 颜色
  --popover-arrow-color: var(--gray-9); // 箭头 颜色
  --popover-split-line-color: var(--white-4); // 箭头 颜色
  //====== Segmented =======
  --segmented-bg: var(--white-4); // 背景色
  --segmented-selected-item-bg: var(--white-15); // 选中项背景色
  --segmented-selected-item-color: var(--text-color-primary); // 选中项 颜色
  --segmented-item-color: var(--text-color-secondary); // item color
  --segmented-item-hover-color: var(--text-color-primary); // item hover color
  //====== Statistic ======= 不需定义变量
  //====== Table =======
  --table-header-bg: var(--gray-11); // header bg
  --table-footer-bg: var(--gray-11); // footer bg
  --table-body-bg: var(--gray-12); // body bg
  --table-border-color: var(--gray-9); // table 外边框
  --table-cell-border-color: var(--white-4); // table 单元格边框
  --table-header-color: var(--text-color-secondary); // header color
  --table-header-split-line-color: var(--white-8); // header 分割线 color
  --table-header-icon-color: var(--white-25); // header icon color
  --table-header-icon-hover-color: var(--white-45); // header icon hover color

  //====== Tabs =======
  --tabs-bg: transparent; // tabs 透明背景
  --tabs-active-color: var(--primary-color); // 激活状态时，标签文字/图标颜色
  --tabs-hover-color: var(--blue-5); // hover 状态时，标签文字、图标颜色
  --tabs-disabled-color: var(--text-color-disabled); // 标签 disabled 状态文字颜色
  --tabs-card-bg: var(--white-4); // tabs 卡片背景色
  --tabs-card-active-bg: var(--white-8); // tabs 卡片激活背景色
  --tabs-card-close-icon-color: var(--white-25); // tabs 卡片 close icon color
  --tabs-card-close-icon-hover-color: var(--white-45); // tabs 卡片 close icon hover color
  --tabs-card-checked-close-icon-color: var(--white-45); // tabs 卡片 checked close icon color
  --tabs-card-checked-close-icon-hover-color: var(
    --white-65
  ); // tabs 卡片 checked close icon hover color
  //====== Tag =======
  --tag-default-bg: var(--white-8); // tag 默认背景色
  --tag-default-color: var(--text-color-primary); // tag 默认文字
  --tag-dashed-border-color: var(--gray-8); // tag 虚线边框颜色
  --tag-checkable-bg: transparent;
  --tag-checkable-checked-bg: var(--primary-color);
  --tag-checkable-hover-color: var(--primary-color);

  --tag-red-bg: var(--red-6-20); // tag red 背景色
  --tag-red-color: var(--red-5); // tag red 文字色
  --tag-orange-bg: var(--orange-6-20); // tag orange 背景色
  --tag-orange-color: var(--orange-5); // tag orange 文字色
  --tag-gold-bg: var(--gold-6-20); // tag gold 背景色
  --tag-gold-color: var(--gold-5); // tag gold 文字色
  --tag-green-bg: var(--green-6-20); // tag success 背景色
  --tag-green-color: var(--green-5); // tag success 文字色
  --tag-blue-bg: var(--blue-6-20); // tag blue 背景色
  --tag-blue-color: var(--blue-5); // tag blue 文字色
  --tag-purple-bg: var(--purple-6-20); // tag purple 背景色
  --tag-purple-color: var(--purple-5); // tag purple 文字色
  --tag-cyan-bg: var(--cyan-6-20); // tag cyan 背景色
  --tag-cyan-color: var(--cyan-5); // tag cyan 文字色
  --tag-lime-bg: var(--lime-6-20); // tag lime 背景色
  --tag-lime-color: var(--lime-5); // tag lime 文字色
  --tag-geekblue-bg: var(--geekblue-6-20); // tag geekblue 背景色
  --tag-geekblue-color: var(--geekblue-5); // tag geekblue 文字色
  --tag-magenta-bg: var(--magenta-6-20); //tag magenta 背景色
  --tag-magenta-color: var(--magenta-5); //tag magenta 文字色
  --tag-volcano-bg: var(--volcano-6-20); // tag volcano 文字色
  --tag-volcano-color: var(--volcano-5); // tag volcano 文字色

  --tag-success-bg: var(--tag-green-bg); // tag success 背景色
  --tag-success-color: var(--tag-green-color); // tag success 文字色
  --tag-warning-bg: var(--tag-orange-bg); // tag warning 背景色
  --tag-warning-color: var(--tag-orange-color); // tag warning 文字色
  --tag-error-bg: var(--tag-red-bg); // tag error 背景色
  --tag-error-color: var(--tag-red-color); // tag error 文字色
  --tag-processing-bg: var(--tag-blue-bg); // tag processing 背景色
  --tag-processing-color: var(--tag-blue-color); // tag processing 文字色
  //====== Timeline =======
  --timeline-line-color: var(--white-8); // 时间线 - 线颜色
  --timeline-dot-color: var(--primary-color); // 时间线 - dot 颜色
  --timeline-dot-success-color: var(--success-color); // 时间线 - dot success 颜色
  --timeline-dot-error-color: var(--error-color); // 时间线 - dot error 颜色
  --timeline-dot-normal-color: var(--text-color-primary); // 时间线 - dot gray 颜色
  --timeline-dot-bg: var(--gray-12); // 时间线 - dot 背景色
  //====== Tooltip =======
  --tooltip-bg: var(--gray-10); // 背景色
  --tooltip-arrow-bg: var(--gray-9); // 箭头背景色
  --tooltip-border-color: var(--gray-9); // 背景色
  //====== Tree =======
  --tree-bg: transparent; // 没有背景色
  --tree-line-color: var(--white-15); // 连接线颜色
  --tree-switcher-icon-color: var(--white-85); // 展开、折叠 icon 颜色
  --tree-node-selected-color: var(--primary-color); // 选中节点的文字颜色
  --tree-node-selected-bg: var(--white-4); // 选中节点的背景色
  --tree-node-hover-bg: var(--white-4); // 节点 hover 的背景色
  --tree-disabled-color: var(--white-25); // 禁用颜色
  --tree-drag-icon-color: var(--white); // drag icon 颜色

  // === 【反馈】 ===
  //====== Alert =======
  --alert-info-bg: var(--blue-10); // 主要弹框背景色
  --alert-error-bg: var(--red-10); // error 背景色
  --alert-success-bg: var(--green-9); // 成功弹框背景色
  --alert-warning-bg: var(--gold-10); // 告警弹框背景色
  //====== Drawer =======
  --drawer-bg: var(--gray-12); //  抽屉背景色
  --drawer-header-bg: var(--gray-10); // 抽屉顶部背景色
  --drawer-header-border-bottom-color: var(--white-4); // 抽屉顶部 border bottom
  --drawer-border-color: var(--gray-9); // 边框颜色
  //====== Message =======
  --message-bg: var(--gray-10); // 全局提示背景色
  --message-box-shadow: var(--box-shadow); // 阴影
  //====== Modal =======
  --modal-header-bg: var(--gray-10); // Modal header 背景色
  --modal-body-bg: var(--gray-12); // Modal body 背景色
  --modal-footer-bg: var(--gray-12); // Modal footer 背景色
  --modal-border-color: var(--gray-9); // moday 边框
  --modal-content-border-color: var(--white-4); // 内容区 上下边框颜色
  --modal-box-shadow: var(--box-shadow-secondary); // 阴影
  --modal-close-icon-color: var(--white-45); // 关闭按钮
  --modal-confirm-bg: var(--gray-10); // moday confirm bg
  //====== Notification =======
  --notification-bg: var(--gray-10); // 背景色
  --notification-box-shadow: var(--box-shadow-secondary); // 阴影
  //====== Popconfirm =======
  --popconfirm-bg: var(--component-bg); // 气泡确认框背景色
  --popconfirm-box-shadow: var(--box-shadow); // 气泡确认框阴影
  //====== Progress =======
  --progress-track-bg: var(--white-8); // 轨道背景色
  --progress-track-active-bg: var(--primary-color); // 轨道 有效范围 背景色
  --progress-track-error-bg: var(--error-color); // 轨道 有效范围 error 背景色
  --progress-track-success-bg: var(--success-color); // 轨道 有效范围 success 背景色
  //====== Result ======= UI 未完成
  //====== Skeleton =======
  --skeleton-bg: transparent; // 骨架屏 背景
  --skeleton-color: var(--white-4); // 骨架屏 带子 默认颜色
  --skeleton-wave-color: var(--white-8); // 骨架屏 带子 闪动颜色
  //====== Spin ======= 无 UI 设计
  --spin-loading-bg: var(--blue-10); // loading 容器 背景色

  // === 【其他】 ===
  //====== Anchor =======
  --anchor-line-color: var(--white-8); // 线
  --anchor-dot-color: var(--primary-color); // 锚点 dot color
  --anchor-dot-bg: var(--gray-11); // 锚点 dot bg

  //========== Quantex 组件 ===========
  //====== AgGrid =======
  --ag-grid-header-color: var(--text-color-secondary); // ag grid header 文字色
  --ag-grid-title-bar-bg: var(--layout-bg);
  --ag-grid-header-menu-tab-bg: var(--gray-10); // ag grid header menu 点击后显示的tab bg

  --ag-grid-header-column-separator-color: var(--gray-9); // 表头分割线
  --ag-grid-foreground-color: var(--text-color-primary); // 主前景色（文本、图标）
  --ag-grid-secondary-foreground-color: var(--text-color-secondary); // 次要前景色
  --ag-grid-disabled-foreground-color: var(--text-color-disabled); // 禁用文字颜色
  --ag-grid-header-foreground-color: var(--text-color-secondary); // 表头前景色（文本、图标）
  --ag-grid-background-color: var(--layout-bg); // ag grid 背景色
  --ag-grid-header-background-color: var(--white-4); // ag grid header 背景色
  --ag-grid-side-button-selected-background-color: var(
    --primary-color
  ); // 侧边栏按钮tab激活的文字颜色
  --ag-grid-odd-row-background-color: var(--ag-grid-background-color); // 奇数行背景色
  --ag-grid-selected-row-background-color: var(--blue-5-10); // 选中行背景色
  --ag-grid-row-hover-color: var(--white-8); // 表格行 hover 背景色
  --ag-grid-border-color: var(--border-color-base); // ag grid 边框颜色
  --ag-grid-row-border-color: var(--white-4); // ag grid row bottom border 颜色
  --ag-grid-chip-background-color: var(--white-4); // 拖拽列的背景色
  --ag-grid-control-panel-background-color: var(--layout-bg); // 过滤面板背景色
  --ag-grid-value-change-delta-up-color: var(--stock-up-color); // 数值上升趋势文字颜色 - 红色
  --ag-grid-value-change-delta-down-color: var(--stock-down-color); // 数值下降趋势文字颜色 - 绿色

  // ===== 其他 ========
  // 股票涨跌：红色、绿色
  --stock-up-color: #f04134;
  --stock-down-color: #3dbd7d;
}

变量使用：

定义完成相应主色变量colors.scss和组件基础变量index.scss之后，在主题目录下手动运行node parse.js命令会在styles/core/tools目录下生成映射文件_colors.scss和基础变量_mapping.scss文件。

/**
 * 映射文件：app/styles/core/_colors.scss、app/styles/core/_mapping.scss
 * 映射文件是scss变量到css variables的映射
 */
$gray-1: var(--gray-1);
$primary-color: var(--primary-color);

/**
 * 在组件变量覆盖以及具体业务开发中使用形式统一为scss变量：$gray-1
 * app/styles/themes/Display/AntAvatar.scss
 */
.ant-avatar {
  // 使用$avatar-bg而非var(--avatar-bg)
  background-color: $avatar-bg;
  .anticon {
    color: $avatar-icon-color;
  }
}

四、定制自己的主题

基于主题切换的实现原理，自定义主题只需要根据现有 css variables 文件进行修改。

目前 Godzilla UI 有两套默认主题，我们计划在之后推出更多主题满足个性化的需求，敬请期待。

五、使用useTheme获取实时主题

godzilla 最低版本 >= v3.4.2

// 引入 useTheme hook
import useTheme from '@/hooks/useTheme';


// 使用 useTheme hook
const [currentTheme, setCurrentTheme] = useTheme();
// 正常情况下不需要使用setCurrentTheme
// currentTheme 将跟随系统自动更新，会保持为最新的主题
const [currentTheme, _] = useTheme();