light-mode-added

src/App.jsx

@@ -20,9 +20,11 @@ function App() {
 			askForArchivingConfirmation: true,
 			askForBulkUnarchivingConfirmation: true,
 			askForUnarchivingConfirmation: true,
-      askForEditingConfirmation: true
+      askForEditingConfirmation: true,
+      askForSwitchDarkMode: true,
 		}
   );
+document.body.style.background = settings.askForSwitchDarkMode ? '#f5f5f5' :'#212529';
 
   return (
     <Router>
@@ -33,7 +35,7 @@ function App() {
           <Route path="/" exact element={<Home settings={settings} setSettings={setSettings}/>} />
           <Route path="/archive" element={<Archive settings={settings} setSettings={setSettings}/>} />
         </Routes>
-        <Footer/>
+        <Footer settings={settings}/>
       </span>
     </Router>
   );

src/components/AddTask.jsx

@@ -4,7 +4,7 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { useState } from "react";
 import { Tooltip } from "react-tooltip";
 
-function AddTask({ onAdd }) {
+function AddTask({ onAdd, settings }) {
   const [name, setName] = useState("");
   const [hover, setHover] = useState(false);
   const toggleHover = () => setHover(!hover);
@@ -31,14 +31,15 @@ function AddTask({ onAdd }) {
         type="text"
         value={name}
         placeholder="Add a Task"
-        className="bg-dark text-light rounded p-1 me-3"
+        className={`rounded p-1 me-3 ${settings.askForSwitchDarkMode ? "bg-light text-dark" :"bg-dark text-light" }`}
+        style= {{border : settings.askForSwitchDarkMode ? "1px solid black" :"1px solid white" }}
         onChange={(e) => setName(e.target.value)}
       />
       <Button
         type="submit"
-        className={`border-light add-task ${
-          hover ? "bg-dark text-light" : "bg-light text-dark"
-        }`}
+      className={`add-task ${settings.askForSwitchDarkMode ? "border-dark": "border-light"} 
+      ${hover ? (settings.askForSwitchDarkMode ? "bg-white text-dark" : "bg-dark text-white") : 
+            (settings.askForSwitchDarkMode ? "bg-dark text-light" : "bg-light text-dark")}`}
         onMouseEnter={toggleHover}
         onMouseLeave={toggleHover}
       >
@@ -47,6 +48,8 @@ function AddTask({ onAdd }) {
       </Button>
       <Tooltip
         className="d-none d-lg-block"
+        style={{backgroundColor: settings.askForSwitchDarkMode ? "#f8f9fa" : "#212529",
+                color: settings.askForSwitchDarkMode ? "black" : "white" }}
         anchorSelect=".add-task"
         content="Add a Task"
         place="right"

src/components/CompleteTasks.jsx

@@ -17,7 +17,7 @@ function CompleteTasks({ onCompleteAll, settings, setSettings }) {
 			<>
 				<Button 
 					className={`mx-auto mt-3 border-success 
-					${hover ? "bg-dark text-success" : "bg-success text-light"}`}
+					${hover ? (settings.askForSwitchDarkMode ?  "bg-white text-success" : "bg-dark text-success") : "bg-success text-light"}`}
 					onMouseEnter={toggleHover}
 					onMouseLeave={toggleHover}
 					onClick={handleShow}

src/components/DeleteTasks.jsx

@@ -17,7 +17,7 @@ function DeleteTasks({ onDeleteAll, settings, setSettings }) {
 			<>
 				<Button 
 					className={`mx-auto mt-2 border-danger 
-					${hover ? "bg-dark text-danger" : "bg-danger text-white"}`}
+					${hover ? (settings.askForSwitchDarkMode ?  "bg-white text-danger" : "bg-dark text-danger") : "bg-danger text-white"}`}
 					onMouseEnter={toggleHover}
 					onMouseLeave={toggleHover}
 					onClick={handleShow}

src/components/FinishedTasks.jsx

@@ -123,7 +123,7 @@ function FinishedTasks(
 
   return (
     <>
-      <Stack className="text-center pt-4">
+      <Stack className={`text-center pt-4 ${settings.askForSwitchDarkMode ?  "text-dark" : "text-light"}`}>
         <hr className="mx-auto w-25"/>
         <h4 className="text-decoration-underline">Finished Tasks &#129321;</h4>
         <p className="text-secondary">
@@ -182,7 +182,7 @@ function FinishedTasks(
             type='submit'
             className={
               `border-success
-              ${hoverReactivate ? "bg-dark text-success" : "bg-success text-white"}`
+              ${hoverReactivate ? (settings.askForSwitchDarkMode ?  "bg-white text-success" : "bg-dark text-success") : "bg-success text-white"}`
             }
             onMouseEnter={toggleHoverReactivate}
             onMouseLeave={toggleHoverReactivate}
@@ -197,7 +197,7 @@ function FinishedTasks(
             type='submit'
             className={
               `border-primary
-              ${hoverArchive ? "bg-dark text-primary" : "bg-primary text-white"}`
+              ${hoverArchive ? (settings.askForSwitchDarkMode ?  "bg-white text-primary" : "bg-dark text-primary") : "bg-primary text-white"}`
             }
             onMouseEnter={toggleHoverArchive}
             onMouseLeave={toggleHoverArchive}
@@ -212,7 +212,7 @@ function FinishedTasks(
             type='submit'
             className={
               `border-danger
-              ${hover ? "bg-dark text-danger" : "bg-danger text-white"}`
+              ${hover ? (settings.askForSwitchDarkMode ?  "bg-white text-danger" : "bg-dark text-danger") : "bg-danger text-white"}`
             }
             onMouseEnter={toggleHover}
             onMouseLeave={toggleHover}

src/components/Footer.jsx

@@ -1,8 +1,8 @@
 import GitHubButton from 'react-github-btn';
 
-function Footer() {
+function Footer({settings}) {
   return (
-    <footer className="safari_only py-3 text-white text-center">
+    <footer className={`safari_only py-3 text-center ${settings.askForSwitchDarkMode ? "text-dark":"text-white"}`}>
       <p>
         Support us or Contribute on{" "}
         <a

src/components/SettingsModal.jsx

@@ -1,6 +1,8 @@
-import { Button, Modal, Form } from "react-bootstrap";
+import { Button, Modal, Form, CloseButton } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGear } from "@fortawesome/free-solid-svg-icons";
+import  moon  from "../assets/moon.png"
+import  sun  from "../assets/sun.png"
 import { useState, useEffect } from "react";
 
 function SettingsModal({ settings, setSettings }) {
@@ -42,7 +44,9 @@ function SettingsModal({ settings, setSettings }) {
 		setSettings({ ...settings, askForUnarchivingConfirmation: e.target.checked });
 	const handleSwitchEditingChange = (e) => 
 		setSettings({ ...settings, askForEditingConfirmation: e.target.checked });
-
+	const handleSwitchDarkMode = () => 
+		setSettings({ ...settings, askForSwitchDarkMode: !settings.askForSwitchDarkMode });
+
 	function isSwitched() {
 		if (settings.askForBulkReactivatingConfirmation &&
       settings.askForReactivatingConfirmation &&
@@ -65,19 +69,28 @@ function SettingsModal({ settings, setSettings }) {
   }, [settings]);
   return (
 		<>
-			<Button 
-				variant="dark"
-				className="rounded-circle position-fixed"
-				style={{top:"15px", right:"15px"}}
-				onClick={() => handleShow()}
-			>
-				<FontAwesomeIcon icon={faGear}/>
-			</Button>
-			<Modal fullscreen="sm-down" show={show} onHide={handleClose}>
-				<Modal.Header closeButton>
+			<div style={{paddingBottom:"26px"}}>
+				<img src={settings.askForSwitchDarkMode ? moon : sun} 
+					alt="switchModeImage"  
+					className="position-fixed "
+					style={{top:"20px", right:"65px", height:"25px" , width:"25px", borderRadius:"15px", cursor:"pointer"}}
+					onClick={() => handleSwitchDarkMode()}
+				/>
+				<Button 
+					variant={settings.askForSwitchDarkMode ? "white" : "dark"} 
+					className={`position-fixed rounded-circle ${settings.askForSwitchDarkMode ? "border-light" : "border-dark"} `}
+					style={{top:"15px", right:"15px"}}
+					onClick={() => handleShow()}
+				>
+					<FontAwesomeIcon icon={faGear}/>
+				</Button>
+			</div>	
+			<Modal fullscreen="sm-down" show={show} onHide={handleClose} >
+				<Modal.Header className={settings.askForSwitchDarkMode ? 'text-light bg-dark' : 'text-dark bg-light'}>
 						<Modal.Title>Settings</Modal.Title>
+						<CloseButton bordered={false} className="outline-none" onClick={handleClose} variant={settings.askForSwitchDarkMode ? "white" : "primary"} />
 				</Modal.Header>
-				<Modal.Body className="d-flex justify-content-center">
+				<Modal.Body className={settings.askForSwitchDarkMode ? "d-flex justify-content-center text-light bg-dark" : "d-flex justify-content-center text-dark bg-light"}>
 					<Form>
 						<span className="d-flex align-items-center gap-4">
 							<h5 className="m-0 pe-1">Show Confirmations When</h5>

src/components/Task.jsx

@@ -40,7 +40,7 @@ function Task({ id, index, name, onDelete, onEdit, onComplete, settings, setSett
     <>
       <Stack 
         direction="horizontal" 
-        className="task m-2 mx-auto border rounded d-flex justify-content-between"
+        className={`task m-2 mx-auto border rounded d-flex justify-content-between ${settings.askForSwitchDarkMode ? "border-dark text-dark":"border-light text-light"}`}
       >
         {!editMode ? <span className="p-2">#{index+1} {name}</span> :
         <span className="d-flex align-items-center">
@@ -53,7 +53,7 @@ function Task({ id, index, name, onDelete, onEdit, onComplete, settings, setSett
               type="text" 
               value={editedName}
               placeholder="Add a Task"
-              className="bg-dark text-light rounded p-1 border-0"
+              className={`rounded p-1 border-0 ${settings.askForSwitchDarkMode ? "bg-white text-dark":"bg-dark text-light"}`}
               onChange={(e) => setEditedName(e.target.value)}
             />
           </form>        

src/components/Tasks.jsx

@@ -5,7 +5,7 @@ import CompleteTasks from "./CompleteTasks";
 
 function Tasks({ tasks, onDelete, onEdit, onComplete, onDeleteAll, onCompleteAll, settings, setSettings }) {
 	return (
-		<Stack className="my-3 mx-5">
+		<Stack className={`my-3 mx-5 ${settings.askForSwitchDarkMode ? "text-black":"text-light"}`}>
 			{tasks.length ? 
 				<>
 					<hr className="mx-auto w-25"/>

src/index.js

@@ -4,7 +4,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.css';
 
-document.body.style = 'background: rgb(32, 32, 32);';
+// document.body.style = 'background: rgb(32, 32, 32);';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

src/pages/Archive.jsx

@@ -152,7 +152,7 @@ function Archive({ settings, setSettings }) {
 
   return (
     <>
-      <Stack className="text-white text-center pt-4 footer-push">
+      <Stack className={`text-center pt-4 footer-push ${settings.askForSwitchDarkMode ?  "text-dark" : " text-light"}`} >
         {finishedTasks.some(task => task.archived === true) ? (
           <>
             <hr className="mx-auto w-25"/>
@@ -213,7 +213,7 @@ function Archive({ settings, setSettings }) {
                 type='submit'
                 className={
                   `border-success
-                  ${hoverReactivate ? "bg-dark text-success" : "bg-success text-white"}`
+                  ${hoverReactivate ? (settings.askForSwitchDarkMode ?  "bg-white text-success" : "bg-dark text-success") : "bg-success text-white"}`
                 }
                 onMouseEnter={toggleHoverReactivate}
                 onMouseLeave={toggleHoverReactivate}
@@ -228,7 +228,7 @@ function Archive({ settings, setSettings }) {
                 type='submit'
                 className={
                   `border-primary
-                  ${hoverUnarchive ? "bg-dark text-primary" : "bg-primary text-white"}`
+                  ${hoverUnarchive ? (settings.askForSwitchDarkMode ?  "bg-white text-primary" : "bg-dark text-primary") : "bg-primary text-white"}`
                 }
                 onMouseEnter={toggleHoverUnarchive}
                 onMouseLeave={toggleHoverUnarchive}
@@ -243,7 +243,7 @@ function Archive({ settings, setSettings }) {
                 type='submit'
                 className={
                   `border-danger 
-                  ${hover ? "bg-dark text-danger" : "bg-danger text-white"}`
+                  ${hover ? (settings.askForSwitchDarkMode ?  "bg-white text-danger" : "bg-dark text-danger") : "bg-danger text-white"}`
                 }
                 onMouseEnter={toggleHover}
                 onMouseLeave={toggleHover}

src/pages/Home.jsx

@@ -83,7 +83,9 @@ function Home({ settings, setSettings }) {
 
   return (
     <div className="text-white text-center footer-push">
-      <AddTask onAdd={addTask} />
+      <AddTask onAdd={addTask} 
+              settings={settings}
+            />
       {tasks.length ? (
         <Tasks
           onComplete={completeTask}

src/styles.scss

@@ -1,5 +1,5 @@
 input {
-  border: 1px solid white;
+  // border: 1px solid white;
   outline: none;
 }
 
@@ -15,7 +15,9 @@ input {
 }
 
 @media screen and (max-width: 767px) {
-  _::-webkit-full-page-media, _:future, :root .footer-push {
+  _::-webkit-full-page-media,
+  _:future,
+  :root .footer-push {
     min-height: calc(100vh - 350px);
   }
 }