CODEWITHSUNDEEP
sveltesapper
16ar
16ar

Reputation: 175

Updating body background-color in sapper

I want to update the body background-color depending on the page/route I am. So far I am on this :

//index.svelte
:global(body) {
      background-color:white;
}

//about.svelte
:global(body) {
      background-color:blue;
}

When I go from one to the other page, the color change but when I come back to the previous one then it doesn't work. Any idea ??

Upvotes: 1

Views: 2517

Answers (1)

Matt Wolff
Matt Wolff

Reputation: 349

The problem with your current setup, is that you're basically resetting what should be considered the global style on body when you move from index to about.

One option to apply your styles to the body: you could try adding a <style> element into each template's svelte:head element.

Something like this:

// index.svelte
<svelte:head>
  <style>
    body {
      background: white;
    }
  </style>
</svelte:head>

// about.svelte
<svelte:head>
  <style>
    body {
      background: blue;
    }
  </style>
</svelte:head>

There's been some discussion about adding a class: directive to <svelte:body> for doing this sort of thing, so maybe this will be updated later.

Upvotes: 7

Related Questions