diff --git a/modules/search/instant-search/components/overlay.scss b/modules/search/instant-search/components/overlay.scss index 5f3189843e166..3e50ade106506 100644 --- a/modules/search/instant-search/components/overlay.scss +++ b/modules/search/instant-search/components/overlay.scss @@ -6,7 +6,6 @@ opacity: 0.975; transition: opacity 0.5s linear, 0.25s transform ease-in-out; position: fixed; - background: white; padding: 3em 1em; overflow-y: auto; overflow-x: hidden; @@ -15,6 +14,14 @@ &.is-hidden { transform: translateX( 100vw ); } + + &.jetpack-instant-search__overlay--light { + background: #fff; + } + + &.jetpack-instant-search__overlay--dark { + background: #131313; + } } .jetpack-instant-search__overlay-close { diff --git a/modules/search/instant-search/components/search-results.scss b/modules/search/instant-search/components/search-results.scss index 6ac295fe4ef25..fb062fe411e7e 100644 --- a/modules/search/instant-search/components/search-results.scss +++ b/modules/search/instant-search/components/search-results.scss @@ -7,11 +7,26 @@ display: flex; mark { - background-color: #ffc; font-weight: bold; color: inherit; padding: 0; } + + .jetpack-instant-search__overlay--light & { + color: inherit; + + mark { + background-color: #ffc; + } + } + + .jetpack-instant-search__overlay--dark & { + color: #fff; + + mark { + background-color: #324E85; + } + } } .jetpack-instant-search__search-results-primary {