svelte-body
Advanced tools
Apply styles to the body in routes! Designed to work with Svelte Kit and Routify.
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 -D
This 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': '😎' }} />
FAQs
Apply styles to the body in routes! Designed to work with Svelte Kit and Routify.
We found that svelte-body demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.
Security News
The Node.js TSC opted not to endorse a feature bounty program, citing concerns about incentives, governance, and project neutrality.
Research
Security News
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.