Merge pull request #105 from nadyakhrns/master

Menambahkan Scroll ke atas atau Scroll to top dan Dark Mode

Author: purwnt

belajarpython_theme/css/base.css

@@ -1373,4 +1373,20 @@ main kbd {
     font-size: 1.5rem;
     line-height: 2rem;
   }
-}
+
+  // style button scrollToTop
+  #scrollToTop {
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+
+#scrollToTop:hover {
+    background-color: #333;
+}
+}
+
+// dark mode
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}

belajarpython_theme/footer.html

@@ -6,4 +6,10 @@
       <a target="_blank" href="https://goo.gl/forms/ZPyZgIagXcanYwzH2">Contact</a>
     </div>
   </div>
-</footer>
+
+  // dark Mode
+  <button id="toggleDarkMode" style="position: fixed; bottom: 20px; right: 20px; z-index: 99;">
+    🌙 Dark Mode
+  </button>
+
+</footer>

belajarpython_theme/js/base.js

@@ -154,6 +154,47 @@ $(document).ready(function() {
     });
 });
 
+// Scroll to the top
+// Get the button
+    let scrollToTopButton = document.getElementById("scrollToTop");
+
+    // Show button when user scrolls down
+    window.onscroll = function () {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            scrollToTopButton.style.display = "block";
+        } else {
+            scrollToTopButton.style.display = "none";
+        }
+    };
+
+    // Scroll to top when button is clicked
+    scrollToTopButton.onclick = function () {
+        document.body.scrollTop = 0; // For Safari
+        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
+    };
+
+    // dark mode
+    const darkModeButton = document.getElementById('toggleDarkMode');
+
+    // Cek apakah user sudah pernah memilih mode sebelumnya
+    if (localStorage.getItem('darkMode') === 'enabled') {
+        document.body.classList.add('dark-mode');
+        darkModeButton.textContent = '☀️ Light Mode';
+    }
+
+    // Tambahkan event listener untuk tombol
+    darkModeButton.addEventListener('click', () => {
+        if (document.body.classList.contains('dark-mode')) {
+            document.body.classList.remove('dark-mode');
+            localStorage.setItem('darkMode', 'disabled'); // Simpan preferensi user
+            darkModeButton.textContent = '🌙 Dark Mode';
+        } else {
+            document.body.classList.add('dark-mode');
+            localStorage.setItem('darkMode', 'enabled'); // Simpan preferensi user
+            darkModeButton.textContent = '☀️ Light Mode';
+        }
+    });
+
 $(window).on('resize', applyTopPadding);
 
 $('body').scrollspy({

belajarpython_theme/scrollUp.html

@@ -0,0 +1,3 @@
+<button id="scrollToTop" style="display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; border: none; outline: none; background-color: #555; color: white; cursor: pointer; padding: 10px; border-radius: 5px;">
+    &#8679; Scroll Up
+</button>