b6999d1659
* Commit changes from coding agent for task attempt 5ee89751-7ceb-4dfc-a9e7-0311307f9367 * Cleanup script changes for task attempt 5ee89751-7ceb-4dfc-a9e7-0311307f9367 * Commit changes from coding agent for task attempt 5ee89751-7ceb-4dfc-a9e7-0311307f9367 * Commit changes from coding agent for task attempt 5ee89751-7ceb-4dfc-a9e7-0311307f9367 * Cleanup script changes for task attempt 5ee89751-7ceb-4dfc-a9e7-0311307f9367 * Receive style overrides for VS Code * Separate style override logic * Style override * Format * Remove debug * Prettier
1.3 KiB
1.3 KiB
Style Override via postMessage
Simple API for overriding styles when embedding the frontend in an iframe.
Usage
// Switch theme
iframe.contentWindow.postMessage({
type: 'VIBE_STYLE',
theme: 'purple' // 'system', 'light', 'dark', 'purple', 'green', 'blue', 'orange', 'red'
}, 'https://your-app-domain.com');
// Override CSS variables (--vibe-* prefix only)
iframe.contentWindow.postMessage({
type: 'VIBE_STYLE',
css: {
'--vibe-primary': '220 14% 96%',
'--vibe-background': '0 0% 100%'
}
}, 'https://your-app-domain.com');
// Both together
iframe.contentWindow.postMessage({
type: 'VIBE_STYLE',
theme: 'dark',
css: {
'--vibe-accent': '210 100% 50%'
}
}, 'https://your-app-domain.com');
Security
- Origin validation via
VITE_PARENT_ORIGINenvironment variable - Only
--vibe-*prefixed CSS variables can be overridden - Browser validates CSS values automatically
Example
<iframe id="vibe" src="https://app.com" width="100%" height="600"></iframe>
<script>
const iframe = document.getElementById('vibe');
iframe.addEventListener('load', () => {
// Apply custom theme
iframe.contentWindow.postMessage({
type: 'VIBE_STYLE',
theme: 'purple',
css: {
'--vibe-brand': '210 100% 50%'
}
}, 'https://app.com');
});
</script>