Implement CSS variables for light and dark themes

Author: luisadha

assets/css/styles.css

@@ -1,10 +1,25 @@
 /* Global text styling */
+/* Tema Default (Light) */
+:root {
+  --bg-color: #fff8e1;
+  --text-color: #2c2c2c;
+}
+
+/* Tema Dark */
+[data-theme="dark"] {
+  --bg-color: #1a1a1a;
+  --text-color: #f0f0f0;
+}
+
 body {
-  background-color: #fff8e1; /* kuning krem lembut */
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: 0.3s; /* Agar transisi warna halus */
+  /*background-color: #fff8e1; /* kuning krem lembut */
   font-family: "JetBrains Mono", "Fira Code", monospace;
   font-size: 16px;
   line-height: 1.6;
-  color: #2c2c2c; /* teks abu tua agar mudah dibaca */
+  /*color: #2c2c2c; /* teks abu tua agar mudah dibaca */
   margin: 0;
   padding: 0 1.25rem;
 }