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:

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:

  import { StyleProvider } from 'nuke-theme-provider';
  
  <StyleProvider androidConfigs={{materialDesign：true,rippleEnabled:true}}>
       <Button type="primary" style={styles.btn}>主操作</Button>
  </StyleProvider>

  Common base variables

'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 @翊晨[yichen] in Dingtalk desktop App Download
• DingTalk Group