Color-theme-manager NPM

Color Theme Manager

Introduction

Color Theme Manager is a simple and flexible tool for managing color themes in your web applications. This package allows you to easily switch between different color themes, enhancing the visual experience of your users.

Note: This package is currently in beta. We welcome feedback and contributions to improve its functionality and stability.

Live demo

Code sand box - Demo

Installation

You can install Color Theme Manager via npm:

npm install color-theme-manager

Basic Usage

Here's a basic example of how to use Color Theme Manager in your project:

Add the theme provider in APP level;

import { ThemeProvider } from "color-theme-manager";

<ThemeProvider>
  <App />
</ThemeProvider>

You can change the color of the application in two ways.

Use the themeClass in application component

import { useTheme } from "color-theme-manager";

function Component(){
  const {theme, themeClass, toggleTheme} = useTheme()
 return (
    <>
      <div className={`${themeClass} title `}>
        <h1>Hello World</h1>
        <button onClick={toggleTheme}>Change theme</button>
      </div>
    </>
}

Use the ColorThemeWrapper in application component

import { useTheme,ColorThemeWrapper } from "color-theme-manager";

function Component(){
  const { toggleTheme} = useTheme()
 return (
    <>
      <ColorThemeWrapper>
        <h1>Hello World</h1>
        <button onClick={toggleTheme}>Change theme</button>
      </ColorThemeWrapper>
    </>
}

Add the custom theme only in your Application

import { useTheme } from "color-theme-manager";

function Component(){
  const {themeClass,setCustomThemeColor} = useTheme()

  useEffect(()=>{
    setCustomThemeColor({backgroundColor:"green",textColor:"red"})
  },[])

 return (
    <>
      <div className={`${themeClass} title `}>
        <h1>Hello World</h1>
      </div>
    </>
}