weex-nuke/docs/theme-provider/en.md

基于 Rax 、Weex 的高性能组件体系 ~~

# ThemeProvider

- category: Util
- chinese: 主题注入
- type: Tool

---

## Usage

When the global skin change is needed, the theme variable can be simply modified to achieve the purpose of skin change.


## API

### StyleProvider

| Attribute      | Description                                                                  | Type | Default |
| -------------- | ---------------------------------------------------------------------------- | ---- | ------- |
| style          | A collection of theme variables to be replaced                               | obj  | null    |
| androidConfigs | Android md configuration, such as {materialDesign:false,rippleEnabled:false} | obj  | null    |

- style

  Style injection provides the subject skin ability. With the style injection variable, the global color and size configuration can be replaced directly.

usage demo:

  ````js
  import { StyleProvider } from 'nuke-theme-provider';

  let orange = {
      Core:{
          [`color-brand1-1`]: '#FFF0E6', // [主品牌色-浅]
          [`color-brand1-6`]: '#FF6A00', // [主品牌色-常规]
          [`color-brand1-9`]: '#E35300'  // [主品牌色-深]
      },

  };
  <StyleProvider style={orange}>
       <Button type="primary" style={styles.btn}>主操作</Button>
  </StyleProvider>
  ````

- androidConfigs

  AndroidConfigs is customized for android, mainly used for opening and closing of MD switch. The API currently open is:

  ```
  {
      materialDesign:true, // whether the materialDesign effect is enabled
      rippleEnabled:true // Whether to open water ripple effect
  }
  ```

  usage demo:

  ````js
  import { StyleProvider } from 'nuke-theme-provider';

  <StyleProvider androidConfigs={{materialDesign：true,rippleEnabled:true}}>
       <Button type="primary" style={styles.btn}>主操作</Button>
  </StyleProvider>
  ````


  ## Common base variables

```js

'color-brand1-1' :'#E4F0FD', // [主品牌色-浅]

'color-brand1-6': '#3089DC', // [主品牌色-常规]

'color-Brand1-9' :'#1170BC', // [主品牌色-深]

'color-line1-2' :'#DCDEE3', // [线条-常规]

'color-line1-3' :'#C4C6CF', // [线条-深]

'color-text1-2' :'#999999', // [文字-浅]

'color-text1-3' :'#666666', // [文字-常规]



```

### The Other
- Chat with <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨[yichen]</a> in Dingtalk desktop App <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
- DingTalk Group

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />