diff --git a/config.json b/config.json index 7431208..f6df028 100644 --- a/config.json +++ b/config.json @@ -57,7 +57,8 @@ "searchColor": "#fff", "searchBackgroundColor": "#2e2e2e", "squareColor": "#9e9e9e", - "squareBackgroundColor": "#2e2e2e" + "squareBackgroundColor": "#2e2e2e", + "autocompleteHighlightBackgroundColor": "#3B3B3B" }, "backgroundColor": "#212121" } diff --git a/js/main.js b/js/main.js index ce8f291..504a16c 100644 --- a/js/main.js +++ b/js/main.js @@ -285,6 +285,9 @@ function parseAndCreate(jsonData) { if (styleData["searchPlaceholderColor"]) { document.getElementById(searchBarId).classList.add(createPlaceholderStyleClass(styleData["searchPlaceholderColor"])); } + if (styleData["autocompleteHighlightBackgroundColor"]) { + addAutocompleteStyleClass(styleData["autocompleteHighlightBackgroundColor"]); + } if (styleData["squareBackgroundColor"]) { elements = document.getElementsByClassName("sqr") var i; @@ -471,6 +474,26 @@ function createPlaceholderStyleClass(color) { return newClassName; } +function addAutocompleteStyleClass(color) { + /** + * Add some colors for the autocomplete classes in order to + * keep. We need to add styles for :hover property so it is + * easier to just inject some CSS. + */ + var style = document.createElement("style"); + style.type = "text/css"; + style.innerHTML = ` + .autocomplete-item:hover { + background: ${color} !important; + } + + .autocomplete-active { + background: ${color} !important; + } + `; + document.getElementsByTagName('head')[0].appendChild(style); +} + function extractQuickLinks(passedSqrs, style) { /**