define:vars
The define:vars directive passes frontmatter values into an inline script or style tag as variables.
Syntax
<style define:vars={{ accent }}>Examples
---
const accent = 'oklch(0.6 0.2 265)';
const message = 'Hello from the server';
---
<style define:vars={{ accent }}>
.badge { background: var(--accent); }
</style>
<script define:vars={{ message }}>
console.log(message);
</script>
Output
Exposes the accent value as a CSS custom property and the message as a script variable.
Notes
In <style> it creates CSS custom properties; in <script> it injects JSON-serializable values as local consts. Values must be serializable. Using it on a script makes that script non-hoisted/inline.