Theming Angular UI | Light & Dark Mode Switching | Angular Material Theme

Опубликовано: 27 Февраль 2025
на канале: Shaheer Shukur

21,456

353

Source Code: https://github.com/shaheershukur/Mark...
Complete Playlist: • Web Application Development

We'll see how to theme an Angular application, to have Light and Dark theme switch.

Closed Captioning:
In this video, we will see how to add an option for Dark theme in our Angular application.
Before we start, let's understand theming in Angular Material.
A theme can have 3 basic color palettes, which are Primary, Accent and Warn colors.
And the theme can be either Light or Dark.
In a project, we can define more than one theme.
For each extra theme we include, we must specify a class name.
And in the application, we can choose the theme based on the class name we conditionally add to the component.
Let's implement this in our project.
Open the 'custom-theme' sass type file, which was created during project set up.
Here we can see a light theme already defined, named 'market-theme'.
Let me remove these comments for better readability.
Primary, accent and warn colors for this theme is defined here.
Color palette is provided for each of them using the mat-palette function, by passing pre-defined material colors.
Apart from the color name, we can also specify default, light and dark colors if required.
It's optional. We can remove it.
Here the primary color is indigo, and accent color is pink.
For the list of available colors, we can visit the website 'material.io/resources/color'
In this website, we can see the color names which can be used in our project.
These are the available colors.
For light theme, let's use light blue as the primary color.
And, light green as the accent color.
warn color is usually used to display error messages.
So let's keep the warn color as red itself.

Using these 3 color palettes, a light theme is created and included in the project, using the angular-material-theme function.
Now, in a similar way, we can include a dark theme to our project.
First, we will create primary, accent and warn color palette variables.
We will use orange color for primary.
Yellow for accent.
And red for warn.
Now we can create a dark theme variable using the material dark theme function, by passing the color palettes.
Currently we have light and dark theme.
Hence, To include this dark theme to our project, we need to specify the dark theme under a class name.
We will add a class 'dark-theme-mode'.
Inside this class, we can include the dark theme using the 'angular-material-theme' function.
Now we have light and dark theme in our project.
Let's create a toggle switch in our application, to switch between themes.
For that, first open the app module file to import material toggle module.
Now, open the nav components HTML file.
Here we can see the title 'Market' which will be displayed on the toolbar.
Let's add a material toggle switch after the title.
For the toggle, we will give the text 'Dark Theme'.
Currently it's looking ugly.
Let's move the toggle switch to the right side.
For that, we will just add a span tag with flex style.
Now it looks better.

In the TS file, we need a boolean variable, based on which we can decide which theme to display.
Let it be false initially.
Now, in the HTML file, we will be adding or removing the theme class based on the value of this variable.
For that, we will use the 'ngClass' directive.
the class 'dark-theme-mode' will be included if 'isDarkTheme' variable is true. else the class will be excluded.
As you can see, now the default light theme is displayed.
When we change the variable 'isDarkTheme' to true, the dark theme will be displayed.
Let's bind this variable to the toggle switch.
For that, we will use the 'ngModel' directive in the material slide toggle.
NgModel directive is present in the FormsModule. So, we need to import it in the app module file.
It's working fine. We can switch between light and dark themes.
It's not yet over. Let's take a look at few issues we are having here.
The dark theme is not getting reflected in some part of our application.
This issue can happen with few elements. To fix this, we should add the 'mat-app-background' class the parent container.
Now theme is getting reflected everywhere.
If we reload the page, the default theme is applied instead of the dark theme we have selected.
To fix this issue, we will store the selected theme whenever the toggle switch is changed.
In the 'change' event of material slide toggle, we will call a function 'storeThemeSelection'.

If the dark theme was set, we will set the isDarkTheme variable to true, else false.
Let's run the application and see.
It's working as expected.

Let's keep the slide toggle text on the left side of the toggle.
For that, we should add the 'labelPosition' attribute to the slide toggle.
We can also replace the toggle text with a material icon.
For that, in the HTML file, we will remove the text and add the material icon tag.
We can see the list of icon names at 'material.io/resources/icons'.