代码拉取完成,页面将自动刷新
A super convenient theme management component, you can set the theme color by yourself, add custom themes at will, and design templates by yourself. All data themes share the same state, support local storage settings, and can determine light or dark colors according to the system.
Change Theme
feature? At the very least, it should have a Dark Mode
, right?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 (
// Write your theme switching button or list here, and you can get the theme status through `context`;
);
};
return <Themes>{themes}</Themes>;
};
export default Switch;
For interface type definition, you can also read the interfaces.d.ts source file;
Properties | Type | Default Value | Description |
---|---|---|---|
children | (themeContext: IThemesContext ) => ReactNode |
- | Subcomponent rendering function |
Properties | Type | Default Value | Description |
---|---|---|---|
def | string | auto |
Default theme value, default auto
|
list | string[] | - | Topic list |
Properties | Type | Default Value | Description |
---|---|---|---|
value | string | auto |
Current theme value, default auto
|
name | string | auto |
The current theme name, except auto , is the same as value . If value = auto , if the system is dark, then name=dark
|
setTheme | (theme: string) => void | - | Topic list |
addThemes | (themes: string | string[]) => void | Add topic |
getValueTheme | () => string | - | Get the current topic value |
getNameTheme | () => string | - | Get the current topic name |
getAvailableThemes | () => string[] | - | Get a list of available themes |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。