WordPress

Advanced Themer + PaletteRx: A Complete Integration Workflow

Advanced Themer (AT) is a powerful WordPress plugin that manages design tokens, including colors, as CSS custom properties. PaletteRx generates the exact format AT expects for its CSS Variables import feature.

Export from PaletteRx

In Step 5, select the Advanced Themer export target. PaletteRx generates a CSS variable block formatted specifically for AT: each color as a --variable-name: #hexvalue; pair, with role-based naming that aligns with AT's convention.

Copy the code block to your clipboard.

Import into Advanced Themer

In your WordPress dashboard, navigate to Advanced Themer and find Color Management. Look for the "Import CSS Variables" button. It opens a textarea where you paste the CSS variable block from PaletteRx.

Click Import, and your colors appear as managed design tokens throughout the AT interface. They are now available in every builder that integrates with AT.

Why Use AT Instead of Raw CSS?

You could paste CSS variables directly into your theme's Custom CSS. The advantage of AT is that it treats colors as managed tokens. You can rename them, group them, and AT handles the inheritance chain. It also provides a visual interface for designers who do not want to edit CSS directly.

💡 Best practice: Use PaletteRx for palette creation and validation, and AT for ongoing token management. They complement each other. PaletteRx does the upfront work of building and testing; AT does the ongoing work of managing and distributing.

Ready to Build Your Palette?

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

🎨 Launch PaletteRx