WordPress’s full site editing capabilities have revolutionized theme customization, allowing for an extensive range of configurations through the theme.json file. However, one limitation has been the inability to handle color transparency effectively with traditional hexadecimal color codes. To address this, we’ve crafted a solution to enhance your theme’s color system.
Find out how to do it with RGB here.
The Code
<?php
function add_HSL_values_to_CSS_variables($themeJSON) {
$data = $themeJSON->get_data();
if (!empty($data)) {
if (isset($data['settings']['color']['palette']['theme'])) {
$hslColorPalette = [];
$colorPalette = $data['settings']['color']['palette']['theme'];
if (!empty($colorPalette)) {
// Query the global styles to find custom color palettes
$customStyles = false;
$activeThemeSlug = get_stylesheet();
$dbCustomStyles = get_posts([
'name' => "wp-global-styles-{$activeThemeSlug}",
'post_type' => 'wp_global_styles',
'post_status' => 'publish'
]);
if (!empty($dbCustomStyles)) {
$customStyles = json_decode($dbCustomStyles[0]->post_content, true);
}
// find occurences in custom palette and replace them in the original one
if ($customStyles && isset($customStyles['settings']['color']['palette']['theme'])) {
$customPalette = $customStyles['settings']['color']['palette']['theme'];
$colorPalette = array_map(function ($value) use ($customPalette) {
$customValueKey = array_search($value['slug'], array_column($customPalette, 'slug'));
return $customValueKey ? $customPalette[$customValueKey] : $value;
}, $colorPalette);
}
// Loop through color palette
foreach ($colorPalette as $color) {
if (!str_contains($color['slug'], '-rgb') && !str_contains($color['slug'], '-hsl')) {
// Convert values in hsl
$hexColor = str_replace('#', '', $color['color']);
if (strlen($hexColor) > 3) {
$hexColor = str_split($hexColor, 2);
} else {
$hexColor = str_split($hexColor);
}
$R = hexdec($hexColor[0]);
$G = hexdec($hexColor[1]);
$B = hexdec($hexColor[2]);
$RGB = [$R, $G, $B];
// scale value 0 to 255 to floats from 0 to 1
$r = $RGB[0] / 255;
$g = $RGB[1] / 255;
$b = $RGB[2] / 255;
// using https://gist.github.com/brandonheyer/5254516
$max = max($r, $g, $b);
$min = min($r, $g, $b);
// lum
$l = ($max + $min) / 2;
// sat
$d = $max - $min;
if ($d == 0) {
$h = $s = 0; // achromatic
} else {
$s = $d / (1 - abs((2 * $l) - 1));
// hue
switch ($max) {
case $r:
$h = 60 * fmod((($g - $b) / $d), 6);
if ($b > $g) {
$h += 360;
}
break;
case $g:
$h = 60 * (($b - $r) / $d + 2);
break;
case $b:
$h = 60 * (($r - $g) / $d + 4);
break;
}
}
$hsl = [round($h), round($s * 100), round($l * 100)];
$hslColor = ($hsl[0]) . ',' . ($hsl[1]) . '%,' . ($hsl[2]) . '%';
$hslColorPalette["{$color['slug']}-hsl"] = $hslColor;
}
}
}
if (!empty($hslColorPalette)) {
// Sort array
ksort($hslColorPalette);
// Update interpreted theme.json values
return $themeJSON->update_with(
[
'version' => 2,
'settings' => [
'custom' => $hslColorPalette,
],
]
);
}
}
}
return $themeJSON;
}
add_filter('wp_theme_json_data_theme', 'add_HSL_values_to_CSS_variables');Our custom PHP function, add_HSL_values_to_CSS_variables, enriches your theme’s color palette by converting existing hexadecimal color values to their HSL (Hue, Saturation, Lightness) counterparts. This addition allows for greater control over color transparency and provides a more intuitive way to adjust colors within your design.
How It Works
The function operates by:
- Accessing the current color settings within the theme.json data.
- Searching for custom color palettes that may have been selected by the site administrator in the editor styles page.
- Integrating colors found with the default palette.
- Transforming each color to the HSL format, enabling transparency handling.
- Sorting the new HSL color values and incorporating them back into theme.json.
Advantages of HSL
HSL color values are a game-changer for designers and developers:
- Intuitive Adjustments: HSL makes it easier to fine-tune color properties.
- Transparency Control: Unlike hex codes, HSL supports transparency through the alpha channel (HSLA).
- Consistent Styling: Apply consistent color styling with greater ease across your website.
Implementation
The function is added to WordPress using the wp_theme_json_data_theme filter, ensuring that it integrates seamlessly with the existing full site editing framework. With this function, your theme.json will automatically include HSL values, ready to be used in your CSS.
When you add the snippets to your theme, you’ll find the new css variables attached to the body tag. It’ll be in the form of --wp--custom--color-name-hsl.
body {
--wp--preset--color--base: #f0f0f0;
--wp--preset--color--base-2: #cfd8dc;
--wp--preset--color--contrast: #37474f;
--wp--preset--color--contrast-2: #263238;
--wp--preset--color--contrast-3: #546e7a;
--wp--preset--color--accent: #29b6f6;
--wp--preset--color--accent-2: #38deef;
--wp--preset--color--black: #000;
--wp--preset--color--white: #fff;
--wp--preset--color--info: #17a2b8;
--wp--preset--color--success: #28a745;
--wp--preset--color--error: #dc3545;
--wp--preset--color--warning: #ffc107;
// HSL values added by the snippet
--wp--custom--accent-2-hsl: 186,85%,58%;
--wp--custom--accent-hsl: 199,92%,56%;
--wp--custom--base-2-hsl: 198,16%,84%;
--wp--custom--base-hsl: 0,0%,98%;
--wp--custom--black-hsl: 0,0%,0%;
--wp--custom--contrast-2-hsl: 200,19%,18%;
--wp--custom--contrast-3-hsl: 199,18%,40%;
--wp--custom--contrast-hsl: 200,18%,26%;
--wp--custom--error-hsl: 354,70%,54%;
--wp--custom--info-hsl: 188,78%,41%;
--wp--custom--success-hsl: 134,61%,41%;
--wp--custom--warning-hsl: 45,100%,51%;
--wp--custom--white-hsl: 0,0%,6%;
}Then you can use theses new variables like so:
body {
background-color: hsla(var(--wp--custom--accent-hsl), 0.2);
}Take Your Theme to the Next Level
Embrace the full potential of your theme’s color palette with HSL support. This enhancement simplifies color management and unlocks new possibilities for transparency and shading in your WordPress themes.
For further details on filtering theme.json with PHP, visit Full Site Editing.
Leave a Reply