Enhanced the scroll to top button for both the themes (#1949)

Rakesh9100 · Dec 28, 2024 · 29f8198 · 29f8198
1 parent 1e52018
commit 29f8198
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/assets/commonscript.js b/assets/commonscript.js
@@ -41,17 +41,31 @@ let calcScrollValue = () => {
     let pos = document.documentElement.scrollTop;
     let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
     let scrollValue = Math.round((pos * 100) / calcHeight);
+    let isDarkMode = document.body.classList.contains('dark-mode');
+
     if (pos > 100) {
         scrollProg.style.display = "grid";
     } else {
         scrollProg.style.display = "none";
     }
+
     scrollProg.addEventListener("click", () => {
         document.documentElement.scrollTop = 0;
     });
-    scrollProg.style.background = `conic-gradient(#0063ba ${scrollValue}%, #d499de ${scrollValue}%)`;
+
+    if (!isDarkMode) {
+        scrollProg.style.background = `conic-gradient( rgb(45, 4, 250) ${scrollValue}%,rgb(128, 128, 128) ${scrollValue}%)`;
+    } else {
+        scrollProg.style.background = `conic-gradient( rgb(212, 0, 74) ${scrollValue}%, rgb(128, 128, 128) ${scrollValue}%)`;
+    }
 };
 
+// Call the function on scroll
+window.addEventListener('scroll', calcScrollValue);
+
+// Call the function on page load
+document.addEventListener('DOMContentLoaded', calcScrollValue);
+
 window.addEventListener("scroll", function () {
     var scrollToTopButton = document.getElementById("progress");
     if (window.pageYOffset > 200) {
@@ -75,6 +89,7 @@ if (currentTheme) {
         toggleSwitch.checked = true;
         document.body.classList.add('dark-mode');
     }
+    calcScrollValue();
 }
 
 toggleSwitch.addEventListener('change', (e) => {
@@ -85,6 +100,7 @@ toggleSwitch.addEventListener('change', (e) => {
         document.body.classList.remove('dark-mode');
         localStorage.setItem('theme', 'light');
     }
+    calcScrollValue();
 });
 
 // Form input validation
@@ -111,7 +127,7 @@ function validateEmail(inputId) {
     }
 }
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     // Check if the current page is not contact.html
     if (!window.location.pathname.endsWith('/assets/contact/contact.html')) {
 
@@ -122,13 +138,13 @@ document.addEventListener('DOMContentLoaded', function() {
 
         if (contactForm && messageInput) {
             // Update text color based on input length
-            messageInput.addEventListener('input', function() {
+            messageInput.addEventListener('input', function () {
                 const currentLength = messageInput.value.length;
                 messageInput.style.color = currentLength < minLength ? 'red' : 'black';
             });
 
             // Validate form submission
-            contactForm.addEventListener('submit', function(event) {
+            contactForm.addEventListener('submit', function (event) {
                 if (messageInput.value.length < minLength) {
                     event.preventDefault();
                     alert('Your message must be at least 50 characters long.');

diff --git a/style.css b/style.css
@@ -464,9 +464,11 @@ nav ul {
     0% {
         background-position: 0% 50%;
     }
+
     50% {
         background-position: 100% 50%;
     }
+
     100% {
         background-position: 0% 50%;
     }
@@ -1637,13 +1639,18 @@ section {
     display: block;
     height: calc(100% - 15px);
     width: calc(100% - 15px);
-    background-color: rgb(104, 98, 232);
-    background: linear-gradient(90deg, rgb(159, 157, 235) 0%, rgb(212, 153, 222) 39%, rgb(253, 199, 134) 100%);
     border-radius: 50%;
     display: grid;
     place-items: center;
     font-size: 26px;
     color: black;
+    background-color: #FFDEE9;
+    background-image: linear-gradient(45deg, #FFDEE9 39%, #B5FFFC 100%);
+}
+
+.dark-mode #progress-value {
+    background-color: #FBDA61;
+    background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
 }
 
 /* Pagination Section Css */
@@ -1859,7 +1866,7 @@ footer {
     display: block;
     width: 0;
     height: 2px;
-    background: #ff1b82; /* Underline color */
+    background: #ff1b82;
     transition: width 0.3s ease-in-out;
     position: absolute;
     bottom: 0;
@@ -1868,11 +1875,11 @@ footer {
 }
 
 .footer-ul li a:hover {
-    color: #ff1b82; /* Text color on hover */
+    color: #ff1b82;
 }
 
 .footer-ul li a:hover::after {
-    width: 100%; /* Underline expands on hover */
+    width: 100%;
 }
 
 .social {