React Theme switch button

The Theme switch button component is highly configurable, allowing developers to customize its appearance, behavior, and animations. The component provides callbacks for handling theme changes, allowing developers to update their application's theme accordingly.

Demo

Installation

Install my-project with npm

  npm install react-themes-button-switch
 

Usage/Examples

import React from 'react';
import {ThemeSwitchButton} from 'react-themes-button-switch';

function App() {
  return <ThemeSwitchButton size="normal"   />
}

Features

• Light/dark mode toggle
• Live previews
• Fullscreen mode
• Cross platform

API Reference

Properties

These should be defined on the JSX node, many cannot be changed once they have been set without recreating the node.

| Name | Type | Default | values |Description | :-------- | :------- | :---|:--------- |:---------- | size | string | "small" | "small","normal","large"| Size of the switch | moonColor | string | "white" | "red","black","#77b5fe",etc..| Color of the moon in dark mode | sunColor | string | "yellow" | "red","black","#77b5fe",etc..| Color of the sun in light mode | onThemeChange | function | undefined |onThemeChange(mode)=>{..} | Get the values of which mode is selected.

Authors

• @surya

License

MIT