From c943f39617c1f2b90f160df07c60fa4ec9d0be7d Mon Sep 17 00:00:00 2001
From: Emruz Hossain <hossainemruz@gmail.com>
Date: Sat, 30 Sep 2023 05:17:47 +0600
Subject: [PATCH] Fix theme icon in transparent menu (#801)

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/scripts/sections/navbar.js    | 6 ++++++
 assets/styles/components/images.scss | 4 ++++
 assets/styles/navigators/navbar.scss | 2 +-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/assets/scripts/sections/navbar.js b/assets/scripts/sections/navbar.js
index 089ec5f..0a1b221 100644
--- a/assets/scripts/sections/navbar.js
+++ b/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) {
diff --git a/assets/styles/components/images.scss b/assets/styles/components/images.scss
index 4870e53..d546d7b 100644
--- a/assets/styles/components/images.scss
+++ b/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);
+}
diff --git a/assets/styles/navigators/navbar.scss b/assets/styles/navigators/navbar.scss
index 98dcf94..93e210f 100644
--- a/assets/styles/navigators/navbar.scss
+++ b/assets/styles/navigators/navbar.scss
@@ -184,7 +184,7 @@
       background-color: get-light-color('bg-primary');
       box-shadow: $box-shadow;
     }
-    #themeMenu{
+    #themeMenu {
       width: 100%;
     }
   }