openclaw-theme-patcher
Add, refine, calibrate, or migrate OpenClaw Control UI themes by patching the installed bundled frontend assets in dist/control-ui/assets. Use when a user wants a new WebUI theme, wants colors matched to a reference theme such as VSCode, wants chat/component styling tuned inside a custom theme, or wants an existing custom theme preserved across an OpenClaw upgrade.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/ailough/openclaw-theme-patcherOpenClaw Theme Patcher
Add a new OpenClaw Control UI theme directly into the installed frontend bundle.
This skill also covers theme migration across OpenClaw upgrades. When a user already has a custom theme on an older installed bundle and wants to keep it after updating OpenClaw, preserve the old theme first, then migrate it into the new bundle using structural comparison rather than heuristic string injection.
Scope
Use this skill for installed bundle patching, not upstream source development.
Default rule: add a new theme from the user's requested palette. Do not overwrite built-in themes unless the user explicitly asks.
For migrations, use a stricter rule set:
- preserve the user's old custom theme first
- treat the old and new bundles as potentially different structures
- never assume previous patch points still exist after an upgrade
- prefer restoring the UI to a known-good stock state over leaving a half-migrated broken theme live
Files to patch
Patch the active OpenClaw install only:
dist/control-ui/assets/index-*.jsdist/control-ui/assets/index-*.css
Resolve the active install first. Do not assume the workspace copy is the live one.
Workflow
For token design and live bundle patch locations, read as needed:
references/token-mapping.mdreferences/patch-points.mdreferences/theme-migration-checklist.mdwhen doing a version-to-version preserve/rebuild of an existing custom theme
Bundled helper script:
scripts/backup_theme_bundle.py— backs up the active live JS/CSS bundles for a given theme id, extracts:root[data-theme=<id>]/:root[data-theme=<id>-light], and saves JS snippets for the allowed set, alias map, resolver, and theme card when found
If the task is an upgrade or migration, follow the migration workflow below before any new patching. For day-of execution, prefer using references/theme-migration-checklist.md as the short operational checklist and this file as the fuller policy/guidance layer.
0. Migration workflow for existing custom themes
Use this when the user already has a custom theme on an older OpenClaw version and wants to keep it across an update.
Phase A. Snapshot the old theme before upgrade
Before updating OpenClaw:
- resolve the active install and active bundle files
- extract and save the old theme's CSS selectors from the live CSS bundle
- save a copy of the old JS and CSS bundles for offline comparison
- record the old theme id, visible label, description, and any resolver behavior you can confirm
Preferred method:
python3 scripts/backup_theme_bundle.py <theme-id> --output-dir /path/to/backups
Use manual extraction only if the helper script cannot capture enough of the live theme.
Leave the backup in the workspace, for example:
backups/openclaw-<theme-id>-theme/
report.json
<theme-id>.dark.css
<theme-id>.light.css
bundle-js.txt
bundle-css.txt
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-ailough-openclaw-theme-patcher": {
"enabled": true,
"auto_update": true
}
}
}