added dark mode

vedansh-5 · vedansh-5 · commit 4c62b42a1b2d · 2025-05-26T12:07:06.000+05:30
Signed-off-by: Vedansh Saini &lt;77830698+vedansh-5@users.noreply.github.com&gt;
diff --git a/src/icons/light-mode.png b/src/icons/light-mode.png
diff --git a/src/index.css b/src/index.css
@@ -54,3 +54,30 @@ li {
 	list-style-type: disc !important;
 	margin-left: 1rem;
 }
+
+.dark-mode { 
+	background: #1a1a1a !important;
+	color: #ffffff !important;
+}
+.dark-mode .bg-white{
+	background-color: #2d2d2d !important;
+	border-color: #404040 !important;
+}
+
+.dark-mode input[type="text"],
+.dark-mode input[type="date"],
+.dark-mode #scrumReport {
+	background-color: #404040 !important;
+	border-color: #505050 !important;
+	color: #ffffff !important;
+}
+.dark-mode h3,
+.dark-mode h4,
+.dark-mode p,
+.dark-mode label {
+	color: #ffffff !important;
+}
+
+.dark-mode hr {
+	border-color: #505050 !important;
+}
diff --git a/src/popup.html b/src/popup.html
@@ -19,11 +19,11 @@
 </style>
 </head>
 <body>
-	<div class="pl-2 py-4 rounded-2xl">
-		<div class="bg-white pl-4 py-4 mx-2 mb-2 rounded-3xl">
+	<div class="pl-1 py-4 rounded-2xl">
+		<div class="bg-white px-4 py-4 mx-4 mb-2 rounded-3xl">
 				<div class="flex justify-between py-2">
 					<h3  class="text-3xl font-semibold ">Scrum Helper</h3>
-					<img src="icons/night-mode.png" alt="Night Mode" class="w-7 h-7 mx-3">
+					<img src="icons/night-mode.png" alt="Night Mode" class="w-7 h-7 mx-3 cursor-pointer">
 				</div>
 				<div>
 					<p class="font-semibold">SCRUM helper prefills the Scrums in google groups, with your FOSSASIA's contributions.</p>
@@ -41,7 +41,7 @@ <h3  class="text-3xl font-semibold ">Scrum Helper</h3>
 		</div>
 		
 		<div class="rounded-2xl">
-			<div class=" border-gray-100 border-2 bg-white rounded-3xl pl-4 py-2 mx-2 my-2">
+			<div class=" border-gray-100 border-2 bg-white rounded-3xl px-4 py-4 mx-4 my-2">
 				<div>
 					<h4>Your Project Name</h4>
 					<input id="projectName" type="text" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800  p-2 my-2" placeholder="Enter your project name">
diff --git a/src/scripts/popup.js b/src/scripts/popup.js
@@ -80,4 +80,27 @@ document.getElementById('customDateContainer').addEventListener('click', () => {
 //     document.querySelectorAll('input[name="timeframe"]').forEach(radio => radio.checked = false);
 //     document.getElementById('startingDate').disabled = false;
 //     document.getElementById('endingDate').disabled = false;
-// });
+// });
+
+document.addEventListener('DOMContentLoaded', function() {
+    const darkModeToggle = document.querySelector('img[alt="Night Mode"]');
+    const body = document.body;
+
+    chrome.storage.local.get(['darkMode'], function(result) {
+        if(result.darkMode) {
+            body.classList.add('dark-mode');
+            darkModeToggle.src = 'icons/light-mode.png';
+        }
+    });
+
+    darkModeToggle.addEventListener('click', function() {
+        body.classList.toggle('dark-mode');
+        const isDarkMode = body.classList.contains('dark-mode');
+        
+        // Save preference
+        chrome.storage.local.set({ darkMode: isDarkMode });
+        
+        // Toggle icon
+        this.src = isDarkMode ? 'icons/light-mode.png' : 'icons/night-mode.png';
+    });
+})
