Simple-theme-changer NPM

Simple Theme Changer

A simple React component to toggle between light and dark themes.

Installation

To use this component in your React project, follow these steps:

Install the package via npm:

npm install simple-theme-changer

In your .jsx or .js file, import the ThemeChanger component: import ThemeChanger from 'simple-theme-changer'; //For component itself import 'simple-theme-changer/src/components/themeChangerStyles.css'; // For its styles

Usage

Once installed and imported, you can use the ThemeChanger component in your JSX like this:

<ThemeChanger />

By default, the theme is set to light. If you want to change the default theme to dark, you can pass the defaultTheme prop like this:

<ThemeChanger defaultTheme="dark" />

Theme Styling

To apply the styles based on the current theme, you can use the following class names:

.light for light theme styles.
.dark for dark theme styles.

For example, if you want to apply different styles to an element based on the theme, you can do something like this:

/* For light theme */
.light .my-element {
background-color: white;
color: black;
}

/* For dark theme */
.dark .my-element {
background-color: black;
color: white;
}

Example

Here is a simple example of how to use the ThemeChanger component:

import React from 'react';
import ThemeChanger from 'simple-theme-changer';
import 'simple-theme-changer/src/components/themeChangerStyles.css';

const App = () => {
return (
 <div>
   <h1>Welcome to My App</h1>
   <ThemeChanger />
 </div>
);
};

export default App;