Theme variation conflict with jquery select2 dropdown


I’m exploring the possibilities of theme variations as shown with the Twenty Twenty Three theme, but I’ve run into a problem with a conflict with the JQuery Select2 component used in an important form that I haven’t managed to figure out how to resolve. Select2 is used within a plugin of my own design, so I have the option of changing how it’s configured or the CSS associated with it if I can only figure out how.

The issue is that when switching to a “Dark theme” variation, as in dark background, white text, the text for options within the select dropdown become illegible. I do have CSS specifying that form areas should use a white background / dark text for better legibility of form options. But the problem is that the options within the dropdown are all displayed in a shade of white within a white background. Apparently, this is being determined by the “contrast” color specified in the json for the theme variation.

        "color": {
            "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.

David F. Carr 1 year 2022-11-11T09:17:28-05:00 0 Answers 0 views 0

Leave an answer