theme-root/
├── theme.json           # Theme configuration
├── styles/              # Optional style variations
│   ├── dark.json
│   └── contrast.json
└── ...

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3
}

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "Theme Name",
  "description": "Theme description for style variations",
  "settings": { },
  "styles": { },
  "customTemplates": [ ],
  "templateParts": [ ],
  "patterns": [ ]
}

1. WordPress Core Defaults
        ↓
2. Theme's theme.json
        ↓
3. Child Theme's theme.json (if applicable)
        ↓
4. User Customizations (stored in database)

wp-includes/theme.json

// Core default
{ "settings": { "color": { "defaultPalette": true } } }

// Theme overrides
{ "settings": { "color": { "defaultPalette": false, "palette": [...] } } }

// Result: defaultPalette is false, palette from theme, other color settings from core

// Theme
{ "styles": { "color": { "background": "#fff" } } }

// User customization
{ "styles": { "color": { "text": "#000" } } }

// Result: both background and text are applied

// Core has 12 default colors
// Theme defines 5 colors
// Result: Only 5 theme colors available (core colors removed)

// Get complete merged settings
$settings = wp_get_global_settings();

// Get specific setting
$palette = wp_get_global_settings( array( 'color', 'palette' ) );

// Get complete merged styles
$styles = wp_get_global_styles();

// Get specific style
$background = wp_get_global_styles( array( 'color', 'background' ) );

import { useSettings, useSetting } from '@wordpress/block-editor';

// Get multiple settings
const [ fontSizes, colors ] = useSettings( 'typography.fontSizes', 'color.palette' );

// Get single setting
const palette = useSetting( 'color.palette' );

{
  "settings": {
    "color": {
      "palette": [ /* global palette */ ]
    },
    "blocks": {
      "core/paragraph": {
        "color": {
          "palette": [ /* paragraph-only palette */ ]
        }
      }
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff"
    },
    "blocks": {
      "core/paragraph": {
        "color": {
          "text": "#333333"
        }
      }
    }
  }
}

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3
}

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "My Theme",
  "settings": {
    "appearanceTools": true,
    "color": {
      "palette": [
        { "slug": "primary", "color": "#0066cc", "name": "Primary" },
        { "slug": "secondary", "color": "#333333", "name": "Secondary" }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "slug": "system",
          "name": "System Font",
          "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
        }
      ]
    },
    "layout": {
      "contentSize": "650px",
      "wideSize": "1200px"
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--primary)",
      "text": "#ffffff"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--system)",
      "fontSize": "1rem",
      "lineHeight": "1.6"
    },
    "elements": {
      "link": {
        "color": { "text": "#ffffff" },
        ":hover": { "color": { "text": "#cccccc" } }
      }
    }
  },
  "templateParts": [
    { "name": "header", "area": "header", "title": "Header" },
    { "name": "footer", "area": "footer", "title": "Footer" }
  ],
  "customTemplates": [
    { "name": "blank", "title": "Blank", "postTypes": ["page", "post"] }
  ],
  "patterns": [ "theme-slug/hero", "theme-slug/cta" ]
}