Made changes to index.html and App.js to change the text and color of…

… the darkmode toggle label
DSC-AIT-Pune · Oct 6, 2022 · 26897d6 · 26897d6
1 parent 0f429ab
commit 26897d6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/App.js b/src/App.js
@@ -27,14 +27,19 @@ function App() {
     if (Mode === 'light') {
       setMode('dark');
       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');
       document.body.style.backgroundColor = 'white';
-      showAlert(" Light mode has been enabled", "success");
+      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
@@ -19,7 +19,7 @@ export default function Navbar(props) {
           </ul>
           <div className={`form-check form-switch text-${props.Mode==='light'?'black':'white'}`}>
             <input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
-            <label className="form-check-label" htmlfor="flexSwitchCheckDefault">Enable LightMode</label>
+            <label className="form-check-label" htmlfor="flexSwitchCheckDefault" id='darkmode-id'>Enable LightMode</label>
           </div> 
         </div>
       </div>