Over the past few years, an interesting shift has been observed with the way WordPress themes have evolved to make sure your website stands out from the crowd. WordPress themes are getting quite sophisticated these days, providing a website that works well out-of-the-box. Quite recently, one feature that almost every WordPress user was excited about is the “accent colour” option that comes by default with Twenty Fourteen theme that was introduced in the WP version 3.8. The option allowed developers to replace the default green colour with whatever the shade you like. That is something which helped developers to make colour decisions personally.
However, the option is now no longer available on the theme. There are several reasons for the removal of the feature. First of all, it was possible to select any colour, which implies that the user could pick any of the low contrast colours, which might hamper the usability of their website. Further, the availability of two alternative colour shades picked up by the user were mainly generated behind the scene, thus making the feature code-heavy. The nature of default WordPress themes keep the code simple and lightweight, so that developers, especially who are new to this field can use the default theme as starter or parent theme.
Also, given to the short development cycle of the version 3.8, it became quite evident that WordPress developers did not get sufficient time ( as there was a less gap between the launch of 3.7 and 3.8) to improve the colour accent implementation within the theme, which ultimately resulted in the removal of the feature.
WordPress Theme and Colour Choices
The presence of the feature like “accent colour” persuaded theme designers to come up with poor colour choices. Also, it bought unnecessary inline CSS, which can be harmful to your theme.
Developing a WordPress theme that’s both attractive and functional requires you to make logical colour choices. Theme development is a complicated task and should be dealt with proper care. Planning colours for your theme is crucial to give your website the right tone and vibe. WordPress themes aren’t short of colour options, but the majority of them still suffer from the same problem bad colour choices.
When selecting a colour scheme or contrast for your theme, it is important to have full control over the colours you want to implement in your design. One must learn the basic colour theory and terminology so that you don’t ruin a design by picking a poor colour combination.
While playing around theme options, one must have a rational view of the website needs and goals. We can understand the concept better with the help of an example. Look at Weaver WordPress theme. It boasts an options panel that allows you adjust the colour for any element of your site.
Weaver is a nice theme, and developers praise its default look. Also, it’s a popular theme in the WordPress.org because it comes packed with options that offer more freedom and control to its users.
But, there is a flip side as well. The freedom for developers vouchers for comes with a price, in the form of Weaver’s pro version. Something which you can opt for blindly without analysing whether you actually need it or not.
So, what are the ways you can take to make sure you can protect yourself from making poor theme colour choices? Playing around prebuilt colour schemes is a standard way to perform the job, but there is another method we are going to talk about in this post.
Correcting the Contrast Using Sass or LESS
Planning a striking contrast is essential to make your site engaging and Sass and LESS are just right to do the job. For those who are familiar with the virtues of CSS, must be knowing about SASS and LESS to choose contrasting colours. You can either use ‘brightness ()’ or ‘lightness()’ to make a nice contrast between the background and the text. In addition, ‘darken()’ and ‘lighten()’ can be used to perform some modifications. There are more options to get the desired colour brightness and the amount of contrast.
However, when using SASS and LESS for WordPress theme development, you are indirectly altering the CSS in a new way. To combine SASS or LESS within your theme, you need to offload CSS into WordPress plugins called Jetpack.
Jetpack Custom CSS
One of the most underrated or we can say underutilized features of Jetpack is CSS Custom Module. The plugin comes packed with all the essential PHP libraries, and showcase them all with the help of functions such as jetpack_sass_css_preprocess ():
$accent_color = get_theme_mod( ‘accent_color’, ‘#00ff00’ );
$sass = sprintf( ‘$accent-color: %s;’, $accent_color );
$sass .= get_the_rest_of_the_sass_code();
$css = jetpack_sass_css_preprocess( $sass ); // boom!
Now, it’s up to you where you wish to implement the $accent-color variable.
.element {
background: $accent-color;
color: if( lightness( $accent-color ) > 50, ‘black’, ‘white’ );
&:hover {
background: darken( $accent-color, 5% );
}
}
Also, it’s entirely up to the user from where they would like to fetch the entire Sass code. One way of doing it, is simply store it in the form of string in your PHP file. Alternatively, you can choose to use functions such as wp_remote_get (), as a fallback.
Using Sass and LESS is a revolutionary idea, but defining them mathematically can be tricky and time-consuming. Functions such as pow () or throat () are used to measure brightness and contrast ratios. The process is a bit daunting, so perform it with precision.
Conclude,
Sass and Less are best solutions available to plan your colour implementation easily. They are great as they offer some dynamic options to modify the overall look and feel of our website.
Sajan Neupane 
