svelte-css-vars
Ever wanted to have reactive css variables in svelte? What if I told you there's a way?
svelte-css-vars exposes a svelte action which receives an object of properties that should be treated as css custom properties. By defining this object inside a $:{} reactive block, svelte-css-vars can update those css properties on the fly whenever some of its values change.
Usage
import cssVars from 'svelte-css-vars';
After importing the module, just define the reactive object of your custom properties:
let some_state_variable = true;
$: styleVars = {
titleColor: some_state_variable ? 'red' : 'blue',
};
And then use the action, passing the object, on the desired element:
<style>
div {
color: var(--titleColor);
}
</style>
<div use:cssVars="{styleVars}">
<!-- anything here will have access to var(--titleColor) -->
</div>
Example
