WordPress – How to remove default theme colors

Crafting a unique look and feel for your WordPress site often involves overriding the default color palettes, gradients, and typography sizes that come with the core or themes. The following PHP code snippet is designed to help you start with a clean slate by removing these defaults.

The Code

<?php

add_filter('wp_theme_json_data_default', 'removeDefaultValuesFromCSSVariables');

function removeDefaultValuesFromCSSVariables($themeJSON) {
    // Ensure we're on the front-end
    if (!is_admin()) {
        // Gather theme JSON data
        $data = $themeJSON->get_data();

        if (!empty($data)) {
            // Clear default WordPress color settings
            if (isset($data['settings']['color'])) {
                // ... Code to unset default color values
            }

            // Clear default WordPress shadow settings
            if (isset($data['settings']['shadow'])) {
                // ... Code to unset default shadow values
            }

            // Clear default WordPress typography sizes
            if (isset($data['settings']['typography'])) {
                // ... Code to unset default typography values
            }
        }
    }

    // Return the updated theme JSON
    return $themeJSON->update_with($data);
}

This snippet should be added to your theme’s functions.php file or a custom plugin.

How It Works

• Hook into wp_theme_json_data_default to filter the theme’s JSON configuration.
• Check if we are not in the admin area to apply changes only to the front-end.
• Access and modify the theme’s JSON data, specifically targeting settings for color, shadow, and typography.
• Unset the default WordPress color palettes, gradients, duotone colors, shadows, and font sizes.

Benefits

• Design Freedom: Start your theme customization without the constraints of WordPress’s default design decisions.
• Consistency: Ensure that only your chosen design elements are used throughout the site.
• Performance: Potentially improve site performance by not loading unused CSS for default styles.

Implementation

Deploy this modification to gain full control over the visual elements of your WordPress site. By removing WordPress’s default styles, your design choices can come to the forefront, providing a truly tailored experience for your visitors.