How to override –wp–preset–color–black parameter in Gutenberg

In the Gutenberg block editor, you can override the --wp--preset--color--black parameter, which is responsible for the preset black color, using theme filtering or global styles.

Ways to modify

1. Through theme.json

If your theme supports theme.json, you can override the preset color in the settings.color.palette section. Example:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Black",
          "slug": "black",
          "color": "#333333" // New color for black
        }
      ]
    }
  }
}

This method automatically changes the value of the --wp--preset--color--black variable.

2. Using CSS

If you want to directly change the variable value via CSS, add the following code to the theme’s stylesheet or through functions.php:

:root {
  --wp--preset--color--black: #333333; /* New color */
}

This method applies globally but can be overridden by other styles.

3. Using WordPress hooks

You can use the block_editor_settings_all filter to dynamically modify the color palette in the editor:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    foreach (hljs css copy $editor_settings['colors'] as &$color ) {
        if ( $color['slug'] === 'black' ) {
            $color['color'] = '#333333'; // New color
        }
    }
    return $editor_settings;
});

This method is useful for specific changes without using theme.json.

Recommendation

Using theme.json is the most preferred method, as it is integrated into the core of Gutenberg and better supports theme customization.