[Ionic] Dynamic Layout background color

Way 1: Using document body to set theme (preferred)

1. Set the document body inside the main layouts

// main.page.ts
export class MainPage implements OnInit {
  constructor() {
    document.body.setAttribute('data-theme', 'dard');
  }
}

// admin.page.ts
export class AdminPage implements OnInit {
  constructor() {
    document.body.setAttribute('data-theme', 'light');
  }
}

2. Style the app in the variable.scss

[data-theme="light"] {
    --ion-background-color: #2f2f2f;
    --ion-text-color: #2f2f2f;
    --ion-text-color-tint: #FFFFFF;
    --ion-color-base-color: #211D1D;
    --ion-color-base-color-tint: #4e4e4e;
    --ion-color-primary: #0054e9;
}

[data-theme="dark"] {
    --ion-background-color: #211D1D;
    --ion-text-color: #F8F8F8;
    --ion-text-color-tint: #FFFFFF;
    --ion-color-base-color: #211D1D;
    --ion-color-base-color-tint: #4e4e4e;
    --ion-color-primary: #FFB267;
}

Way 2: Set them variables directly into Main layout page

Structure the files

Given you have folder structure like this.

ui-pages/main: layout using for admin, moderator role

ui-pages/user: layout using for user role

app.component.html

<ion-router-outlet></ion-router-outlet>

main.page.html

<ion-app>
  <ion-header slot="fixed">
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>Main Layout Header</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-content>
</ion-app>

user.page.html

<ion-app>
  <ion-header slot="fixed">
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>User Layout Header</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-content>
</ion-app>

Now you want to set the different colors for these 2 pages. How to do this?

Let say:

1. Main layout: Background blue and text white
2. User layout: Background black and text yellow

Disable Encapsulation

Set the encapsulation: ViewEncapsulation.None for each layout page

main.page.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-main',
  templateUrl: './main.page.html',
  styleUrls: ['./main.page.scss'],
  encapsulation: ViewEncapsulation.None, // Setting here
})
export class MainPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

user.page.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.page.html',
  styleUrls: ['./user.page.scss'],
  encapsulation: ViewEncapsulation.None, // Setting here
})
export class UserPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Update CSS to set the background and text color for the layout

main.page.scss

:root{
    --ion-background-color: blue;
    --ion-text-color: white;
}

user.page.scss

:root{
    --ion-background-color: black;
    --ion-text-color: yellow;
}

Here is the result

Voila, We did it!

Besides that, there are some small parts that need to be adjusted. But the main idea is there. If you have any issues. Please comment bellow