App.js

import './App.css';
import Alert from './components/Alert';
import Navbar from './components/Navbar';
import TextForm from './components/TextForm';
import About from './components/About';
import React,{useState} from 'react';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function App() {
 const[mode,setMode]= useState('light'); //check whether dark mode is enabled
 const[alert,setAlert]= useState(null); 

 const showAlert=(message,type)=>{
  setAlert({
    msg:message,
    type:type
  });
  setTimeout(()=>{
    setAlert(null);
  },2000);
 };
  const toggleMode=()=>{
  if(mode==='dark'){
    setMode('light');
    document.body.style.backgroundColor = 'white';
    showAlert("Light mode is enabled","success");
    document.title="Textyy:Light mode";
    //setInterval(()=>{
      //document.title="install now"; for blinging title
      //},2000)
 // };
}
  else{
    setMode('dark');
    document.body.style.backgroundColor = '#191b24';
    showAlert("Dark mode is enabled","success");
    document.title="Textyy:Dark mode";
  }
 }
  return (
    <>
    <Router>
<Navbar title="Textyy" mode={mode} toggleMode={toggleMode}/>
<Alert alert={alert}></Alert>
<div className="container my-3">
<Switch>
          <Route exact path="/about">
            <About />
          </Route>
          <Route exact path="/">
          <TextForm heading="Text Analyze" mode={mode} showAlert={showAlert}/>
          </Route>
        </Switch>
</div>
</Router>
    </>
  );
}

export default App;