react-dark-mode-lib v1.2.7

react-dark-mode-lib

基于react，能够快速和灵活的创建暗黑主题的库

为什么选择?

该类库能够让开发者优雅，快速，灵活的添加暗黑主题功能.同时在原有的基础上支持了组件自定义layer层

安装

Npm

npm install react-dark-mode-lib

Or Yarn

yarn add react-dark-mode-lib

使用方法

最简单的方法是直接导入类库调用. 举个例子:

import DarkMode from 'react-dark-mode-lib'
import { useState } from 'react'
  
const App = () => {
  const [visible, setVisible] = useState(false) 
  return (
    <DarkMode visible={visible} />
  )
}

参数visible是必传的. 其他参数的用法如下表所示

支持样式隔离

如果你需要对特定元素进行样式修改，可以直接对元素进行样式隔离，只需要对样式添加属性:

isolation: isolate

如果某些元素不需要设置为黑色的主题，而需要保持原有的CSS 样式，你只需要添加如下的样式

isolation: isolate;
mix-blend-mode: difference;

提示:

1. layerElements参数传入的JSX必须最外层为Fragment，因为传入的参数会被解析成为独立的元素直接插入，具体详见示例代码

如果你想了解更多的例子, 你可以从文件夹example中获取更多的代码