Dark | Light Mode in Angular
If you want to have a user friendly interface for your website, you should add ability to switch a mode. I show the simplest way to change a theme in Angular application.
In order to do this we need:
1. Create dark theme.
2. Create switch.
3. Change the mode.
It sound very easy. Let’s start!
Dark theme
We just need to create css/scss class with some style which would be different:
After that you need to import it to the styles.scss file.
Switch
It can be a regular input or a special component. You also need to add an onChange event, to find out about the status change:
Change the mode
To change the style, you need to create a function changeThemeColor() in your typescript component.
Here we check each time the status changes to see if it contains a body tag, a “dark-theme” class. If it contains, we remove it, if not add it.
It seems so simple and obvious but sometimes so necessary.
If you like this article please 👏 or write a comment.
