dark mode switch

Author: punitDT

src/App.js

@@ -2,11 +2,25 @@ import './App.css';
 import About from './components/About';
 import Navbar from './components/Navbar';
 import TextForm from './components/TextForm';
+import { useState } from "react"; //imrs
 
 function App() {
+
+  const [mode, setMode] = useState('dark');
+
+  const toggleMode = ()=>{
+    if(mode=='dark'){
+      setMode('light');
+      document.body.style.backgroundColor = 'white'
+    }else{
+      setMode('dark');
+      document.body.style.backgroundColor = '#19165a'
+    }
+  }
+
   return (
     <>
-      <Navbar title="TextUtils"></Navbar>
+      <Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} />
       {/* <div className="container my-3"><TextForm heading="Enter the text to analyze"/></div> */}
       <About></About>
     </>

src/components/About.js

@@ -4,22 +4,22 @@ export default function About() {
 
   const [myStyle, setMyStyle] = useState({
     color: 'white',
-    backgroundColor: 'black'
+    backgroundColor: '#19165a'
   })
 
   const [btnText, setbtnText] = useState("Enable dark mode")
 
   const toggleStyle = () => {
     if (myStyle.color === 'white') {
       setMyStyle({
-        color: 'black',
+        color: '#19165a',
         backgroundColor: 'white'
       })
       setbtnText("Enable dark mode")
     } else {
       setMyStyle({
         color: 'white',
-        backgroundColor: 'black',
+        backgroundColor: '#19165a',
         border: '1px solid white'
       })
       setbtnText("Enable light mode")

src/components/Navbar.js

@@ -3,32 +3,36 @@ import PropTypes from 'prop-types'
 
 function Navbar(props) {
   return (
-    <nav className="navbar navbar-expand-lg bg-light">
-  <div className="container-fluid">
-    <a className="navbar-brand" href="/">{props.title}</a>
-    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span className="navbar-toggler-icon"></span>
-    </button>
-    <div className="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul className="navbar-nav me-auto mb-2 mb-lg-0">
-        <li className="nav-item">
-          <a className="nav-link active" aria-current="page" href="/">Home</a>
-        </li>
-        <li className="nav-item">
-          <a className="nav-link" href="/">About</a>
-        </li> 
-      </ul>
-      <form className="d-flex" role="search">
+    <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
+      <div className="container-fluid">
+        <a className="navbar-brand" href="/">{props.title}</a>
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+            <li className="nav-item">
+              <a className="nav-link active" aria-current="page" href="/">Home</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="/">About</a>
+            </li>
+          </ul>
+          {/* <form className="d-flex" role="search">
         <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
         <button className="btn btn-outline-success" type="submit">Search</button>
-      </form>
-    </div>
-  </div>
-</nav>
+      </form> */}
+          <div class={`form-check form-switch text-${props.mode===`light`?`dark`:'light'}`}>
+            <input class="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
+            <label class="form-check-label" htmlFor="flexSwitchCheckDefault">Enable dark mode</label>
+          </div>
+        </div>
+      </div>
+    </nav>
   )
 }
 
-Navbar.propTypes = {title: PropTypes.string};
-Navbar.defaultProps = {title: "titileee"} ;
+Navbar.propTypes = { title: PropTypes.string };
+Navbar.defaultProps = { title: "titileee" };
 
 export default Navbar