/svelte-body

Apply styles to the body in routes! Designed to work with Svelte Kit and Routify

Primary LanguageJavaScriptOtherNOASSERTION

Svelte Body

Apply styles to the body in routes! Designed to work with Svelte Kit and Routify.

Example REPL

Why?

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!

Install

npm i svelte-body -D

Usage

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 = {
        "background-color": "violet", 
        "color": "white"
    }
</script>

<Body {style} />

Actions

There are also svelte actions that can be used on <svelte:body />:

  • classList

    <script>
    import { classList } from 'svelte/body';
</script>

<svelte:body use:classList={"red green blue"}>

  • style

    <script>
    import { style } from 'svelte/body';
</script>

<svelte:body use:style={"background-color: blue;"}>

Support