更换主题

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

一、 主题定制

我们基于 Ant Design React 进行开发，完全支持官方提供的 less 变量定制功能，具体方式如下：

在脚手架目录中找到 antdtheme.js 如下。

// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
module.exports = {
  'font-size-base': '14px',
  'badge-font-size': '12px',
  'btn-font-size-lg': '@font-size-base',
  'menu-dark-bg': '#00182E',
  'menu-dark-submenu-bg': '#000B14',
  'layout-sider-background': '#00182E',
  'layout-body-background': '#f0f2f5',
};

在 所有变量表 找到需要修改的变量，修改后启动 npm start，就可以在你的应用界面看到效果了。

更多方式可以参考官方文档：定制主题。

二、 样式覆盖

Ant Design 的通用样式变量可能无法满足所有定制需求，你需要全局覆盖默认的组件样式。

1. 全局覆盖组件

比如在 src/index.less 里修改所有标签的字体大小。

// src/index.less
:global {
  .ant-tag {
    font-size: 12px;
  }
}

2. 单独覆盖指定组件

// sample.less
.customTag {
  font-size: 18px;
}

import styles from './sample.less';

...

return <Tag className={styles.customTag}>定制标签</Tag>;

我们不推荐进行样式覆盖，一是默认主题和组件是经过了设计师精心调节，强行覆盖可能会影响整体效果；二是覆盖代码可能因为组件库版本升级而失效。

三、 官方主题

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

四、主题开发配置

  themeConfig: {
    defaultTheme: 'themeDark',
    mainTheme: 'themeDark',
    themes: [
      {
        name: '深色',
        id: 'themeDark',
      },
      {
        name: '浅色',
        id: 'themeWhite',
      },
    ],
  },
   pluginConfig: [ // 插件配置
    [
      'theme-dark', // 主题插件
      {
        enable: true,
        package: '@gza/quantex-plugin-theme-dark',
      },
    ],
    [
      'theme-white', // 主题插件
      {
        enable: true,
        package: '@gza/quantex-plugin-theme-white',
      },
    ]
  ],