[Angular][Nebular] Synchronize body background with theme

  angular, nebular, sass

I have built a web app with angular and nebular. The default theme I enabled is the ‘cosmic’ one, and I have seen that when scrolling too far up or down (in phones or with the trackpad, if you are on a laptop), you can see the white background of the body.

I would like to have the body background be the same as what the theme is set to. I have read the documentation to enable multiple themes, and that works (there is a button at the top nav to change themes dynamically), but I can’t find how to get the background of the body be set according to the colors of the theme.

I’ve tried doing what they suggest in here Use themes variables in my styles.scss file. Doing these changes in the src/app/app.component.sccs didn’t set any style in the body tag, not even when using :host.

I’ve tried changing :host for body, and I am pretty sure I have to use the same variable they mention in the example. But for some reason, I see it gets the values from the default theme. I’ve tried with background-basic-color-x with x ranging from 1 to 4, and the values match with the documentation for the default theme.

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.