feat: implement persistent theme switching and scroll progress indicator

index.html

@@ -17,6 +17,19 @@
     <main class="container-fluid p-0">
         <nav class="container-fluid">
             <div class="container-xl">
+            <!-- Contribution -->
+            <div class="theme-switch-wrapper">
+                <label class="theme-switch" for="checkbox">
+                    <input type="checkbox" id="checkbox" />
+                    <div class="slider round">
+                        <img src="images/star.png" class="icon-sun" alt="light">
+                    </div>
+                </label>
+            </div>
+            <div class="scroll-progress-container">
+                <div class="progress-bar" id="myBar"></div>
+            </div>
+            <!--  -->
                 <a href="index.html" class="logo">
                     <img src="images/logo.png" alt="">
                 </a>
@@ -400,6 +413,39 @@
 
             menuToggle = !menuToggle
         })
+
+        // Contribution
+        const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
+        const currentTheme = localStorage.getItem('theme');
+
+        if (currentTheme) {
+            document.documentElement.setAttribute('data-theme', currentTheme);
+            if (currentTheme === 'light') {
+                toggleSwitch.checked = true;
+            }
+        }
+
+        function switchTheme(e) {
+            if (e.target.checked) {
+                document.documentElement.setAttribute('data-theme', 'light');
+                localStorage.setItem('theme', 'light');
+            } else {
+                document.documentElement.setAttribute('data-theme', 'dark');
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+
+        toggleSwitch.addEventListener('change', switchTheme, false);
+
+        // Scroll Progress Indicator Logic
+        window.onscroll = function() { updateScrollProgress() };
+
+        function updateScrollProgress() {
+        var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+        var scrolled = (winScroll / height) * 100;
+        document.getElementById("myBar").style.width = scrolled + "%";
+    }
     </script>
 </body>
 <!-- ===( Build By : CODE AASHU )=== -->

style.css

@@ -1,4 +1,43 @@
 /* ===( Build By : CODE AASHU )=== */
+
+/* Contribution - Improve Css */
+:root {
+  --bg-color: #15181a;
+  --section-bg: linear-gradient(to right, #1f2327, #35383a);
+  --text-main: #ffffff;
+  --text-secondary: #bfbfbf;
+  --card-bg: linear-gradient(45deg, #34373b, #5a5d60);
+  --accent-color: #ffffff;
+}
+
+/* Light Theme overrides */
+[data-theme="light"] {
+  --bg-color: #f4f4f4;
+  --section-bg: linear-gradient(to right, #e0e0e0, #ffffff);
+  --text-main: #15181a;
+  --text-secondary: #494b4c;
+  --card-bg: linear-gradient(45deg, #ffffff, #dcdcdc);
+  --accent-color: #15181a;
+}
+
+/* Apply variables to existing styles */
+body {
+  background-color: var(--bg-color);
+  color: var(--text-secondary);
+}
+
+.heading_1, .heading_2, .heading_3 {
+  color: var(--text-main);
+}
+
+section {
+  background: var(--section-bg);
+}
+
+.about .card {
+  background: var(--card-bg);
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -553,6 +592,83 @@ footer small {
   opacity: 0.5;
 }
 
+/* Scroll Progress Bar --- Contribution*/
+.scroll-progress-container {
+  position: fixed;
+  top: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 4px;
+  background: transparent;
+}
+
+.progress-bar {
+  height: 4px;
+  background: #ffffff; /* Matches your accent color */
+  width: 0%;
+}
+
+/* Theme Toggle Styling */
+.theme-switch-wrapper {
+  display: flex;
+  align-items: center;
+  margin-left: 2rem;
+}
+
+.theme-switch {
+  display: inline-block;
+  height: 24px;
+  position: relative;
+  width: 50px;
+}
+
+.theme-switch input { display: none; }
+
+.slider {
+  background-color: #333638;
+  bottom: 0;
+  cursor: pointer;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: .4s;
+  border-radius: 34px;
+  border: 1px solid rgba(255,255,255,0.1);
+}
+
+.slider:before {
+  background-color: #fff;
+  bottom: 3px;
+  content: "";
+  height: 16px;
+  left: 4px;
+  position: absolute;
+  transition: .4s;
+  width: 16px;
+  border-radius: 50%;
+}
+
+input:checked + .slider { background-color: #9f9f9f; }
+input:checked + .slider:before { transform: translateX(26px); }
+
+/* Light Theme Variables */
+[data-theme="light"] body {
+  background: #f4f4f4;
+  color: #333;
+}
+
+[data-theme="light"] section {
+  background: linear-gradient(to right, #e0e0e0, #ffffff);
+}
+
+[data-theme="light"] .heading_1, 
+[data-theme="light"] .heading_2, 
+[data-theme="light"] .heading_3 {
+  color: #15181a;
+}
+
+
 /* Page */
 
 /* Media Queries */