Ever wanted to have reactive css variables in svelte? What if I tell 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.
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:
<div use:cssVars="{styleVars}">
<!-- anything here will have access to var(--titleColor) -->
</div>App.svelte
<script>
import Circle from './Circle.svelte';
</script>
<Circle size="80x80" bg="url(https://placekitten.com/80/80) center" />
<Circle
size="{120}"
bg="radial-gradient(circle, #051937, #004d7a, #008793, #00bf72, #a8eb12) "
/>
<Circle
size="{180}"
bg="linear-gradient(45deg, #EE617D 25%, #3D6F8E 25%, #3D6F8E 50%, #EE617D 50%,
#EE617D 75%, #3D6F8E 75%, #3D6F8E 100%) center / 100% 20px"
/>
<Circle size="250/200" bg="url(https://placekitten.com/250/200) center" />Circle.svelte
<script>
import cssVars from 'svelte-css-vars';
export let bg = 'black';
export let size = '50x50';
$: [width, height = width] = size.toString().split(/[x|\/]/);
$: styleVars = {
width: `${width}px`,
height: `${height}px`,
bg,
};
</script>
<style>
div {
display: inline-block;
width: var(--width);
height: var(--height);
background: var(--bg);
border-radius: 50%;
}
</style>
<div use:cssVars="{styleVars}" />