代码拉取完成，页面将自动刷新
超方便的主题管理组件，可自行设置主题颜色，可任意增加自定义主题，可自行设计模板，所有数据主题共享同一个状态，支持本地存储设置，可根据系统判断浅色调或暗色调。
npm install @kwooshung/react-themes
yarn add @kwooshung/react-themes
pnpm add @kwooshung/react-themes
被 ThemesProvider 包裹的组件，都可以通过 Themes 获取到主题统一的状态。
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;
import { IThemesContext, Themes } from '@kwooshung/react-themes';
const Demo = () => {
const themes = (context: IThemesContext): ReactNode => {
return (
//在这里写你的主题切换按钮或列表，通过 `context` 可以获取到主题状态；
);
};
return <Themes>{themes}</Themes>;
};
export default Switch;
接口类型定义，也可阅览 interfaces.d.ts 源文件；
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| children | (themeContext: IThemesContext) => ReactNode |
- | 子组件渲染函数 |
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| def | string | auto |
默认主题值，默认 auto
|
| list | string[] | - | 主题列表 |
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 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[] | - | 获取可用主题列表 |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
