Fixed issue CareerDevelopmentHub#17 of dark mode

DevDK12 · Oct 18, 2022 · 138378a · 138378a
1 parent 75843a0
commit 138378a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -16,12 +16,12 @@
 
     <!------------------------------- NAV BAR -------------------------------->
 
-    <nav class="navbar navbar-light " style="font-size: 25px; font-family: sans-serif; background-color: whitesmoke;">
+    <nav class="navbar navbar-light" >
 
         <img src="puzzel.jpg" width="124" height="45" class="d-inline-block align-top" alt="">
         Sudoku Solver Project
 
-        <div class="logo"><button type="button" class="btn btn-dark" onclick="darkMode()">🌒</button>
+        <div class="logo"><button type="button" class="btn btn-dark">🌒</button>
         </div>
 
     </nav>

diff --git a/script.js b/script.js
@@ -260,28 +260,30 @@ solve.onclick = function () {
 
 }
 
-/* Focus Change */
+}
+
+// Dark Mode
+const btnDark = document.querySelector('.btn-dark');
+btnDark.addEventListener('click', (e)=>{
+
+    e.preventDefault();
+    document.body.classList.toggle("dark-mode");
+});
+
+// Focus Mode
 window.onload = function () {
     var preTitle = document.title;
     var postTitle = "Don't give up ! 🥺";
     document.addEventListener("visibilitychange", function () {
-      var page_Active = !document.hidden;
-
-      if (!page_Active) {
-        document.title = postTitle;
-      } else {
-        document.title = preTitle;
-      }
-    });
-  };
+        var page_Active = !document.hidden;
 
-  /*Dark-Mode*/
-  function darkMode() {
-    var element = document.body;
-    element.classList.toggle("dark-mode");
-  }
-
-}
+        if (!page_Active) {
+            document.title = postTitle;
+        } else {
+            document.title = preTitle;
+        }
+    });
+};
 
 
 function save ()

diff --git a/style.css b/style.css
@@ -2,6 +2,12 @@ body{
     background-image: linear-gradient( 135deg, #FFF6B7 10%, #F6416C 100%);
 }
 
+.navbar{
+    font-size: 25px;
+    font-family: sans-serif;
+    background-color: whitesmoke;
+}
+
 #content{
     display: flex;
     flex-direction: column;
@@ -113,13 +119,20 @@ body{
 
 /*dark-mode */
 .dark-mode {
-    /* background-color: black; */
     background-image: linear-gradient( 135deg, #F05F57 10%, #360940 100%);
-        color: red;
+        color: white;
 
-  }
+}
 
 
+.dark-mode .btn-dark{
+    background-color: white;
+}
+
+.dark-mode .navbar{
+    background-color: #212529;
+}
+
 .dark-mode #container div:hover{
     background-color: rgb(6, 39, 59);
 }