Currently in Svelte Kit and Routify, applying styles per page to the body doesn't work. You can't use :global(body) since the style tags aren't removed and reapplied on route change. svelte-body handles that for you. It's available as an action or component.
npm i svelte-body -DThis library is made for Svelte 5, if you'd like to use Svelte 3/4 checkout v1.
Just like in regular html you can apply classes with class="" and styles with style="".
<script>
import { Body } from 'svelte-body';
</script>
<Body class="some classes" style="color: blue" />Alternativley you can use a style object like so:
<script>
import { Body } from 'svelte-body';
const style = {
backgroundColor: 'violet',
color: 'white',
'--cool-css-prop': '😎',
};
</script>
<Body {style} />We use clsx under the hood, which allows you to pass different shapes and only have truthy names applied as classes. Read me about it on their docs.
<script>
import { classList } from 'svelte-body';
let isBlue = $state(true);
</script>
<Body class="red green blue" />
<Body class={{ red: true, blue: isBlue }} />
<Body class={['red', isBlue && 'blue']} />
<Body class={['red', { blue: isBlue }]} />We also provide a classList and style action, which can be used on <svelte:body /> (or any other element).
-
classList<script> import { classList } from 'svelte-body'; </script> <svelte:body use:classList={"red green blue"} /> <svelte:body use:classList={{ red: true, blue: isBlue }} /> <svelte:body use:classList={['red', isBlue && 'blue']} /> <svelte:body use:classList={[ 'red', { blue: isBlue } ]} />
-
style<script> import { style } from 'svelte-body'; </script> <svelte:body use:style={'background-color: blue;'} />
It can also take an object:
<script> import { style } from 'svelte-body'; </script> <svelte:body use:style={{ backgroundColor: 'blue', '--cool-css-prop': '😎' }} />
- Svelte 5 is now required
- We updated to clsx v2