Improving Dark Mode & Refactoring App Component

Author: vishwajitvm

src/App.js

@@ -1,18 +1,34 @@
+import { useState } from 'react';
 import './App.css';
 import About from './components/About';
 import Navbar from './components/Navbar';
 import Textform from './components/TextForm';
-import Textform2 from './components/Textform2' ;
+import React from 'react' ;
+
 
 let name = "vishwajit vm" ;
 function App() {
+  //dark mode functionality here
+  const [mode , setMode] = useState('light') ;
+
+  //toggleMode
+  const toggleMode = ()=>{
+    if(mode === 'light') {
+      setMode("dark")
+      document.body.style.background = '#042743'
+    }
+    else{
+      setMode( "light")
+      document.body.style.background = 'white'
+
+    }
+  }
   return (
     <>
-    <Navbar title="Bloging Page" aboutTitle="About Us"></Navbar>
+    <Navbar title="Bloging Page" aboutTitle="About Us" mode={mode} toggleMode={toggleMode}></Navbar>
     {/* <About /> */}
     <div className="container">
-      <Textform heading="Enter Text To View Transform"></Textform>
-      {/* <Textform2 Headings="EXPERIMENT ZONE"></Textform2> */}
+      <Textform heading="Enter Text To View Transform" mode={mode}></Textform>
     </div>
     </>
   );

src/components/Navbar.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 
 
 export default function Navbar(props) {
-  return (
-    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+    return (
+    <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">
@@ -20,10 +20,14 @@ export default function Navbar(props) {
         </li>
 
       </ul>
-      <form className="d-flex">
+      {/* <form className="d-flex">
         <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
         <button className="btn btn-outline-success" type="submit">Search</button>
-      </form>
+      </form> */}
+      <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
+        <input className="form-check-input " onClick={props.toggleMode} style={{ width: "45%" , padding: "12%"}} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
+        <label className="form-check-label " htmlFor="flexSwitchCheckDefault">Dark Mode</label>
+      </div>
     </div>
   </div>
 </nav>

src/components/TextForm.js

@@ -97,10 +97,10 @@ export default function Textform(props) {
     }
     return (
         <>
-            <div className='contaner'>
-                <div className="form-group text-dark">
+            <div className='contaner'  style={{color: props.mode==='dark'?'white':'#042743'}}>
+                <div className="form-group ">
                     <label htmlFor="exampleFormControlTextarea1" className='mt-5 mb-2'> <h2> {props.heading} </h2> </label>
-                    <textarea className="form-control" id="Messagearea" value={text} onChange={handleOnChangeData} rows="12"></textarea>
+                    <textarea className="form-control" id="Messagearea" value={text} onChange={handleOnChangeData} rows="12" style={{backgroundColor: props.mode==='dark'?'gray':'white' , color: props.mode==='dark'?'white':'#042743'}}></textarea>
                 </div>
 
                 <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleUpperCaseEvent}> uppercase </button>
@@ -119,16 +119,16 @@ export default function Textform(props) {
 
             </div>
 
-            <div className="container text-dark my-3">
+            <div className="container my-3" style={{color:props.mode==='dark'?'white':'#042743'}}>
                 <h1 className='text-danger'> Your Text Summery </h1>
-                <p>
-                    <span className='text-danger'> {text.split(" ").length} </span> Words and <span className='text-danger'> {text.length} </span> Characters <br />
+                <p style={{fontSize: "25px"}}>
+                    <span className='text-danger font-weight-bolder'> {text.split(" ").length} </span> Words and <span className='text-danger'> {text.length} </span> Characters <br />
                     <span className='text-danger'>{0.008* text.split(" ").length}</span> Minutes Time to Read this by Words <br />
                     <span className='text-danger'> {0.002* text.length} </span> Minutes time to read by characters. 
                 </p>
                 <h2>Preview</h2>
                 <p>
-                    {text}
+                    {text.length>0?text:"Enter somthing to preview it here"}
                 </p>
             </div>
         </>