diff --git a/index.html b/index.html index c9ef415..c11894b 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,9 @@
+ + +
+
+ + +
diff --git a/scripts.js b/scripts.js index 6966339..1e4f201 100644 --- a/scripts.js +++ b/scripts.js @@ -32,4 +32,9 @@ function myFunction() { } else { header.classList.remove("sticky"); } -} \ No newline at end of file +} + +const checkbox = document.getElementById("checkbox") +checkbox.addEventListener("change", () => { + document.body.classList.toggle("dark") +}) \ No newline at end of file diff --git a/styles.css b/styles.css index 4665ee1..97305c9 100644 --- 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; } \ No newline at end of file