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

0

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.

How to Add Theme Switcher Lazy load CSS in Angular 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.

File directory of assets folder
File directory of assets folder

The content of {theme-name}.js:


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

Directory of project

Directory of project
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:


Add below code in the service file:

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:

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:


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.

Theme Switcher in Angular
Theme Switcher in Angular

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

 

0
Summary
How to Add Theme Switcher Lazy load CSS in Angular application?
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
Publisher Name
Das JS
Publisher Logo