diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 99710408d..f06b44334 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -81,8 +81,9 @@ onMounted(() => {
 });
 
 async function search() {
-    const staticParams = Object.entries(store.userParams)
-        .filter(([key, value]) => value && (props.staticParams || []).includes(key));
+    const staticParams = Object.entries(store.userParams).filter(
+        ([key, value]) => value && (props.staticParams || []).includes(key)
+    );
     await arrayData.applyFilter({
         params: {
             ...Object.fromEntries(staticParams),
@@ -155,11 +156,9 @@ async function search() {
 .cursor-info {
     cursor: help;
 }
-
-.body--light #searchbar {
+#searchbar {
     .q-field--standout.q-field--highlighted .q-field__control {
-        background-color: $grey-7;
-        color: #333;
+        background-color: var(--vn-text);
     }
 }
 </style>
diff --git a/src/css/app.scss b/src/css/app.scss
index db4464bfc..c0c523a9f 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -4,7 +4,8 @@
 body.body--light {
     --fount-color: black;
     --vn-sectionColor: #ffffff;
-    background-color: #e0e0e0;
+    --vn-pageColor: #e0e0e0;
+    background-color: var(--vn-pageColor);
     .q-header .q-toolbar {
         color: var(--fount-color);
     }