Fix theme icon in transparent menu (#801)

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

assets/scripts/sections/navbar.js

@@ -1,6 +1,7 @@
 const updateNavBar = () => {
   const topNavbar = document.getElementById('top-navbar')
   const navbarToggler = document.getElementById('navbar-toggler')
+  const themeIcon = document.getElementById('navbar-theme-icon-svg')
 
   if (window.scrollY > 40) {
     topNavbar?.classList.remove('transparent-navbar')
@@ -9,6 +10,8 @@ const updateNavBar = () => {
     navbarToggler?.classList.remove('navbar-dark')
     navbarToggler?.classList.add('navbar-light')
 
+    // color theme selector a.k.a. dark mode
+    themeIcon?.classList.remove('svg-inverted')
 
     // get the main logo from hidden img tag
     const mainLogo = document.getElementById('main-logo')
@@ -23,6 +26,9 @@ const updateNavBar = () => {
     navbarToggler?.classList.remove('navbar-light')
     navbarToggler?.classList.add('navbar-dark')
 
+    // color theme selector a.k.a. dark mode
+    themeIcon?.classList.add('svg-inverted')
+
     // get the inverted logo from hidden img tag
     const invertedLogo = document.getElementById('inverted-logo')
     if (invertedLogo) {

assets/styles/components/images.scss

@@ -42,3 +42,7 @@ html[data-theme='dark'] {
     color: get-dark-color('muted-text-color');
   }
 }
+
+.svg-inverted {
+  filter: invert(1);
+}

assets/styles/navigators/navbar.scss

@@ -184,7 +184,7 @@
       background-color: get-light-color('bg-primary');
       box-shadow: $box-shadow;
     }
-    #themeMenu{
+    #themeMenu {
       width: 100%;
     }
   }