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.