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?