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
178 Stars 3 Forks MIT License 15 Commits 7 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

# 36,879
Svelte
TypeScr...
PHP
WordPre...
13 commits
# 281,634
Shell
cpluspl...
elm
Svelte
1 commit

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.