WordPress

Exporting to WordPress theme.json for Block Themes

WordPress block themes use theme.json to define global settings, including the color palette available in the block editor. PaletteRx generates the exact schema WordPress expects.

What theme.json Does

When you add a color palette to theme.json, those colors appear in the block editor's color picker for text, backgrounds, and other settings. They replace or supplement WordPress's default palette. This is the cleanest, most native way to integrate colors with the modern WordPress editing experience.

The Export Format

PaletteRx generates a complete settings.color.palette array following the v3 schema. Each color gets a slug (for CSS class generation), a hex value, and a human-readable name.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#4f46e5", "name": "Primary" },
        { "slug": "dark-base", "color": "#1a1a2e", "name": "Dark Base" }
      ]
    }
  }
}

How to Use It

Download the JSON file from PaletteRx and place it in your block theme's root directory alongside style.css and templates/. If you already have a theme.json, merge the settings.color.palette array into your existing file.

WordPress will automatically generate utility classes like .has-primary-color and .has-primary-background-color for each palette entry.

📘 Classic themes: If you are not using a block theme, use PaletteRx's Gutenberg PHP export instead. It generates the add_theme_support('editor-color-palette') snippet for your theme's functions.php.

Ready to Build Your Palette?

PaletteRx guides you from color selection to accessible, export-ready design systems in minutes.

🎨 Launch PaletteRx