fix(NavBar): Make the navbar follow the theme settings

ui/src/components/Header/index.scss

@@ -2,21 +2,21 @@
 @import 'bootstrap/scss/variables';
 #header {
   --bs-navbar-padding-y: 0.75rem;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
   .logo {
     max-height: 1.75rem;
   }
 
   .nav-link {
+    &.active {
+      font-weight: 700;
+    }
     &.icon-link {
       width: 36px;
       height: 36px;
     }
   }
 
-  .placeholder-search {
-    box-shadow: none;
-  }
-
   .answer-navBar {
     font-size: 1rem;
     padding: 0.25rem 0.5rem;
@@ -31,21 +31,13 @@
   }
 
   .hr {
-    color: #fff;
+    color: var(--bs-navbar-color);
   }
 
   // style for colored navbar
   &.theme-colored {
-    background: linear-gradient(180deg, #0033FF 0%, rgba(0, 51, 255, 0.95) 100%);
-    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15), $box-shadow-sm;
-    .nav-link {
-      color: rgba(255, 255, 255, 0.7);
-      &.active {
-        font-weight: bold;
-        color: #fff;
-      }
-    }
     .placeholder-search {
+      box-shadow: none;
       color: #fff;
       background-color: rgba(255, 255, 255, .2);
       border: $border-width $border-style rgba(255, 255, 255, .2);
@@ -57,29 +49,6 @@
       }
     }
   }
-  // style for light navbar
-  &.theme-light {
-    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 100%);
-    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
-    .nav-link {
-      color: rgba(0, 0, 0, 0.55);
-      &.active {
-        font-weight: bold;
-        color: rgba(0, 0, 0, 0.75)
-      }
-    }
-    .placeholder-search {
-      color: rgba(0, 0, 0, 0.75);
-      background-color: #fff;
-      border: 1px solid #CED4DA;
-      &:focus {
-        border: 1px solid rgba(0, 0, 0, 0.75);
-      }
-      &::placeholder {
-        color: #6C757D
-      }
-    }
-  }
 }
 
 

ui/src/components/Header/index.tsx

@@ -44,7 +44,6 @@ const Header: FC = () => {
   const siteInfo = siteInfoStore((state) => state.siteInfo);
   const brandingInfo = brandingStore((state) => state.branding);
   const loginSetting = loginSettingStore((state) => state.login);
-  const { theme, theme_config } = themeSettingStore((_) => _);
   const { data: redDot } = useQueryNotificationStatus();
   const location = useLocation();
   const handleInput = (val) => {
@@ -73,6 +72,7 @@ const Header: FC = () => {
     }
   }, [location.pathname]);
 
+  const { theme, theme_config } = themeSettingStore((_) => _);
   let themeType = 'theme-colored';
   if (theme && theme_config[theme]) {
     themeType = `theme-${theme_config[theme].navbar_style}`;
@@ -80,8 +80,12 @@ const Header: FC = () => {
 
   return (
     <Navbar
+      variant={themeType === 'theme-colored' ? 'dark' : ''}
       expand="lg"
-      className={classnames('sticky-top', themeType)}
+      className={classnames('sticky-top', themeType, {
+        'bg-light': themeType === 'theme-light',
+        'bg-primary': themeType !== 'theme-light',
+      })}
       id="header">
       <Container className="d-flex align-items-center">
         <Navbar.Toggle
@@ -114,7 +118,13 @@ const Header: FC = () => {
           {/* mobile nav */}
           <div className="d-flex lg-none align-items-center flex-lg-nowrap">
             {user?.username ? (
-              <NavItems redDot={redDot} userInfo={user} logOut={handleLogout} />
+              <Nav className="flex-row">
+                <NavItems
+                  redDot={redDot}
+                  userInfo={user}
+                  logOut={handleLogout}
+                />
+              </Nav>
             ) : (
               <>
                 <Button variant="link" className="me-2" href="/users/login">