Added Dark Mode and working on color scheme

assets/css/main.css

@@ -146,6 +146,31 @@ mark {
   color: inherit;
 }
 
+#theme-toggle {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.fa-sun {
+  color: #ffc107;
+}
+
+.fa-moon {
+  color: #6c757d;
+}
+
+.dark-mode {
+  background-color: #222;
+  color: #ddd;
+}
+
+.dark-mode a {
+  color: #49bf9d;
+}
+
 input::-moz-focus-inner {
   border: 0;
   padding: 0;
@@ -172,6 +197,10 @@ html {
   box-sizing: inherit;
 }
 
+.hidden {
+  display: none;
+}
+
 body {
   background: #fff;
 }

assets/js/darkmode.js

@@ -0,0 +1,19 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const body = document.body;
+  const themeToggle = document.getElementById("theme-toggle");
+
+  themeToggle.addEventListener("click", function () {
+    body.classList.toggle("dark-mode");
+    toggleThemeIcon();
+  });
+
+  function toggleThemeIcon() {
+    if (body.classList.contains("dark-mode")) {
+      themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+    } else {
+      themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+    }
+  }
+
+  toggleThemeIcon(); // Set initial icon based on the current theme
+});

assets/js/fullparagrph.js

@@ -0,0 +1,14 @@
+function toggleParagraph() {
+  var spans = document.querySelectorAll("#more");
+  var btnText = document.querySelector(".learn-more");
+
+  spans.forEach(function (span) {
+    span.classList.toggle("hidden");
+  });
+
+  if (spans[0].classList.contains("hidden")) {
+    btnText.textContent = "Learn More";
+  } else {
+    btnText.textContent = "Less";
+  }
+}