How do I specify different background colours for different pages in Gridsome/vue.js?

Question

How do I specify different background colours for different pages in Gridsome/vue.js? I've tried scoping the css but it won't work for the body or html selectors.

Answer 1

html and body are outside the application bounds. You will want to programatically control these elements.

Two simple avenues come to mind:

1. Use the layouts approach which will work with or without scoped CSS.
2. Manipulate the body classList using navigation guards.

Answer 2

you can pass props to layouts. For example pass a prop like

<template>
  <Layout :background="white">
    <section>Add page content here</section>
  </Layout>
</template>

then write your css like

[background=white] section {
    background: #fff !important;
}