Fix search box styles (#727)

test_web/index.html

@@ -36,7 +36,7 @@
                 <option value="">Any</option>
             </select>
         </div>
-        <button class="btn btn-secondary" style="float:left;" onclick="toggleDarkMode(this)">Light mode</div>
+        <button class="btn btn-secondary" id="darkstyletoggle" style="float:left;" onclick="toggleDarkMode(this)">Light mode</div>
             <script>
                 const toggleDarkMode = (btn) => {
                     if (document.body.classList.contains("darkmode")) {

test_web/static/css/darkmode.less

@@ -6,12 +6,13 @@
     --light-text-color: rgb(232, 230, 227);
     --dark-border-color: rgb(60, 65, 68);
     --hr-color: rgb(50, 55, 57);
+    --dark-label-color: lightblue;
 }
 
 .darkmode {
     color-scheme: dark;
     background-color: var(--main-bg);
-    .headerinfo span[contenteditable="true"]{
+    .headerinfo span[contenteditable="true"] {
         border: 1px solid #fff2;
     }
     select,
@@ -41,8 +42,16 @@
         }
     }
     #search-results {
-        background-color: var(--main-bg);
         color: var(--text-color);
+        background-color: transparent;
+        button {
+            background-color: var(--hr-color);
+            color: var(--dark-label-color);
+            font-weight: bolder;
+        }
+    }
+    #darkstyletoggle {
+        color: var(--dark-label-color);
     }
     .chapter-item {
         .info-item,

test_web/static/css/index.less

@@ -29,8 +29,12 @@
     overflow-x: hidden;
     padding: 0.375rem 0;
     border-radius: 5px;
-    background-color: white;
+    background-color: transparent;
     z-index: 3;
+    button {
+        background-color: white;
+        text-transform: capitalize;
+    }
 }
 
 #turnoff-catch {