Update style.css

style.css

@@ -3,20 +3,30 @@ body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
-  background: #f4f4f9;
-  color: #333;
+  background: #f4f4f9; /* Latar belakang terang */
+  color: #333; /* Teks terang */
   transition: all 0.3s ease; /* Haluskan transisi untuk perubahan */
 }
 
+/* Mode Gelap */
+body.dark-mode {
+  background-color: #333; /* Latar belakang gelap */
+  color: white; /* Teks putih untuk gelap */
+}
+
 /* Header */
 header {
-  background: #6200ea;
+  background: #6200ea; /* Warna header terang */
   padding: 15px;
   color: white;
   text-align: center;
   transition: background-color 0.3s ease; /* Haluskan perubahan warna latar */
 }
 
+header.dark-mode {
+  background-color: #444; /* Warna header saat mode gelap */
+}
+
 header nav ul {
   display: flex;
   justify-content: center;
@@ -118,7 +128,20 @@ button:hover, a:hover {
   color: white;
 }
 
-/* Transisi Warna pada Header saat di Hover */
-header:hover {
+/* Tombol Mode Gelap */
+#toggleDarkMode {
+  background-color: #6200ea;
+  color: white;
+  padding: 10px 15px;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  margin: 20px;
+  border-radius: 5px;
+}
+
+#toggleDarkMode:hover {
   background-color: #3700b3;
-}
+}
+
+/* Transisi Warna pada Header