Merge pull request #9 from MiliMade/MiliMade

Made changes to the DarkMode toggle
DSC-AIT-Pune · Oct 8, 2022 · ff0d187 · ff0d187
2 parents 5539434 + 3b9d0c2
commit ff0d187
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/App.js b/src/App.js
@@ -27,19 +27,22 @@ function App() {
   const toggleMode = () => {
     if (Mode === 'light') {
       setMode('dark');
-      setbtntxt('Enable Light Mode');
-      document.body.style.backgroundColor = '#000066'
-      document.body.style.color = 'white'
-      showAlert(" Dark mode has been enabled", "success");
+      document.body.style.backgroundColor = '#042743';
+      document.getElementById('darkmode-id').style.color='white'
+      document.getElementById('darkmode-id').innerText = "Enable LightMode"
+      showAlert(" Dark mode has been enabled", "primary");
+
       document.title = 'TextEdit-Dark Mode';
 
     }
-    else {
+    else
+    {
       setMode('light');
-      setbtntxt('Enable Dark Mode');
-      document.body.style.backgroundColor = 'white'
-      document.body.style.color = 'black'
-      showAlert(" Light mode has been enabled", "success");
+      document.body.style.backgroundColor = 'white';
+      document.getElementById('darkmode-id').style.color='#042743'
+      document.getElementById('darkmode-id').innerText = "Enable DarkMode"
+      showAlert("Light mode has been enabled", "primary");
+
       document.title = 'TextEdit-Light Mode';
 
 

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -20,6 +20,7 @@ export default function Navbar(props) {
           <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
             <input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
 
+
             <label className="form-check-label" htmlFor="flexSwitchCheckDefault">{props.btntxt}</label>
           </div> 
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ export default function Navbar(props) { @@
               <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
                 <input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                 <label className="form-check-label" htmlFor="flexSwitchCheckDefault">{props.btntxt}</label>
               </div>
             </div>
@@ Expand Down @@