Fix back to top button issues on dark mode

See: https://stackoverflow.com/a/52937920/10029609

4 files changed, 39 insertions, 10 deletions

diff --git a/assets/css/dark.css b/assets/css/dark.css
index 627c5be..3cfa7c9 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -1,11 +1,28 @@
 html {
     background-color: #171717 !important;
 }
-body {
-    filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
-    -webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
+body[data-dark-theme="true"] .blog-tags a,
+body[data-dark-theme="true"] h1, 
+body[data-dark-theme="true"] h2, 
+body[data-dark-theme="true"] h3, 
+body[data-dark-theme="true"] h4, 
+body[data-dark-theme="true"] h5, 
+body[data-dark-theme="true"] h6,
+body[data-dark-theme="true"] .nav-links li a em,
+body[data-dark-theme="true"] footer * {
+ color: #e8e8e8 !important;
 }
-img, video, iframe, body * [style*="background-image"] {
-    filter: hue-rotate(180deg) contrast(100%) invert(100%);
-    -webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
+
+body[data-dark-theme="true"] .intro-header,
+body[data-dark-theme="true"] .intro-header a,
+body[data-dark-theme="true"] .container[role=main] {
+ color: #c9c9c9;
+}
+
+body[data-dark-theme="true"] a {
+ color: #809fff
+}
+
+body[data-dark-theme="true"] a:visited {
+ color: #ecbbec;
 }
\ No newline at end of file
diff --git a/assets/css/main.css b/assets/css/main.css
index db038c4..9cfc888 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -349,6 +349,9 @@ code {
   border-radius: 10px;
   font-size: 16px;
   text-align: center;
+  transition: 0.5s;
+  opacity: 0;
+  display: none;
 }
 
 #backtotopButton:hover {
diff --git a/assets/js/theme.js b/assets/js/theme.js
index 3bd7466..e66b826 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -1,4 +1,5 @@
 window.onload = function () {
+
   var toggle = document.getElementById('dark-mode-toggle')
   var darkTheme = document.getElementById('dark-mode-theme')
 
@@ -21,9 +22,12 @@ window.onload = function () {
     if (mode === 'dark') {
       darkTheme.disabled = false
       toggle.className = 'fas fa-sun'
+      document.querySelector('body').setAttribute('data-dark-theme', 'true')
     } else if (mode === 'light') {
       darkTheme.disabled = true
       toggle.className = 'fas fa-moon'
+      document.querySelector('body').setAttribute('data-dark-theme', 'false')
     }
   }
+  
 }
diff --git a/layouts/partials/backtotop.html b/layouts/partials/backtotop.html
index c674999..0bc054b 100644
--- a/layouts/partials/backtotop.html
+++ b/layouts/partials/backtotop.html
@@ -1,14 +1,15 @@
 <script>
+
+  var backtotopButton = document.getElementById('backtotopButton');
+
   document.addEventListener('scroll', function () {
     if (
       document.body.scrollTop > 50 ||
       document.documentElement.scrollTop > 50
     ) {
-      document.getElementById('backtotopButton').style.opacity = '1'
-      document.getElementById('backtotopButton').style.transition = '0.5s'
+      backtotopButton.style.opacity = '1'
     } else {
-      document.getElementById('backtotopButton').style.opacity = '0'
-      document.getElementById('backtotopButton').style.transition = '0.5s'
+      backtotopButton.style.opacity = '0'
     }
   })
 
@@ -16,4 +17,8 @@
     document.body.scrollTop = 0 // For Safari
     document.documentElement.scrollTop = 0 // For Chrome, Firefox, IE and Opera
   }
+
+  // Trigger scroll event on load
+  document.dispatchEvent(new CustomEvent('scroll'))
+  backtotopButton.style.display = 'block'
 </script>