[Angular][Nebular] 主体背景与主题同步

Question

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 .

Answer 1

The term you're looking for is overscroll. That is a css property and has nothing to do with nebular. You can change the property by adding this somewhere in your css at the very top level.

body { overscroll-behaviour: none; }

This is actually an expected browser behaviour and it does not concern Nebular. If you want to test this, you can go to different websites including stackoverflow and many other and test this.

To overcome this you've to add the above mentioned property in your body tag. Go to Inspect element and add it in the elements tab to temporarily see the property in action.