Skip to main content

Theme Style Sync Skill

This workflow documents how Solutech theme tokens exposed by the dynamic styles endpoint can be reused inside post-level CSS, plugin templates, and other custom UI surfaces.

Source of truth​

The main style tokens are available from:

  • https://vania-novikau.me/wp-admin/admin-ajax.php?action=dynamic_styles

That endpoint exposes the live theme variables generated by the active Solutech settings, including:

  • brand colors such as --pix-main-color, --pix-main-color-lighter-2x, --pix-gradient-color
  • typography such as --pix-main-font, --pix-title-font, --pix-font-size, --pix-title-size
  • button tokens such as --pix-button-color, --pix-buttons-shadow
  • layout/header tokens such as --pix-header-height

Core tokens currently used as reference​

The live theme output currently exposes these key values:

  • --pix-main-color: #8888ea
  • --pix-main-color-lighter-2x: #A0A0FF
  • --pix-main-color-darker: #7070D2
  • --pix-gradient-color: #1f3ff2
  • --pix-main-font: Jost
  • --pix-font-size: 18px
  • --pix-font-color: #444444
  • --pix-title-font: Jost
  • --pix-title-size: 38px
  • --pix-title-color: #000000
  • --pix-buttons-shadow: 0px 5px 15px 0px rgba(0,0,0,0.15)

Why this matters​

When custom post layouts or plugin styles hard-code colors and fonts, they drift away from the site theme. Reusing the dynamic theme variables keeps:

  • post content visually aligned with the active brand palette
  • L0/L1/L2 custom blocks consistent with the surrounding theme
  • future theme-color changes automatically reflected in custom components

Registered skill​

A reusable skill script has been added for this purpose:

  • ai-scripts/apply/apply_theme_style_tokens.php

The skill applies a managed CSS block into a post's WPBakery custom CSS field (_wpb_post_custom_css). The CSS block is idempotent and can be re-run safely because it replaces only its own marked section.

What the skill adds​

The managed CSS block maps post-level selectors to the live Solutech variables, including:

  • .kant-l0-english
  • .kant-l0-german
  • .pac-theme-synced
  • .kant-page-ref
  • .lnum::before
  • .arg-block
  • .kant-bp-wrapper, .kant-bp-table, .table-title

This makes the skill useful for posts, content wrappers, argument boxes, blueprint tables, and other reusable content surfaces.

Usage​

Apply to one post​

php ai-scripts/apply/apply_theme_style_tokens.php --post=6697

Apply to multiple posts​

php ai-scripts/apply/apply_theme_style_tokens.php --posts=6692,6693,6697
php ai-scripts/apply/apply_theme_style_tokens.php --stdout

Safe workflow​

  1. Inspect the live theme variables from the dynamic_styles endpoint.
  2. Apply the managed token block to target posts.
  3. If a plugin stylesheet needs to match the theme, reuse the same variable-based selectors instead of hard-coded values.
  4. Re-run the script after major design-token changes if post-level custom CSS needs refreshing.

Notes​

  • This skill does not modify WordPress core.
  • It is designed for content/presentation alignment only.
  • The script can be used locally and synced to the remote host under /var/www/html/ai-scripts/.
  • The skill is intended to be registered in the remote ai_agent_db so it is discoverable by the agent system.