#563 - combined light and dark theme search.css

src/main/resources/static/css/colors.css

@@ -23,6 +23,7 @@
     --color-isPayment: var(--color-white);
 
     --color-background: var(--color-white);
+    --color-background-light: #FAFAFA;
 }
 
 [data-theme="dark"] {
@@ -35,6 +36,7 @@
     --color-isPayment: var(--color-black);
 
     --color-background: #444444;
+    --color-background-light: #666666;
 }
 
 /* background colors*/

src/main/resources/static/css/dark/search.css

-.search-result {
-    background-color: #666666;
-}
-
-.search-checkbox-container input[type="checkbox"] + span:not(.lever)::before,
-.search-checkbox-container input[type="checkbox"]:not(.filled-in) + span:not(.lever)::after {
-    border: 2px solid rgba(255, 255, 255, 0.7);
-}
-
-.search-checkbox-container input[type="checkbox"]:checked + span:not(.lever)::before {
-    border-top: 3px solid transparent;
-    border-left: 3px solid transparent;
-    border-right: 3px solid #45A0EF;
-    border-bottom: 3px solid #45A0EF;
-}
-
-.pagination li a {
-     color: #FFFFFF;
- }
-
-.pagination li.active {
-    background-color: #2E79B9;
-}
-
-.page-link:hover {
-    cursor: pointer;
-}
\ No newline at end of file

src/main/resources/static/css/search.css

 .search-result {
-    background-color: #fafafa;
+    background-color: var(--color-background-light);
 }
 
 .search-checkbox-container input[type="checkbox"]:checked + span:not(.lever)::before {
@@ -10,7 +10,7 @@
 }
 
 .pagination li a {
-    color: #212121;
+    color: var(--color-text);
 }
 
 .pagination li.active {
@@ -20,3 +20,8 @@
 .page-link:hover {
     cursor: pointer;
 }
+
+/* dark theme */
+[data-theme="dark"] .search-checkbox-container input[type="checkbox"]:not(.filled-in) + span:not(.lever)::after {
+    border: 2px solid rgba(255, 255, 255, 0.7);
+}
\ No newline at end of file

src/main/resources/templates/helpers/header.ftl

 <#macro style name>
     <#import "/spring.ftl" as s>
 
-    <#assign blacklist = ['categories', 'charts', 'collapsible', 'datepicker', 'globalDatepicker', 'hotkeys', 'login']>
+    <#assign blacklist = ['categories', 'charts', 'collapsible', 'datepicker', 'globalDatepicker', 'hotkeys', 'login', 'search']>
 
     <#if helpers.getSettings().isUseDarkTheme() && !blacklist?seq_contains(name)>
         <link type="text/css" rel="stylesheet" href="<@s.url '${"/css/dark/" + name + ".css"}'/>"/>