adjust dark-theme

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -91,7 +91,7 @@ const SearchControl: FC <Props> = (props: Props) => {
 
   return (
     <div className="position-sticky fixed-top shadow-sm">
-      <div className="search-page-nav d-flex py-3 align-items-center">
+      <div className="grw-search-page-nav d-flex py-3 align-items-center">
         <div className="flex-grow-1 mx-4">
           <SearchPageFormTypeAny
             keyword={props.searchingKeyword}

packages/app/src/components/SearchPage/SearchPageLayout.tsx

@@ -47,7 +47,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
               </div>
               <div className="input-group search-result-select-group ml-4 d-lg-flex d-none">
                 <div className="input-group-prepend">
-                  <label className="input-group-text text-secondary" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
+                  <label className="input-group-text text-muted" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
                 </div>
                 <select
                   defaultValue={props.pagingLimit}

packages/app/src/components/SearchPage/SearchResultListItem.tsx

@@ -48,7 +48,7 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
     />
   );
 
-  const responsiveListStyleClass = `${isDeviceSmallerThanLg ? '' : `search-result-list-hover-style list-group-item-action ${isSelected ? 'active' : ''}`}`;
+  const responsiveListStyleClass = `${isDeviceSmallerThanLg ? '' : `grw-search-result-item-hover list-group-item-action ${isSelected ? 'active' : ''}`}`;
 
   return (
     <li
@@ -77,8 +77,10 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
           <div className="search-item-text p-md-3 pl-2 py-3 pr-3 flex-grow-1">
             {/* page path */}
             <h6 className="mb-1 py-1">
-              <i className="icon-fw icon-home"></i>
-              <a href={pagePath.isRoot ? pagePath.latter : pagePath.former}>{pagePathElem}</a>
+              <a href={pagePath.isRoot ? pagePath.latter : pagePath.former}>
+                <i className="icon-fw icon-home"></i>
+                {pagePathElem}
+              </a>
             </h6>
             <div className="d-flex align-items-center mb-2">
               {/* Picture */}
@@ -106,7 +108,7 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
                 />
               </div>
             </div>
-            <div className="search-result-list-snippet py-1">
+            <div className="grw-search-result-list-snippet py-1">
               <Clamp lines={2}>
                 {
                   pageMeta.elasticSearchResult != null && pageMeta.elasticSearchResult?.snippet.length !== 0 ? (

packages/app/src/components/SearchPage/SortControl.tsx

@@ -29,7 +29,7 @@ const SortControl: FC <Props> = (props: Props) => {
     <>
       <div className="input-group">
         <div className="input-group-prepend">
-          <div className="input-group-text border" id="btnGroupAddon">
+          <div className="input-group-text border text-muted" id="btnGroupAddon">
             {renderOrderIcon(props.order)}
           </div>
         </div>

packages/app/src/styles/_search.scss

@@ -1,7 +1,3 @@
-.search-page-nav {
-  background-color: #f7f7f7;
-}
-
 .search-group-submit-button {
   position: absolute;
   top: 0;

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -55,11 +55,16 @@ textarea.form-control {
   background-color: lighten($bgcolor-global, 5%);
 }
 
-.input-group > .input-group-prepend > .input-group-text {
-  color: theme-color('light');
-  background-color: theme-color('secondary');
-  border: 1px solid theme-color('secondary');
-  border-right: none;
+.input-group > .input-group-prepend {
+  > .input-group-text {
+    color: theme-color('light');
+    background-color: theme-color('secondary');
+    border: 1px solid theme-color('secondary');
+    border-right: none;
+  }
+  > .text-muted {
+    color: theme-color('light') !important;
+  }
 }
 
 .input-group input {
@@ -453,3 +458,22 @@ ul.pagination {
 .grw-modal-head {
   border-color: $border-color-global;
 }
+
+/*
+ * search page
+ */
+.on-search {
+  .grw-search-result-item {
+    &.active {
+      background-color: rgba($gray-700, 0.7) !important;
+      border-color: $bordercolor-search-item-left-active;
+    }
+  }
+  .grw-search-result-item-hover:hover {
+    background-color: $bgcolor-list-hover;
+  }
+
+  .grw-search-result-list-snippet {
+    color: theme-color('light');
+  }
+}

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -5,7 +5,6 @@ $color-list-hover: $color-global !default;
 $bgcolor-list-hover: lighten($primary, 72%) !default;
 $bgcolor-list-active: lighten($primary, 65%) !default;
 $color-list-active: color-yiq($bgcolor-list-active) !default;
-$bgcolor-subnav: darken($bgcolor-global, 3%) !default;
 $color-table: $color-global !default;
 $bgcolor-table: null !default;
 $border-color-table: $gray-200 !default;

packages/app/src/styles/theme/_apply-colors.scss

@@ -23,6 +23,7 @@ $color-search-item-pagelist-meta: $gray-500 !default;
 $color-search-page-list-title: $color-global !default;
 $color-search-page-list-snippet: $gray-600 !default;
 $bgcolor-search-page-list-hover: $gray-50 !default;
+$bgcolor-subnav: darken($bgcolor-global, 3%) !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -614,6 +615,12 @@ body.pathname-sidebar {
  * GROWI search result
  */
 .search-result {
+  .grw-search-result-item-hover:hover {
+    background-color: $bgcolor-search-page-list-hover;
+  }
+  .grw-search-page-nav {
+    background-color: $bgcolor-subnav;
+  }
   .search-result-list {
     .search-control {
       background-color: $bgcolor-global;
@@ -637,16 +644,9 @@ body.pathname-sidebar {
         }
       }
     }
-    .search-result-list-hover-style:hover {
-      background-color: $bgcolor-search-page-list-hover;
-    }
-  }
-
-  .search-result-page-title {
-    color: $color-search-page-list-title;
   }
 
-  .search-result-list-snippet {
+  .grw-search-result-list-snippet {
     color: $color-search-page-list-snippet;
   }
 }