Angular Material Dark theme
After few years working with angular and different “UI” libraries like angular material or bootstrap or any other, i always faced the challenge of implement the well known “Dark theme” as well as maintaining it.
Nowadays implement “Dark theme” is common task for developers all over the world, but after many projects and code reviews i figured out that the simple task of implementing it could be harder than a simple color change. I saw many people implementing it in very different ways, in some of them i noticed that a extra bunch of code was written, which is not good or bad, it’s just a way of doing things, right?
So i will share with you the simplest way that i found to implement such a task with a minimalist code. For this example a will use just Angular, Angular material, bootstrap and a custom service to handle with the app mode (light or dark).
Different themes
A dark or light mode basically consists in switching between color pallets on the body level, in other words changing the main class attached to the <body> which in the major cases is defined as “.light” and “.dark” classes attached to <body> element. I will use angular material because those colors are already defined but the logic is the same if you want to use yours custom css or library.
Let’s start…
Setup
ng new appcd appng add @angular/materialnpm i bootstrap
Defining a theme
Angular material comes with 4 pre-built themes:
- deeppurple-amber
- indigo-pink
- pink-bluegray
- purple-green
You can take a look here at angular material documentation.
The color pallet has 10 color variations and 4 accent colors variations, these are prefixed with a capital “A” and is usually used in inputs, and any other interactive elements. It also has the contrast colors usually used in text elements like headings or paragraphs.
If you want you can create your own pallet according to material styling rules here is a tool to help you to create and customize the colors in the right way.
Now let’s dive into code structure and make our app become darker!
In root of src folder of every angular application there is a styles.scss file, this is the perfect place for implementing additional styles, you can use them in a separated file, but for this example a will keep it simple and use this file itself.
Let me explain the code above…
First of all there are two imports, the first is the bootstrap library and the second is the angular material styling helpers (mixins, functions, etc…) which is the file that allows us to customize material components on the root level and it’s shipped with @angular/material library.
After importing the scripts, i will create two color pallets, one for light mode and one for dark mode and a theme background for changing the color in dark mode.
Let’s create a service to handle the mode!
For handle the color scheme i will simply create a service that handles the mode to store it and retrieve it from “localStorage” in order to persist the current state of the app mode (light or dark).
ng g s services/app-modeAnd simply add a few lines of code!
The magic behind this class is actually very simple, i created a getter and a setter to handle the value stored in a “localStorage” under the key “theme” which stores the state of the theme (light, dark) and a simple getter to return the right css class, because i wanted to use the renderer2 in a service level i had to make use of RendererFactory2 but if you want to do this in a component level just simply use the renderer2 it will work fine.
Now let’s take care of html!
The html will be a simple page with a few material components, a navbar a card and a slider button in order to be possible to change dynamically the color mode of the application. I will do this simply in app.component.html feel free to change this according to your needs.
Let’s code the app.component.html!
Now we need to ensure that the component will cover the entire screen, so we add these two lines of code in app.component.scss .
And finally let’s add the logic behind the toggle button in app.component.ts , import once the service for the entire app (no need to import later in other component) and a toggle method to update the state of theme inside service.
Finally let’s see the results!
Notice that every time you change the color theme a different css class is attached to the body element and the previous one are detached in order to tell the browser which color pallet should use.
Final words…
No need to use complicated code inside the app.component.ts or decorators like @HostBinding() or even a pipe class, just define your base classes and import a service and let it do all the job. I used this approach many times and it worked for me, but like i said in the beginning it’s just a way of doing this. I hope you like it.
You can find the whole code on github
