---
order: 14
title: 更換主題
type: 進階
---
我們基于 Ant Design 視覺風格搭建了 Ant Design Pro，這套風格經過設計師的精心調配，適合大多數中后臺項目。如果對視覺風格有額外的要求，推薦使用以下的方式進行定制。
## 主題定制
我們基于 Ant Design React 進行開發，完全支持官方提供的 less 變量定制功能. 你可以在腳手架目錄中找到 `config/config.ts` 代碼類似這樣:
```js
...
theme: {
'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',
};
...
```
Find the variables that need to be modified in [All Variables Table](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less), and start `npm start` after modification. , you can see the effect in your app interface.
更多方式可以參考官方文檔：[定制主題](https://ant.design/docs/react/customize-theme-cn)。
## 樣式覆蓋
Ant Design 的通用樣式變量可能無法滿足所有定制需求，你需要全局覆蓋默認的組件樣式。我們可以參照 [樣式](/docs/style) 章節來覆蓋樣式。
### 全局覆蓋組件
比如在 `src/global.less` 里修改所有標簽的字體大小。
```less
// src/index.less
:global {
.ant-tag {
font-size: 12px;
}
}
```
### 單獨覆蓋指定組件
```less
// sample.less
.customTag {
font-size: 18px;
}
```
```jsx
import styles from './sample.less';
...
return <Tag className={styles.customTag}>定制標簽</Tag>;
```
> 我們不推薦進行樣式覆蓋，一是默認主題和組件是經過了設計師精心調節，強行覆蓋可能會影響整體效果；二是覆蓋代碼可能因為組件庫版本升級而失效。
## 在線切換主題
pro 中提供了一個可以在線切換主題和布局的 設置抽屜，使用這個抽屜可以很方便的查看更換主題的效果，無需重啟腳手架。
為了方便預覽，設置中的配置項會被保存在地址欄中，你可以將其拷貝給他人，分享效果。
> 由于 react-router 的特性，地址欄的參數可能被清空。
您一旦確定了這個配置，可以點擊 拷貝代碼 按鈕將其拷貝，并在 `src/defaultSetting.ts` 中覆蓋默認設置。這樣您可以將該主題發布和部署。
[`src/defaultSetting.ts`](https://github.com/ant-design/ant-design-pro/blob/master/src/defaultSettings.ts) 內容如下：
```js
module.exports = {
navTheme: 'dark', // 菜單的主題
primaryColor: '#1890FF', // Ant Design 的主色調
layout: 'sidemenu', // 菜單的布局，值為 sidemenu 菜單顯示在左側，值為 topmenu 菜單顯示在頂部
contentWidth: 'Fluid', // 內容的布局 Fixed 為定寬到1200px ，Fluid 為流式布局。
fixedHeader: false, // 固定頁頭
autoHideHeader: false, // 下滑時自動隱藏頁頭
fixSiderbar: false, // 固定菜單
};
```
> 在線修改顏色使用的是 less 在線編譯，建議在 [`config/config.ts`](https://github.com/ant-design/ant-design-pro/blob/master/config/config.ts) 中配置，提升用戶體驗。在線編譯 less 需要時間，并且會造成卡頓。
