A technical utility for adding, refining, and migrating custom UI themes directly into the OpenClaw Control UI frontend bundle.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install openclaw-theme-patcher
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install openclaw-theme-patcher using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is OpenClaw Theme Patcher?
The OpenClaw Theme Patcher is a robust tool designed for developers who want to personalize their AI agent interface. By focusing on patching the installed frontend assets in the dist directory, this skill allows users to inject new color palettes, match VSCode themes, or fine-tune chat component styling without needing to rebuild the entire project from source. It is an essential component for those leveraging Openclaw Skills to maintain a consistent aesthetic across various versions.
This tool excels at theme migration, ensuring that custom designs are preserved during software upgrades. By using structural comparison rather than simple string replacement, it safely identifies patch points in minified JavaScript and CSS files, providing a surgical approach to UI customization that respects the underlying application logic.
OpenClaw Theme Patcher Use Cases
- Creating custom themes based on specific brand palettes or IDE settings like VSCode.
- Migrating existing custom UI themes to newer versions of OpenClaw after an upgrade.
- Calibrating specific component styles such as chat bubbles and code blocks for better readability.
- Synchronizing light and dark mode variants within the OpenClaw Control UI.
How OpenClaw Theme Patcher Works
- The skill identifies the active installation path using CLI commands to ensure the correct live bundles are targeted.
- A backup of the current JS and CSS bundles is created to allow for safe rollback if needed.
- The user defines the theme ID, labels, and the intended dark/light palette tokens.
- New CSS selectors are injected into the production CSS bundle, mapping tokens to the specific theme data attributes.
- The production JavaScript bundle is patched to register the new theme in the Appearance settings and update the theme resolver logic.
- A hard refresh and gateway restart are performed to verify the successful application of the new Openclaw Skills theme.
OpenClaw Theme Patcher Setup
To prepare for patching, locate your active installation and backup your current theme configuration:
# Find the active OpenClaw path
which openclaw
readlink -f "$(which openclaw)"
# Backup existing theme assets before migration
python3 scripts/backup_theme_bundle.py <theme-id> --output-dir ./backups
# Verify status of the gateway
openclaw status
OpenClaw Theme Patcher Data Schema & Taxonomy
The skill organizes its migration and backup data in a structured directory format to ensure consistency:
| Item | Description |
|---|---|
report.json |
Contains theme metadata, ID, and discovered patch point locations. |
<id>.dark.css |
The extracted dark mode CSS variables and token values. |
bundle-js.txt |
Captured snippets of the original JavaScript structures (allowed sets, resolvers). |
patch-points.md |
Reference file mapping specific minified code locations for safe injection. |
OpenClaw Theme Patcher Advanced Features
- Structural comparison logic that detects changes in bundle hashes and object shapes during upgrades.
- Theme-scoped component overrides for deep CSS customization of specific UI elements like chat groups.
- Automated recovery workflows to restore stock UI behavior if a migration attempt fails.
- Support for secondary palette tokens including accent, ring, and focus states to ensure a complete professional finish.
SKILL.md
Loading
Related Openclaw Skills
Git Manager
A powerful multi-platform Git automation suite for bulk repository management, LFS tracking, and advanced workflow orchestration.
PDF Processing and Manipulation
A comprehensive toolkit for programmatically managing PDF documents, including extraction, creation, and complex transformations.
Qoris Memory
A professional MCP-based persistent memory skill that enables Openclaw Skills agents to store, search, and version knowledge across multiple sessions.
Competitor Intelligence Monitor
A powerful automated monitoring skill that transforms competitor URLs or brand names into comprehensive market intelligence reports including SWOT and pricing strategies.
Subtitle Generator AI Free
An AI-powered skill that automatically generates, translates, and burns subtitles into video files through a seamless cloud processing pipeline.
Video Compressor Download
A cloud-based AI skill that compresses large video files through natural language instructions for fast sharing and downloading.
Featured*
