switch-mode

This is a custom react component that allows developers to add a toggle theme functionality in their projects seamlessly with its value persisted over the localStorage. Here, with the aid of react context API, values of props are able to be passed down to the specific components that need the required data.

How to Install:

Run npm install switch-mode

||

yarn add switch-mode

• import {ThemeProvider} from "switch-mode" and wrap your root component that will be rendered
• In the consuming component, import {useTheme, ToggleSwitch} from "switch-mode"
• Just before the return keyword of your consuming component, destructure `{theme}` from useTheme()
• And finally in your parent `div` tag, customize your backgroundColor and color
• Use the syntax: div style = {{backgroundColor: theme === "light" ? "black" : "white", color: theme === "light" ? "white" : "black"}}

See sample codes below:

App.js

import React from "react";
import { useTheme, ToggleSwitch } from "switch-mode";

function App() {
const { theme } = useTheme();
return (

 <ToggleSwitch />
 <h2> Some text here** </h2>
 <Main>
   `switch-mode` is a custom component used in react for enhancing user
   interfaces with dark/light themes
 </Main>
 <small>Created by Israel Abazie on February 22, 2023</small>

);
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {ThemeProvider} from "switch-mode";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>



</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

If you are encountering bugs, send your queries: https://github.com/vintage-creator/switch-mode/issues