Repository files navigation

Ever wanted to have reactive css variables in svelte? What if I told you there's a way?

svelte-css-vars exposes asvelte 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.

import cssVars from 'svelte-css-vars';

After importing the module, just define the reactive object of your custom properties:

letsome_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><divuse:cssVars="{styleVars}"><!-- anything here will have access to var(--titleColor) --></div>

REPL