Ionic Angular – Access body selector in page scope

Issue

I need to access the "body" selector in my .scss file. However, I can’t access the body selector within the page scope, only in the global.scss or variables.scss files. Is there a way to do this?

I’m trying to change the color of a div when in dark mode (using the ‘dark’ class on body). Since it’s specific to the page, I don’t want to add it to a global file.

Like:

page.scss:

body.dark .whatever-class {
    color: yellow
}

page.html:

<ion-content>
    <div class="whatever-class">
        some text
    </div>
</ion-content>

page.component:

@Component({
  selector: 'page',
  templateUrl: './page.html',
  styleUrls: ['./page.scss'],
})

Solution

You can use ::ng-deep to style the body selector.

::ng-deep body.dark .whatever-class {
    color: yellow
}

Note: Applying the ::ng-deep pseudo-class to any CSS rule completely disables view encapsulation for that rule. Any style with ::ng-deep applied becomes a global style.

Answered By – Dao Huy Hoang

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0