Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

repl

REPL

About

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

Topics

Resources

License

Packages

No packages published