<script>
import { style } from 'svelte-style-action@0.0.2';
import { onMount } from 'svelte';
let styles = { color: 'var(--var)', 'font-weight': 600, '--var': 'orange' };
function switchColor() {
let newColor = styles['--var'] === 'orange' ? 'lightblue' : 'orange';
let newWeight = styles['font-weight'] === 600 ? 400 : 600;
styles = {
...styles,
'--var': newColor,
'font-weight': newWeight,
};
}
onMount(() => {
let timer = setInterval(switchColor, 1500);
return () => clearInterval(timer);
});
let name = 'world';
</script>
<h1 use:style={styles}>Hello {name}!</h1>