Applying different themes dynamically in Angular with CSS Application
To increase the user experience of the applications now a days applications can have multiple themes. Through this article you will get an basic idea on how to apply different themes dynamically in an Angular Application.
In this article I’m particularly focusing on the angular application with CSS files. The CSS files can be even more optimized if it was an application was creating using SCSS files. Maybe in future I’ll write a separate article for that.
STEP 1:
Creating different files for different themes. I’m gonna have three theme files. All these files have been kept under the assets folder in a css subfolder as shown below Fig 1.
All my CSS files would be kept in the same folder.
STEP 2:
Add a link tag in the index.html. To the href attribute which is present in the link tag , add the default theme which you have to implement.
STEP 3:
To change to the different theme, I have used three buttons and I have written click event to all the button and passing the theme ENUM.
STEP 4 :
Inject the document Object in the constructor. Using the document object we will get the link tag which was given in index.html and then we will change the folder based on the user selected value.
On clicking button the different button the theme gets downloaded and you can see the same in the network tab as show below Fig 5.
Below are the output images for all the themes.
If you see in the below Figure Fig 9 for the same class name we are apply different colors and changing the background color. I’m just showing you the background and color change but you can import different font, increase the size, change animations etc. If this had to be implemented in SCSS Angular project we could have had managed it in single file by suing color, background variables and CSS functions.
Thank you.
