Table of Contents

Theme Switcher for Angular application

Dark mode is a current trending functionality. So today I am going to show you How to add theme switcher lazy load CSS in Angular application. And it would be lazy load which gives a great effect to our application.

Do you have any demo for your reference?

Yes, OfCourse, you can see demo below:

As we want that our application should be load fast. For achieving this we have to maintain the initial bundle size small as we can. #TipsOfTheDay

Problem which I was struggled with.

During my work, I encountered an issue and saw that the name of a CSS file that is loaded lazily cannot be hashed. The names of CSS files may not be hashed, but the names of JavaScript files can be hashed. I achieved my goal by importing JavaScript files instead of CSS files.

Solution of this issue goes to maosmurf .

What I did in this project?

I used three themes: Materia, Journal, and Lux and find them to the src/assets/styles folder. Then I created JavaScript files corresponding to each CSS file.

The content of {theme-name}.js:

import css from "./{theme-name}.min.css";

export default css;

import css from "./{theme-name}.min.css";

export default css;

The related CSS file has imported and exported as default in each of JavaScript files.

See More:

Theme Switcher, How to Add Theme Switcher Lazy load CSS in Angular application?

Do you know about these hidden Debugging API for Angular 9?
Table of Contents Ok, where can I use this Debugging...

Directory of project

Now we have to load these javascript files in our application.

Create a Service for theme switcher

We’ll create a service and load themes via this service. A service called SwitchThemeService can be generated with the following command:

ng g s switch-theme/switch-theme

1	ng g s switch-theme/switch-theme

Add below code in the service file:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SwitchThemeService {
  selectedTheme = 'materia';
  insertedElement: HTMLElement;

  constructor() {
    this.loadTheme();
  }

  loadTheme() {
    import(
      /* webpackChunkName: "[request]" */
      `../../assets/styles/${this.selectedTheme}.js`
    )
      .then((s) => s.default)
      .then(this.insertToDom);
  }

  insertToDom = (content: string) => {
    const element = document.createElement('style');
    element.textContent = content;
    document.head.appendChild(element);

    if (this.insertedElement) this.insertedElement.remove();
    this.insertedElement = element;
  };
}

import { Injectable } from '@angular/core';

@Injectable({

providedIn: 'root',

})

export class SwitchThemeService {

selectedTheme = 'materia';

insertedElement: HTMLElement;

constructor() {

this.loadTheme();

}

loadTheme() {

import(

/* webpackChunkName: "[request]" */

`../../assets/styles/${this.selectedTheme}.js`

)

.then((s) => s.default)

.then(this.insertToDom);

}

insertToDom = (content: string) => {

const element = document.createElement('style');

element.textContent = content;

document.head.appendChild(element);

if (this.insertedElement) this.insertedElement.remove();

this.insertedElement = element;

};

}

Explanation:

The selectedTheme variable with initial value that is materia, insertedElement variable to keep inserted DOM element.
Defined the loadTheme method for lazy loading the Javascript files in assets/styles folder. The import function of the Webpack loads the JavaScript modules dynamically and returns the result as a promise. The default property of the import function result gets us the CSS raw content.
Handled the content in the loadTheme method and pass it to the insertDom method.
Called the loadTheme method in constructor to load initial theme on application initialization.
Defined the insertToDom method as an arrow function to create a style element with the given content and insert this element to the DOM. If an element has inserted before, the method removes the old one.

Webpack includes JavaScript files that are passed to the import function to the build output.

Create a component for theme switcher

We will create a component to change the theme on the fly. A component named SwitchThemeComponent can be generated with the following command:

ng g c switch-theme --inlineTemplate

1	ng g c switch-theme --inlineTemplate

Why –inlineTemplate here?

Please skip this section. If you know the reason. Otherwise unlock the content by share with your friend by click on below buttons.

Well now let move ahead and add SwitchThemeComponent content with the below:

import { Component, OnInit } from '@angular/core';
import { SwitchThemeService } from './switch-theme.service';

@Component({
  selector: 'app-switch-theme',
  template: `
    <select [(ngModel)]="service.selectedTheme" (ngModelChange)="service.loadTheme()">
      <option [ngValue]="'materia'">Materia</option>
      <option [ngValue]="'journal'">Journal</option>
      <option [ngValue]="'lux'">Lux</option>
    </select>
  `,
})
export class SwitchThemeComponent {
  constructor(public service: SwitchThemeService) {}
}

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

import { SwitchThemeService } from './switch-theme.service';

@Component({

selector: 'app-switch-theme',

template: `

<option [ngValue]="'materia'">Materia</option>

<option [ngValue]="'journal'">Journal</option>

</select>

})

export class SwitchThemeComponent {

constructor(public service: SwitchThemeService) {}

}

Switching between themes is done with the select element using SwitchThemeService in the component. You already see the demo above and attaching cool gif of that demo.

Hope you enjoy this article. If yes then please share with your friends and if No then kindly comment us.

Summary

Article Name

How to Add Theme Switcher Lazy load CSS in Angular application?

Description

Dark mode is a current trending functionality. So today I am going to show you How to add theme switcher lazy load CSS in Angular application.

Author

Das JS

Publisher Name