As Dark Mode toggle Was not working Resolve the issue

CareerDevelopmentHub · Oct 27, 2023 · c35e8ec · c35e8ec
1 parent 2fe12e8
commit c35e8ec
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -16,12 +16,22 @@
 
     <!------------------------------- NAV BAR -------------------------------->
 
-    <nav class="navbar navbar-light " style="font-size: 25px; font-family: sans-serif; background-color: whitesmoke;">
+    <nav class="navbar navbar-light " style="font-size: 25px; font-family: sans-serif; background-color: rgb(28, 30, 56);">
 
         <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>
+     <h1 style="color: aliceblue;">   Sudoku Solver Project</h1>
+        <label for="switch">
+            <input type="checkbox" id="switch" class="switch">
+            <label for="switch"></label>
+      </label>
+      <script>
+        const $html = document.querySelector("html");
+        const $checkbox = document.querySelector("#switch");
+
+        $checkbox.addEventListener("change", function() {
+            $html.classList.toggle("light-mode");
+        });
+        </script>
         </div>
 
     </nav>

diff --git a/style.css b/style.css
@@ -118,7 +118,9 @@ body{
         color: red;
 
   }
-
+div{
+    color: whitesmoke;
+}
 
 .dark-mode #container div:hover{
     background-color: rgb(6, 39, 59);
@@ -217,3 +219,85 @@ body{
   .redo-button:hover {
     opacity: 0.8;
   }
+
+  :root {
+    --bg: rgb(137, 144, 158);
+    --bg-input: #141419;
+}
+
+
+:root{
+    --bg:linear-gradient(to top right, #363690 41%, #3ec7f5 100%);
+
+    --bg-input: #e1e1ed;
+}
+
+
+/* light mode edited */
+
+.light-mode {
+    --bg: linear-gradient(to left, #2a2d30, #080a0c);
+    --bg-input: #fcf9f9;
+}
+
+body {
+    background: var(--bg);
+    color: var(--color-text);
+    /*font-weight: 500;
+    display: flex;*/
+}
+
+.switch {
+    position: absolute;
+    margin-left: -9999px;
+    visibility: hidden;
+}
+
+.switch+label {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+}
+
+.switch+label {
+    padding: 2px;
+    width: 52px;
+    height: 27px;
+    background-color: var(--color-border), rgba(23, 21, 21, 0.3);
+    border-radius: 100px;
+}
+
+.switch+label:before,
+.switch+label:after {
+    display: block;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    bottom: 1px;
+    content: "";
+}
+
+.switch+label:before {
+    right: 1px;
+    background-color: var(--bg-input);
+    border-radius: 60px;
+    transition: all 0.4s;
+}
+
+.switch+label:after {
+    width: 30px;
+    background-color: #fff;
+    border-radius: 100%;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    transition: all 0.4s;
+}
+
+.switch:checked+label:before {
+    background-color: #f3eff5;
+}
+
+.switch:checked+label:after {
+    transform: translateX(30px);
+}