Need help with svelte-css-vars?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kaisermann
148 Stars 2 Forks MIT License 12 Commits 4 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 37,788
Svelte
TypeScr...
PHP
Webpack
11 commits

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:

Example

repl

REPL

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.