Bootstrap Dark Mode Support

[dox]

Absolutely love this autocomplete - and use it in a couple of internal projects, but cannot seem to see how to dynamically modify the container that the results are parsed into, specifically to allow for Bootstrap dark mode. Currently, this is how the results look when Bootstap's dark mode are enabled:

Is there a way for the container of the autocomplete results to take note of the browser light/dark mode? Thanks either way...

[tomickigrzegorz]

Prepare an example on codepen.io of how you use my library with bootstrap drak mode. I'll take a look and see if I can introduce var to the css then it will be possible to manage colors in the library better.

PS. I'll also move this thread to the "discussion" tab because it's probably not a mistake :)

[dox]

Sorry - should have logged a discussion, not an issue! My bad.

Here's an example: https://codepen.io/dox-the-decoder/pen/mdgZxmB

[tomickigrzegorz]

You can easily create your own styles in the showActiveTheme function

const showActiveTheme = (theme, focus = false) => {
     const getTypeOfTheme = document.querySelector("#dark-theme");
     if (theme === "dark" && !getTypeOfTheme) {
       const createStyle = document.createElement("style");
       createStyle.id = "dark-theme";
       createStyle.innerHTML = `
         .auto-selected {
           background: #000;
         }
         .auto-results-wrapper {
           background: #2e2e2e;
         }
         .auto-clear:before {
           filter: invert(1);
         }
       `;
       document.head.appendChild(createStyle);
     } else {
       getTypeOfTheme?.remove();
     }

Of course, this is the simplest solution.

You can also use the data-bs-theme="dark" styles and, based on this data, add one of the changed styles. There are many solutions to this problem.

PS. I don't want to change the library for bootstrap. The library is supposed to be universal, and bootstrap is less and less used :)

[dox]

Much obliged- thank you