0

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.

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

1
  • if you can override it in CSS there's a chance the colours you need are in CSS variables so you can make it dynamically grab the variants colours
    – Tom J Nowell
    Nov 11, 2022 at 14:36

1 Answer 1

0

Tom, thank you for the clue. Here's what I eventually got to work.

.select2-container {
    color: #000;
    --wp--preset--color--contrast: #000;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.