@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 a Dark 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

• CodePen
• CodeSandbox

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 |