Passing values from JS to CSS

You can easily read in CSS media query values into JS with window.matchMedia. However, sometimes you want to pass information from JS to CSS variables, or have CSS Variables read into JS.

To set CSS Variables on an element, you can use the style attribute.

<!-- App.svelte -->
<script>
	import Child from './Child.svelte';
	let backgroundColor = 'blue';
	export let width = 30;
	export let height = 30;
</script>

<label>Color <input type="color" bind:value={backgroundColor} /></label>
<label>Width <input type="range" bind:value={width} /></label>
<label>Height<input type="range" bind:value={height} /></label>

<div
	style="
	--backgroundColor: {backgroundColor};
	--width: {width}px;
	--height: {height}px;
"
>
	<Child />
</div>

<div />

<!-- Child.svelte -->
<style>
	div {
		background-color: var(--backgroundColor);
		height: var(--height);
		width: var(--width);
	}
</style>

Alternatively, you can have a custom action to do this. This is already available with svelte-css-vars.

<!-- 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="600x200" 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} />