Ionic Angular – Access body selector in page scope


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.



body.dark .whatever-class {
    color: yellow


    <div class="whatever-class">
        some text


  selector: 'page',
  templateUrl: './page.html',
  styleUrls: ['./page.scss'],


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

Leave a Reply

(*) Required, Your email will not be published