React Theme Changer

Overview

Welcome to react-theme-changer. With this component, users can effortlessly customize the color scheme of your application's interface and toggle between light and dark modes for optimal viewing comfort. Whether you prefer predefined color palettes or want to unleash your creativity with custom colors, react-theme-changer offers flexibility and ease of use.

Note: This plugin should be used with bootstrap v5

Installation

You can install the component via npm:

npm install react-theme-changer

Usage

Importing the Component

import { ThemeChanger } from 'react-theme-changer'

Basic Usage

<ThemeChanger />

Props

The component supports the following props:

themes: An object containing user-defined colors for theme customization. enableColorMode: Boolean to toggle the visibility of the color mode changer switch. enableColorBlock: Boolean to toggle the visibility of the color block. | Prop Name | Type | Default Value | Optional | Description | |------------------|----------|---------------|----------|-------------------------------------------------------| | themes | string[] | ['#3c5eab', '#176707', '#d35f1f', '#ccab00', '#85310b', '#ac6c27', '#681eb0', '#5e9695', '#2b5069', '#895d8c'] | yes |An array of predefined theme colors. | | enableColorMode | boolean | true | yes |Boolean to display/hide the color mode changer switch. | | enableColorBlock | boolean | true | yes |Boolean to display/hide the color block. |

Example with Props

<ThemeChanger
  themes={['#FF5733', '#33FF57', '#5733FF']} //optional
  enableColorMode={false}   //optional
  enableColorBlock={true} //optional
/>

Features

• Switch between light and dark mode seamlessly.
• Use you own colors for theme.
• Automatically adjust theme colors for dark mode.
• Optional color mode changer switch.
• Optional color block

Contribution

Contributions are welcome! Feel free to fork the repository and submit pull requests for any improvements or new features.