Color customization is great but obviously not everyone is good at selecting colors. Picking one favorite color is easy; Picking combination of colors which will look good on a site is not that easy. Hence color customization on my themes ( Opus,Cinnamon, and Materialist ) works this way:

  1. Open customizer
  2. User pick his/her favorite color
  3. The theme generates the color scheme
  4. The site looks customized and great

However, my themes work differently in generating color scheme:

Opus

Opus uses two colors: main color and slightly darker color. User selects main color from customizer and the slightly darker color is generated on the fly.

Cinnamon

After Opus’ was published on theme repository, I realized that Sass has this amazing built-in feature for generating color: lighten() and darken(). I added SASS PHP library on Cinnamon but it triggers too much warning on theme check which wouldn’t be good for theme review process. So I removed the library and used Kovshenin’s path: make the custom color feature dependent to Jetpack which has SASS PHP included.

Materialist

After submitting Cinnamon to the theme repository, somehow debates about Jetpack arises here and there and I realize that some people are somehow unwilling to use Jetpack no matter what1. Hence I learned how lighten() and darken() work on SASS PHP and derived them into a simple class. Thus, Simple Color Adjuster is born.

***

Apparently, how darkening and lightening in Sass works is quite simple:

  1. Translates given hexacode into RGB (Red, Green, Blue) format.
  2. Translates RGB format into HSL (Hue, Saturation, Lightness) format.
  3. Darkening and lightening work by modifing the Lightens part on HSL format
  4. Translates HSL to RGB
  5. Translates RGB to hexacode

In practice, here’s how you lighten and darken a hexacode using Simple Color Adjuster:

require_once( 'simple-color-adjuster.php' );
$simple_color_adjuster = new Simple_Color_Adjuster;

$color      = '#F44336';
$percentage = 10;
$darken     = $simple_color_adjuster->darken( $color, $percentage );
$lighten    = $simple_color_adjuster->lighten( $color, $percentage );

More visual example can be found on its demo.php file on the Github repository. Please, download and make some good stuffs with it. It’d be my pleasure to see it is used. 😀

P.S.

  1. I think it’d be great if SASS PHP is included in core
  2. Slightly out of topic: Based on my recent experience with theme reviewing and this theme reviewer meeting summary, a way to escape inline css in core would be nice too. WordPress already has esc_js(). esc_css() would be useful.

  1. Haters gonna hate, hate, hate ~ I just watched TBBT S08E13, Sheldon is hilarious LOL 

Share Your Thought