From 50f303f602835bf35dbe187ae7789108cf61c3f0 Mon Sep 17 00:00:00 2001
From: Kaustuv-8 <kaustuvabiswaprakashswain@gmail.com>
Date: Wed, 6 Aug 2025 20:39:11 +0530
Subject: [PATCH] Added dark mode toggle and removed emoji cursor and unused
 trail effect

---
 leaf.png  | Bin 0 -> 330 bytes
 main.css  |  57 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 main.html |  23 ++++++++++++++++++++++
 3 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 leaf.png

diff --git a/leaf.png b/leaf.png
new file mode 100644
index 0000000000000000000000000000000000000000..014f22ca50899883758d1873be4961a8288a471c
GIT binary patch
literal 330
zcmV-Q0k!^#P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80003INkl<Zc-rmK
zKTg9i6bA6`C2<oaAfyfqpfHq$iK9?4cjZXj0QCZltgIX$GabtYsRVK2KBrX`{+IzJ
zc7<#yik(FMetFLX$Ah+a)tNg3bl1)R))7AetRhSRYlyvS0l~px{2JsOU>&iS0ITEw
z0J1BgQ1c|@>nzwkFK^#}&FHlP=`>c9^C7wvKmr60AGj_EcTZ+SuYl|(R!9`oL_kV~
zsF08s5yW$CtVAz>Y$g<~IQTq7bsQpkX@FOLk@NN^+>>PkdaO|1SKspb0qFkg%}xo;
z0r&rn7h{4vq839%-F`P1;8P`1MvMrw;3^!Vt%MHNNGpK$Pv@H;Q|MrTzYGuX01xm0
c4{#1x1I<fRA(*Wa#{d8T07*qoM6N<$g8w6g@&Et;

literal 0
HcmV?d00001

diff --git a/main.css b/main.css
index ea5248d..e399e61 100644
--- a/main.css
+++ b/main.css
@@ -236,4 +236,59 @@ footer {
   background-color: #d1dd63;
   transform: translateY(-2px) scale(1.05);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-}
\ No newline at end of file
+}
+/* 🌙 Dark Mode Styles */
+body.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+header.dark-mode,
+nav.dark-mode,
+main.dark-mode,
+footer.dark-mode {
+  background-color: #1e1e1e;
+  color: #ffffff;
+}
+
+/* Smooth transition */
+body, header, nav, main, footer {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Hover styles for buttons/links */
+a:hover, button:hover {
+  cursor: pointer;
+}
+#dark-toggle {
+  position: fixed;
+  bottom: 20px;     /* changed from top to bottom */
+  left: 20px;       /* changed from right to left */
+  z-index: 9999;
+  background-color: #ffffff;
+  color: #000000;
+  border: none;
+  border-radius: 50%;
+  font-size: 20px;
+  width: 45px;
+  height: 45px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+
+#dark-toggle:hover {
+  background-color: #333333;
+  color: #ffffff;
+  transform: scale(1.1);
+}
+
+#dark-toggle:hover {
+  background-color: #333333;
+  color: #ffffff;
+  transform: scale(1.1);
+}
+
+body {
+  cursor: url("leaf.png") 16 16, auto;
+}
+
diff --git a/main.html b/main.html
index 7dd7dcb..18c907f 100644
--- a/main.html
+++ b/main.html
@@ -97,6 +97,29 @@ <h3>Labour Scheduling & Alerts</h3>
   <footer>
     <p>&copy; 2025 AgriTech. All rights reserved.</p>
   </footer>
+ <button id="dark-toggle" title="Toggle Dark Mode">🌙</button>
+
+<script>
+  const toggleButton = document.getElementById('dark-toggle');
+  const elementsToToggle = ['body', 'header', 'nav', 'main', 'footer'];
+
+  toggleButton.addEventListener('click', () => {
+    elementsToToggle.forEach(selector => {
+      document.querySelector(selector).classList.toggle('dark-mode');
+    });
+
+    // Toggle button style
+    if (document.body.classList.contains('dark-mode')) {
+      toggleButton.innerText = '🌞'; // Sun for light mode
+      toggleButton.style.backgroundColor = '#333333';
+      toggleButton.style.color = '#ffffff';
+    } else {
+      toggleButton.innerText = '🌙'; // Moon for dark mode
+      toggleButton.style.backgroundColor = '#ffffff';
+      toggleButton.style.color = '#000000';
+    }
+  });
+</script>
 </body>
 
 </html>
\ No newline at end of file