diff --git a/src/search.css b/src/search.css
index 7ac38e6b..dbff0d6b 100644
--- a/src/search.css
+++ b/src/search.css
@@ -30,7 +30,7 @@
   background: var(--readthedocs-search-footer-code-background-color, #fff);
   padding: 2px 5px;
   border: solid 1px var(--readthedocs-search-footer-code-border-color, #e1e4e5);
-  color: #333;
+  color: var(--readthedocs-search-color, #333);
   white-space: pre-wrap;
   word-wrap: break-word;
   font-size: 0.875em;
@@ -95,7 +95,7 @@
 :host > div form > label {
   font-size: 1.15em;
   padding-left: 5px;
-  color: #333;
+  color: var(--readthedocs-search-color, #333);
 }
 
 :host > div form label svg {
@@ -127,10 +127,11 @@
 
 div.hit-block {
   padding-top: 3px;
-  border-top: 1px solid rgb(224, 224, 224);
+  border-top: 1px solid var(--readthedocs-search-result-section-border-color, rgb(224, 224, 224));
   display: flex;
   flex-direction: column;
   margin-bottom: 10px;
+  background-color: var(--readthedocs-search-input-background-color);
 }
 
 div.hit-block a.hit-block-heading {
@@ -149,7 +150,7 @@ div.hit-block .hit-block-heading-container .close-icon {
   font-size: 1.15em;
   width: 1em;
   padding-right: 10px;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--readthedocs-search-color, rgba(0, 0, 0, 0.54));
   padding-top: 5px;
 }
 
@@ -188,7 +189,7 @@ div.hit-block .hit-block-heading-container svg {
 
 :host > div .results a.hit:hover,
 :host > div .results .hit .active {
-  background-color: rgb(245, 245, 245);
+  background-color: var(--readthedocs-search-result-section-highlight-color, rgb(245, 245, 245));
 }
 
 :host > div .results h2 {
@@ -197,12 +198,12 @@ div.hit-block .hit-block-heading-container svg {
   margin-top: 3px;
   margin-bottom: 5px;
   font-size: 1em;
-  color: black;
+  color: var(--readthedocs-search-color, black);
   line-height: inherit;
 }
 
 :host > div .results h2:hover {
-  border-bottom-color: black;
+  border-bottom-color: var(--readthedocs-search-result-section-highlight-color, black);
 }
 
 :host > div .results a.hit > div {
@@ -226,7 +227,7 @@ div.hit-block .hit-block-heading-container svg {
 :host > div .results .hit .content {
   margin: 0;
   text-decoration: none;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--readthedocs-search-color, rgba(0, 0, 0, 0.54));
   font-size: 15px;
   display: block;
   margin-bottom: 5px;
@@ -259,7 +260,7 @@ div.hit-block .hit-block-heading-container svg {
     --readthedocs-search-footer-background-color,
     rgb(234, 234, 234)
   );
-  color: #404040;
+  color: var(--readthedocs-search-color, #404040);
 }
 
 :host > div .credits {
@@ -359,6 +360,7 @@ div.hit-block .hit-block-heading-container svg {
   list-style-position: inside;
   list-style-type: "\BB  ";
   margin: 0;
+  color: var(--readthedocs-search-color);
 }
 
 :host > div .help {