@kwooshung/react-themes
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.
Why Develop It?
- 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?
What Pain Points Does It Solve?
- 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;
Why Use It?
- 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;
Demo
Installation
npm
npm install @kwooshung/react-themes
yarn
yarn add @kwooshung/react-themes
pnpm
pnpm add @kwooshung/react-themes
Usage
被 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 (
// Write your theme switching button or list here, and you can get the theme status through `context`;
);
};
return <Themes>{themes}</Themes>;
};
export default Switch;
API
For interface type definition, you can also read the interfaces.d.ts source file;
IThemesProps
Properties | Type | Default Value | Description |
---|---|---|---|
children | (themeContext: IThemesContext ) => ReactNode |
- | Subcomponent rendering function |
IThemesProviderProps
Properties | Type | Default Value | Description |
---|---|---|---|
def | string | auto |
Default theme value, default auto
|
list | string[] | - | Topic list |
IThemesContext
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 |