# nuke-theme-provider

> 主题换肤

Latest version **2.3.12** (published 2019-09-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install nuke-theme-provider
pnpm add nuke-theme-provider
yarn add nuke-theme-provider
bun add nuke-theme-provider
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.12 |
| Published | 2019-09-26 |
| First published | 2017-09-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 51.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | leanhunter |
| Maintainers | doub, leanhunter |
| Keywords | nuke, theme-provider |

## Links

- npm: https://www.npmjs.com/package/nuke-theme-provider
- Repository: git@gitlab.alibaba-inc.com:nuke/theme-provider
- npm.io page: https://npm.io/package/nuke-theme-provider

## Dependencies (2)

- [nuke-core](https://npm.io/package/nuke-core.md) ^2.3.12
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^2.3.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.3.12 (latest) — 2019-09-26
- 2.1.3 (beta) — 2018-08-15
- 2.3.11 — 2019-09-26
- 2.3.10 — 2019-09-26
- 2.3.9 — 2019-09-26
- 2.3.8 — 2019-09-25
- 2.3.7 — 2019-07-24
- 2.3.6 — 2019-07-19
- 2.3.5 — 2019-07-02
- 2.3.4 — 2019-05-10
- 2.3.3 — 2019-04-28
- 2.3.2 — 2019-01-15
- 2.3.1 — 2019-01-15
- 2.3.0 — 2018-11-14
- 2.2.29 — 2018-10-09
- … 41 more at https://npm.io/package/nuke-theme-provider/versions

## README

# ThemeProvider

- category: Util
- chinese: 主题注入
- type: 工具

---

## 何时使用

需要全局换肤的时候，可以通过简单修改主题变量，达到换肤的目的。


## API

### StyleProvider

属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
style | 需要替换的主题变量集合 | obj | 无
androidConfigs | 安卓 md 相关配置，如{materialDesign:false,rippleEnabled:false} | obj|无

- style

  style 注入提供了主题换肤能力，使用 style 注入变量后，可以直接替换全局的颜色、大小配置。

  使用 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 是为安卓定制，主要用于 MD 开关的开启、关闭。当前开放的 api 为：

  ```
  {
      materialDesign:true, // 是否启用 materialDesign 效果
      rippleEnabled:true // 是否开启水波纹特效
  }
  ```

  使用 demo:

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

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


  ## 附常用基础变量

```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', // [文字-常规]



```

## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

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

---
_Source: https://npm.io/package/nuke-theme-provider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._