I am exploring the chances of theme variations as proven with the Twenty Twenty Three theme, however I’ve run into an issue with a battle with the JQuery Select2 element utilized in an vital kind that I have never managed to determine the best way to resolve. Select2 is used inside a plugin of my very own design, so I’ve the choice of fixing the way it’s configured or the CSS related to it if I can solely determine how.
The problem is that when switching to a “Darkish theme” variation, as in darkish background, white textual content, the textual content for choices inside the choose dropdown turn out to be illegible. I do have CSS specifying that kind areas ought to use a white background / darkish textual content for higher legibility of kind choices. However the issue is that the choices inside the dropdown are all displayed in a shade of white inside a white background. Apparently, that is being decided by the “distinction” colour specified within the json for the theme variation.
"colour": {
"palette": [
{
"color": "#004165",
"name": "Base",
"slug": "base"
},
{
"color": "#e8eaed",
"name": "Contrast",
"slug": "contrast"
},
Digging into the Select2 documentation, I found a brief reference to setting a theme specifically for the dropdown display and tried this code, but it didn’t seem to help
$( '.editor_assign' ).select2({theme: 'classic'});
Setting CSS for the option tag doesn’t seem to work.
I’ve also tried spelunking through the CSS code distributed with select2 and using the Chrome inspector tool to try to identify the problem and figure out CSS code that would tell Select2 how to color the select options but no luck so far.
For example, I tried this
.editor_assign .select2-selection--single, .editor_assign .select2-container--classic.select2-container--open .select2-selection--single {
color: #111;
}
Any suggestions would be appreciated.