How to Control or Adjust Display Brightness in Ionic 6 App

Ionic 6 Angular control display brightness tutorial; In this comprehensive tutorial, you will find out how to create functionality to adjust screen brightness in the Ionic app using the Ionic native and Cordova brightness plugin.

The screen brightness option helps reduce the strain on our eyes; many user prefer to display brightness based on their personal choice.

Nevertheless, overuse of extravagant bright screens leads to digital eye strain, which exhibits headaches, blurred vision, and strained eyes.

Though, It is easy to adjust the display brightness, you have to slide down the device screen and control it by a slide back and forth the screen visibility slider.

Since Ionic has innumerable options to deal with any feature programmatically, we will use the Ionic native and Cordova plugin brightness plugin to control screen brightness through the adjust range slider to adjust the screen brightness in the Ionic app.

Ionic 6 Control Display Brightness Integration Example

• Step 1: Set Up Ionic App
• Step 2: Add Screen Brightness Plugin
• Step 3: Add Brightness Module in App Module Class
• Step 4: Implement Screen Brightness in Ionic
• Step 5: Test Ionic Project

Set Up Ionic App

In the first step, start installing Ionic CLI. If installed already, then update it using the following command.

npm install -g @ionic/cli

Now, you can install blank new Ionic Angular application:

ionic start ionic-demo-app blank --type=angular

Head over to application folder:

cd ionic-demo-app

Add Screen Brightness Plugin

Now, you have got inside the app directory, open the terminal, type recommended se of commands to install Cordova and ionic native brightness plugins.

ionic cordova plugin add cordova-plugin-brightness
npm install @ionic-native/brightness

Add Brightness Module in App Module Class

In this step, open the app.module.ts file in the code editor, import and register the Brightness module to access the various methods of this awesome plugin throughout the ionic app templates.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// Import plugin
import { Brightness } from '@ionic-native/brightness/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    Brightness,
    { 
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Implement Screen Brightness in Ionic

Inject Brightness module into the constructor, and access setBrightness() method passes the brightness values dynamically via the parameter to initially set the screen brightness values; similarly, the controlBrightness() method does the same thing when the ionChange event is invoked.

Ionic comes with default home page component, hence we are adding screen brightness slider in home page.

Hence, open home.page.ts file and update the following code:

import { Component } from '@angular/core';
import { Brightness } from '@ionic-native/brightness/ngx';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 brightnessValue = 0.42;
 constructor(private brightnessModule: Brightness) {
   this.brightnessModule.setBrightness(this.brightnessValue);
 }
 controlBrightness(){
   this.brightnessModule.setBrightness(this.brightnessValue);
 }  
}

Add the controlBrightness() method to the change event, add min, max, step properties, and options to make the screen control side ready for screen visibility adjustment.

Open home.page.html page and add the suggested code:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Display Brightness Slider Example
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  Screen Brightness: {{brightnessValue}} / 1
  <ion-list>
    <ion-item>
      <ion-range 
      min="0" 
      max="1" 
      step="0.01"
      [(ngModel)]="brightnessValue"
      (ionChange)="controlBrightness()"
      debounce="450"
      >
        <ion-icon size="small" slot="start" name="sunny"></ion-icon>
        <ion-icon slot="end" name="sunny"></ion-icon>
      </ion-range>
    </ion-item>
  </ion-list>
</ion-content>

Test Ionic Project

To check out the demo, you have to add the platform:

# iOS
ionic cordova platform add ios
# Android
ionic cordova platform add android

Use following command to create the build.

# iOS
ionic cordova build ios
# Android
ionic cordova build android

Now, you can use any of the command to run the application.

# iOS
ionic cordova run ios -l
# Android
ionic cordova run android -l

Conclusion

Ionic Angular adjust screen brightness tutorial is over; Throughout this example, we learned how to build a simple feature to control the display brightness using the range slider in conjunction with ionic native and Cordova plugins.