From c70f8aef352fad354a2d1b5a8822bafd8e544cda Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Wed, 1 Mar 2023 17:21:02 +0300
Subject: [PATCH] Add files via upload

---
 .../8-light-&-dark-theme-toggle/inedx.html    | 25 +++++++++
 .../8-light-&-dark-theme-toggle/main.js       |  5 ++
 .../8-light-&-dark-theme-toggle/style.css     | 56 +++++++++++++++++++
 3 files changed, 86 insertions(+)
 create mode 100644 100_projects/8-light-&-dark-theme-toggle/inedx.html
 create mode 100644 100_projects/8-light-&-dark-theme-toggle/main.js
 create mode 100644 100_projects/8-light-&-dark-theme-toggle/style.css
diff --git a/100_projects/8-light-&-dark-theme-toggle/inedx.html b/100_projects/8-light-&-dark-theme-toggle/inedx.html
new file mode 100644
index 0000000..6cf844d
--- /dev/null
+++ b/100_projects/8-light-&-dark-theme-toggle/inedx.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div>
+    <input type="checkbox" class="checkbox" id="checkbox">
+    <label for="checkbox" class="label">
+      <ion-icon class="moon" name="moon-outline"></ion-icon>
+      <ion-icon class="sun" name="sunny-outline"></ion-icon>
+      <div class="ball"></div>
+    </label>
+  </div>
+  <p>Light & Dark Theme Toggle with CSS and JavaScript By x39OME</p>
+  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/100_projects/8-light-&-dark-theme-toggle/main.js b/100_projects/8-light-&-dark-theme-toggle/main.js
new file mode 100644
index 0000000..08d4c32
--- /dev/null
+++ b/100_projects/8-light-&-dark-theme-toggle/main.js
@@ -0,0 +1,5 @@
+const checkbox = document.getElementById('checkbox');
+
+checkbox.addEventListener('change', () => {
+	document.body.classList.toggle('dark');
+});
diff --git a/100_projects/8-light-&-dark-theme-toggle/style.css b/100_projects/8-light-&-dark-theme-toggle/style.css
new file mode 100644
index 0000000..15738c8
--- /dev/null
+++ b/100_projects/8-light-&-dark-theme-toggle/style.css
@@ -0,0 +1,56 @@
+*{
+  margin: 0;
+  padding:0;
+  box-sizing: border-box;
+}
+body{
+  background: #fff;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  transition: background .3s linear;
+}
+body.dark{
+  background-color: #292c35;
+}
+body.dark p {
+  color: #fff;
+}
+.checkbox{
+  opacity: 0;
+  position: absolute;
+}
+.label{
+  background: #111;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 50px;
+  padding: 5px;
+  height: 26px;
+  width: 50px;
+  position: relative;
+  transform: scale(1.5);
+}
+.ball{
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  background: #fff;
+  border-radius: 50%;
+  width: 22px;
+  height: 22px;
+  transition: .3s linear;
+}
+.checkbox:checked + .label .ball{
+  transform: translateX(24px);
+}
+.moon{
+  color: #f1c40f;
+}
+.sun{
+  color: #f39c12;
+}
\ No newline at end of file
