---
name: 主题
route: /themes
menu: General
---
import ThemeCustomizer from './components/ThemeCustomizer';

# 主题

## 默认主题

默认使用的主题如下：
```css

// 黄色 辅助色
assist: "#ffab1a",
// 黄色 辅助色 button 点击状态
assistHover: "#ffbe4d",
// 黄色 辅助色 button Hover状态 （Active Hover命名规则以此类推）
assistActive: "#e69200",

// 红色 品牌色
brand: "#ff5a5e",
brandHover: "#ff8d90",
brandActive: "#ff272c",

// 明青色 -链接色/选中色
select: "#0098ac",
selectHover: "#00c5df",
selectActive: "#006b79",

// 红色 警示色
warning: "#ff4a4a",
warningHover: "#ff7d7d",
warningActive: "#ff1717",

// 绿色 鼓励色
encourage: "#3ccc3b",
encourageHover": "#64d763",
encourageActive: "#2da82c",

// 橙色 快币、钱数
money: "#ff8000",
moneyHover: "#ffb366",
moneyActive: "#c60",

// 禁用
disabled: "#CED1D7",
```

## 自定义主题

若业务代码中没有指定主题，则组件库默认会使用上述主题，你可以通过 styled-components 的 ThemeProvider 组件，进行主题的自定义，参考如下代码

```typescript jsx
import React from 'react';
import {ThemeProvider} from 'styled-components'
import {Button} from 'kwaiUI';

// state
state = {
    theme = {
        brand: "red",
        brandActive: "#ea8d90",
        brandHover: "#aac0c2",
    }
}


// 入口渲染函数
ReactDOM.render(
    <ThemeProvider theme={this.state.theme}>
        <App>
            <Button>Click me</Button>
        </App>
    </ThemeProvider>
    ,rootNode
);


```


## Interactive Customize

自定义当前主题，点击对应的Button，修改该主题色三种状态的颜色，主题会及时生效并且应用于所有页面

<ThemeCustomizer/>