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.
- In today's world, can a website be called modern without a
Change Theme
feature? At the very least, it should have aDark Mode
, right?
- Every time a website is developed, there's the hassle of writing a theme management system from scratch;
- Why not use other third-party components?
- They are often highly integrated with their own UI component libraries;
- The functionality is too complex and not lightweight enough;
- The lightweight component libraries, on the other hand, tend to be overly simplistic in features;
- Headless, no predefined styles, allows customizing the theme switch button or list;
- Supports custom theme colors, with default support for 'light' and 'dark' themes;
- Easy to use, simple operation, low learning curve, and high flexibility;
- Shared state, all data themes share the same status;
- Implemented with modern ES6 features;
- Written in TypeScript for type safety;
- Modular esm import on demand, naturally supports tree-shaking, no worries about the size after packaging;
- Of course, this project also offers a commonjs (cjs) version;
- 100% test coverage;
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 |