I was recently working on developing a WordPress theme, which uses the customizer to change colors throughout the theme. Adjusting styles is pretty straight forward with Javascript or jQuery. You can add a script to overwrite the CSS style.
Unfortunately in some cases, it is either not possible or practical to use JavaScript to change the style. In this instance, I wanted to add a hover or active state to an element and needed the color to change lighter or darker to show the state change.
I wanted to use the hex value set in the customizer to create a new adjusted hex value that could be used for lightening and darkening the color.
The solution was to use a PHP funtion to determine what the adjusted value would be.
This function takes two parameters, $hex and $adjustment.
$hex should be set to the hex value you want to change.
$adjustment should indicate how much you want to lighten or darken you hex value. This parameter takes a value between 255 and -255 to make the hex value adjustment. Positive numbers are lighter, negative numbers are darker.
Leave a Reply