I'm submitting a
Description
Our application allows for the client to choose between light/dark mode. In dark mode, the autosuggest results shows up in the default colors. Trying to style the results with the desired colors, I am able to use the [styles] to provide a list and listItem to be injected into the markup. However, the li elements dynamically get a .focus class which statically forces the background color to #f1f1f1, which clashes with the dark mode. I have not found a way yet to dynamically react to this and override that styling.
Most of the native ionic components that I have seen used a part="value" as part of their component composition which allows us to target them in the CSS with ::part(value). I would like to request that the ul and li elements of the results be given a part each that can be targeted like this.
This would allow us to create CSS rules targeting the parts, instead of injecting the inline styling, and would allow us to react to the dynamic things, such as (for example) with ::part(item).focus {}
Version Information
ionic4-auto-complete: ^2.9.2
@angular/cli: ~9.1.0
I'm submitting a
Description
Our application allows for the client to choose between light/dark mode. In dark mode, the autosuggest results shows up in the default colors. Trying to style the results with the desired colors, I am able to use the
[styles]to provide alistandlistItemto be injected into the markup. However, thelielements dynamically get a.focusclass which statically forces the background color to#f1f1f1, which clashes with the dark mode. I have not found a way yet to dynamically react to this and override that styling.Most of the native ionic components that I have seen used a
part="value"as part of their component composition which allows us to target them in the CSS with::part(value). I would like to request that theulandlielements of the results be given a part each that can be targeted like this.This would allow us to create CSS rules targeting the parts, instead of injecting the inline styling, and would allow us to react to the dynamic things, such as (for example) with
::part(item).focus {}Version Information