[BUG] Dark Mode in Console hard to read

[seanneumann]

In 2.11 (early build) dark mode, go to Dev Tools > Console. Start typing and notice the autocomplete options are dark on dark. Very hard to read. See screen cap. e.g. type "GET _cat"

[ananzh]

@kgcreative pls help ~

[kgcreative]

@ananzh -- is there a console theme that we can pull that will do the right thing for colors?

[kgcreative]

cc: @joshuarrrr -- Josh, i think you've done a minor deep dive into this?

[joshuarrrr]

@kgcreative The way pretty much all text editor components work is that they're wrappers around the Ace editor. Within OpenSearch Dashboards, we have this _ace_overrides SCSS file that alters the textmate ace theme to use OUI themed vars: https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/core/public/styles/_ace_overrides.scss

It's just missing some additional style overrides for .ace_editor.ace_autocomplete .ace_completion-highlight, .ace_rightAlignedText, .ace_editor.ace_autocomplete .ace_line-hover.

[kgcreative]

Ok, for dark mode, let's start with:

.ace_editor.ace_autocomplete .ace_completion-highlight, let's use the same style as .ace_url
.ace_rightAlignedText, let's match the .ace_variable style
.ace_editor.ace_autocomplete .ace_line-hover, let's use the same color as .ace_active-line

Let's start with that and see how that feels?