Typography field issue

You could use some custom CSS to change the background color.

There is no way to change the css of the p.typography-preview when style is changed using plain css. I modified the redux-typography.js file by replacing this part of the code:

if ( color ) {
that.find( '.typography-previewf' ).css( 'color', color );
}

to :

function hexToInt(hexColor) {
    // Remove the '#' if present
    if (hexColor.indexOf('#') === 0) {
        hexColor = hexColor.slice(1);
    }
    // Convert hex to integer
    return parseInt(hexColor, 16);
}

if (color) {
    that.find('.typography-preview').css('color', color);
   
    // Convert the color and range values to integers
    let colorInt = hexToInt(color);
    let whiteInt = hexToInt('ffffff');
    let lightGreyInt = hexToInt('dddddd');

    // Check if the color is within the specified range
    if (colorInt >= lightGreyInt && colorInt <= whiteInt) {
        that.find('.typography-preview').css('background-color', 'black');
    } else {
        // Optionally reset the background color if the text color is not within the range
        that.find('.typography-preview').css('background-color', ''); // Or set to a default color
    }
}

What do you think about my solution?

That works out nice, actually. I added it to the latest beta in our GitHub repo and credited you for the snippet. Thanks for the contribution!

That’s great. Thank you ??