README.zh-CN.md

@kwooshung/react-themes

超方便的主题管理组件，可自行设置主题颜色，可任意增加自定义主题，可自行设计模板，所有数据主题共享同一个状态，支持本地存储设置，可根据系统判断浅色调或暗色调。

English | 中文

为什么开发它？

• 现如今的网站，要是没有个 “更换主题” 的功能，能叫现代化网站？最次也得有个 “暗黑模式” 吧？

解决了什么痛点？

• 每次开发一个网站，都要自己写一套主题管理，都非常麻烦；
• 为什么不用其他第三方组件？
  • 与其自家的UI组件库高度耦合；
  • 功能太过于复杂，不够轻量；
  • 轻量的组件库，功能相对过于简单；

为什么使用它？

• 无头，没有样式，可自定义主题切换按钮或列表；
• 支持自定义主题颜色，默认支持 'light' 和 'dark' 两种主题；
• 使用方便，操作简单，学习成本低，灵活性高；
• 状态共享，所有数据主题共享同一个状态；
• ES6 的现代特性实现；
• TypeScript 编写，类型安全；
• 可按需引入，esm 模块化，天生支持 树摇（tree-shaking），不用担心打包后的体积；
• 当然本项目也提供了 commonjs 规范的 cjs 版本；
• 测试覆盖率 100%；

在线演示

• CodePen
• CodeSandbox

安装

npm

npm install @kwooshung/react-themes

yarn

yarn add @kwooshung/react-themes

pnpm

pnpm add @kwooshung/react-themes

使用方法

被 ThemesProvider 包裹的组件，都可以通过 Themes 获取到主题统一的状态。

ThemesProvider

import { ThemesProvider } from '@kwooshung/react-themes';
import Switch from './Switch';

/**
 * @zh 主题列表
 * @en Theme list
 */
const ThemeList = ['light', 'dark', 'blue', 'green'];

/**
 * @zh 全局布局
 * @en Global layout
 */
const Layout = () => {
  return (
    <ThemesProvider def='auto' list={ThemeList}>
      {/* <OtherComponents /> */}
      <Switch />
      {/* <OtherComponents /> */}
    </ThemesProvider>
  );
};

export default App;

Themes

import { IThemesContext, Themes } from '@kwooshung/react-themes';

const Demo = () => {
  const themes = (context: IThemesContext): ReactNode => {
    return (
      //在这里写你的主题切换按钮或列表，通过 `context` 可以获取到主题状态；
    );
  };

  return <Themes>{themes}</Themes>;
};

export default Switch;

API

接口类型定义，也可阅览 interfaces.d.ts 源文件；

IThemesProps

属性	类型	默认值	描述
children	(themeContext: IThemesContext) => ReactNode	-	子组件渲染函数

IThemesProviderProps

属性	类型	默认值	描述
def	string	auto	默认主题值，默认 auto
list	string[]	-	主题列表

IThemesContext

属性	类型	默认值	描述
value	string	auto	当前主题值，默认 auto
name	string	auto	当前主题名，除了 auto 以外，和 value 一样，如果 value = auto，若系统是暗色调，则 name=dark
setTheme	(theme: string) => void	-	主题列表
addThemes	(themes: string	string[]) => void	添加主题
getValueTheme	() => string	-	获取当前主题值
getNameTheme	() => string	-	获取当前主题名
getAvailableThemes	() => string[]	-	获取可用主题列表