ibrahimmoalim
diff --git a/‎problemSolvingPractices/problems/p3-ConversionTool/icons/moon.png‎
12.4 KB b/‎problemSolvingPractices/problems/p3-ConversionTool/icons/moon.png‎
12.4 KB
diff --git a/‎problemSolvingPractices/problems/p3-ConversionTool/icons/sun.png‎
3.8 KB b/‎problemSolvingPractices/problems/p3-ConversionTool/icons/sun.png‎
3.8 KB
diff --git a/‎problemSolvingPractices/problems/p3-ConversionTool/index.html‎
Lines changed: 7 additions & 0 deletions b/‎problemSolvingPractices/problems/p3-ConversionTool/index.html‎
Lines changed: 7 additions & 0 deletions
diff --git a/‎problemSolvingPractices/problems/p3-ConversionTool/script.js‎
Lines changed: 34 additions & 0 deletions b/‎problemSolvingPractices/problems/p3-ConversionTool/script.js‎
Lines changed: 34 additions & 0 deletions
diff --git a/‎problemSolvingPractices/problems/p3-ConversionTool/style.css‎
Lines changed: 31 additions & 0 deletions b/‎problemSolvingPractices/problems/p3-ConversionTool/style.css‎
Lines changed: 31 additions & 0 deletions
@@ -9,6 +9,13 @@
   <script src='script.js' defer></script>
 </head>
 <body>
+
+  <div class='container'>
+
+    <img id='themeToggle' src='icons/moon.png' alt='Toggle Theme' title="Change Theme">
+    
+  </div>
+
   <h3> Convert an IPv4 address from Binary to Decimal </h3><br>
   <!-- <h3> Example: 10101100.00010000.00100010.00000011(Binary) to 172.16.34.3 </h3><br> -->
 
 
@@ -1,3 +1,37 @@
+const savedTheme = localStorage.getItem('theme')
+const html = document.documentElement
+const toggleBtn = document.getElementById('themeToggle')
+
+setTheme()
+
+if (savedTheme) {
+  html.setAttribute('data-theme', savedTheme)
+  toggleBtn.src = savedTheme == 'dark' ? 'icons/sun.png' : 'icons/moon.png'
+}
+
+if (!savedTheme) {
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  html.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
+  toggleBtn.src = prefersDark ? 'icons/sun.png' : 'icons/moon.png'
+}
+
+function setTheme() {
+
+  toggleBtn.addEventListener('click', () => {
+    const currentTheme = document.documentElement.getAttribute('data-theme')
+
+    if (currentTheme == 'dark') {
+      html.setAttribute('data-theme', 'light')
+      toggleBtn.src = 'icons/moon.png'
+      localStorage.setItem('theme', 'light')
+    } else {
+      html.setAttribute('data-theme', 'dark')
+      toggleBtn.src = 'icons/sun.png'
+      localStorage.setItem('theme', 'dark')
+    }
+  })
+}
+
 // IPv4 Binary to Decimal
 
 
 
@@ -1,3 +1,34 @@
+:root {
+  --bg: white;
+  --text: black;
+  --border: black;
+}
+
+[data-theme='dark'] {
+  --bg: rgb(26, 26, 26);
+  --text: white;
+}
+
+body {
+  margin: 0;
+  padding: 10px 10px;
+  font-family: sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  transition: background 0s, color 0s;
+}
+
+#themeToggle {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 30px;
+  height: 30px;
+}
+#themeToggle:hover {
+  cursor: pointer;
+}
+
 * {
   padding: 0;
   margin: 0;