How to add Dark & Light Mode to your Ionic 3 Apps

973
SHARES
4.4k
VIEWS

Today we’ll learn how we can add Dark & Light mode in your ionic applications. This feature is very important and nearly every app needs this kind of functionality. Remember we are using Ionic 3 for this specific project and for exact results I suggest you should the same Ionic version.

Setup our App

We will use the sidemenu ionic template and generate a service which will be used later to tell us which theme is currently used. Go ahead and run the following commands:

$ ionic start dark_mode_ionic_theme sidemenu
$ cd dark_mode_ionic_theme
$ ionic g provider settings

Here is the Package.json file for this specific project:

{
  "name": "dark_mode_ionic_theme",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.18.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic/storage": "2.2.0",
    "ionic-angular": "3.9.3",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

Now inside our app we need to create two files inside the src/theme folder, as these will reflect how our different themes will look like. Call the first file theme-light.scss and add the following code:

.light-theme {
  ion-content {
    background: #ffffff;
  }
 
  .toolbar-background {
    background: #ffffff;
  }
}

And create second file called theme-dark.scss and add the following code:

.dark-theme {
  ion-content {
    background-color: #333333;
    color: #ffffff;
  }
 
  .toolbar-title {
    color: #ffffff;
  }
 
  .header .toolbar-background {
    border-color: #ffffff;
    background-color: #333333;
  }
}  

Now we got two styling files which define some CSS classes for either a light or a dark theme. We also need to make them available, so put these import statements somewhere in your src/theme/variables.scss:

@import "theme-light";
@import "theme-dark";

Creating the Settings provider

But before we get there we need to implement our helper provider. The provider holds the currently selected theme, we can change the theme and we can grab the theme.

open your src/providers/settings/settings.ts and add the following code:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {BehaviorSubject} from "rxjs";

@Injectable()
export class SettingsProvider {
  private theme: BehaviorSubject<String>;
  constructor() {
    this.theme = new BehaviorSubject('light-theme');
  }

  setActiveTheme(val) {
    this.theme.next(val);
  }

  getActiveTheme() {
    return this.theme.asObservable();
  }
}

Open your src/app/app.component.ts and add the following code:


import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import {SettingsProvider} from "../providers/settings/settings";

export class MyApp {

selectedTheme: String;

constructor(
 private settings: SettingsProvider,
 public platform: Platform, 
 public statusBar: StatusBar, 
 public splashScreen: SplashScreen
){
  this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
  statusBar.styleDefault();
}

toggleAppTheme() {
    if (this.selectedTheme === 'light-theme') {
      this.settings.setActiveTheme('dark-theme');
    } else {
      this.settings.setActiveTheme('light-theme');
    }
  }
}

Now we need to craft a little view around this and add the button to toggle our styling. Nothing really fancy here, so open your src/app/app.html and change it to:

<ion-menu [content]="content">
  <ion-content> 
    <button ion-button (click)="toggleAppTheme()">
     Toggle Theme
    <button>
  </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" [class]="selectedTheme" #content swipeBackEnabled="false"></ion-nav>

Now whenever we change our variable inside the provider (through our toggle) the new theme will be set as a Conclusion

How to add Dark & Light Mode to your Ionic 4 App

Best Resources to learn ionic and Angular

Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Comments 2

  1. harsh patel says:

    hey mubeen, can you guide me with how to add-dark-mode in my ionic4 app ? this code doesn’t work in ionic4 and works only in ionic3. Reply asap.

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending