Light Dark button

FerreyraDamian · Apr 1, 2024 · bfc6ce0 · bfc6ce0
1 parent ed0c221
commit bfc6ce0
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -10,6 +10,9 @@
 </head>
 <body>
     <header class="header" id="myHeader">
+
+
+
         <div class="lang">
             <nav role="navigation" class="primary-navigation">
                 <ul>
@@ -22,6 +25,14 @@
                 </ul>
             </nav>
         </div>
+        <div class="ldbutton">
+            <input type="checkbox" class="checkbox" id="checkbox">
+            <label for="checkbox" class="checkbox-label">
+                <i class="fas fa-moon"></i>
+                <i class="fas fa-sun"></i>
+            <span class="ball"></span>
+            </label>
+        </div>
         <div class="container">
             <div class="header-row">
                 <div class="d-flex justify-content-center">

diff --git a/scripts.js b/scripts.js
@@ -32,4 +32,9 @@ function myFunction() {
     } else {
         header.classList.remove("sticky");
     }
-}
+}
+
+const checkbox = document.getElementById("checkbox")
+checkbox.addEventListener("change", () => {
+    document.body.classList.toggle("dark")
+})
diff --git a/styles.css b/styles.css
@@ -124,6 +124,7 @@ body {
     font-family: sans-serif;
     background-color: #090909;
     color: #bbb;
+    transition: background 0.2s linear;
 }
 
 body h6 {
@@ -318,4 +319,55 @@ footer {
 
 #mailTo {
     padding-top: 10px;
+}
+
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
+
+* {box-sizing: border-box;}
+
+body.dark {background-color: #292c35;} /* #9b59b6 */
+
+body.dark h1, body.dark .support a {color: #fff;}
+
+.checkbox {
+  opacity: 0;
+  position: absolute;
+}
+
+.checkbox-label {
+  background-color: #111;
+  width: 50px;
+  height: 26px;
+  border-radius: 50px;
+  position: relative;
+  padding: 5px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fa-moon {color: #f1c40f;}
+
+.fa-sun {color: #f39c12;}
+
+.checkbox-label .ball {
+  background-color: #fff;
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  border-radius: 50%;
+  transition: transform 0.2s linear;
+}
+
+.checkbox:checked + .checkbox-label .ball {
+  transform: translateX(24px);
+}
+
+.ldbutton {
+    margin-left: 90%;
+    position:absolute;
+    padding-top: 0px;
 }