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>
    </>
}

Contributing

We welcome contributions to improve Color Theme Manager! Please fork the repository and submit pull requests.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Create a new Pull Request

License

This project is licensed under the MIT License. See the LICENSE file for details.

Feedback

We'd love to hear your thoughts on Color Theme Manager! Please open an issue or contact us at [[email protected]].