Dynamic Themes Without a Library in Angular


In this article, we will see how to dynamically apply a theme (color & background color) without any external library in Angular. This process creates a localized experience to change the theme in our Angular application, which helps to update multiple components theme on the fly without updating the CSS files and ship to deploy.
Initially, components are loaded with default colors from CSS. These CSS file values will be dynamically updated or controlled from a different component.
Step 1
Create an Angular application using Angular CLI command below.
ng new angular-theme
cd angular-theme
Step 2
Here, we have created a different component for header, body and footer sections.
Dynamic Themes Without A Library In Angular
Step 3
Now create a theme.scss file and add the following code to set the default value and pass it to a Sass map.
On Sass map, represent one or more key/value pairs and return the specific key in the map.
  1. @import url('https://fonts.googleapis.com/css?family=Open+Sans');  
  2. // default colors  
  3. .theme - wrapper {  
  4.     --headColor: #FFF;  
  5.     --headBackground: #FFF;  
  6.     --bodyColor: #FFF;  
  7.     --bodyBackground: #FFF;  
  8.     --footerColor: #FFF;  
  9.     --footerBackground: #FFF;  
  10. }  
  11. $variables: (  
  12.     --headColor: var (--headColor),  
  13.     --headBackground: var (--headBackground),  
  14.     --bodyColor: var (--bodyColor),  
  15.     --bodyBackground: var (--bodyBackground),  
  16.     --footerColor: var (--footerColor),  
  17.     --footerBackground: var (--footerBackground), );  
Create a function.scss file and follow the below codes.
  1. // grabs the native css variable from the global sass map  
  2. @function  
  3. var ($variable) {  
  4.     @return map - get($variables, $variable);  
  5. }  
The components can now read these files and host a dynamic variable that will change on the form submit.
Step 4
Add every component page *. scss file. You need to import “theme” and “function” files and set every page's default value. Here I have assigned all three components a page text-color and background-color like #FFFFF.
  1. @import '../../theme';  
  2. @import '../../functions';.header {  
  3.     background - color: var (--headBackground);  
  4.     color: var (--headColor);  
  5. }  
  1. @import '../../theme';  
  2. @import '../../functions';.body {  
  3.     background - color: var (--bodyBackground);  
  4.     color: var (--bodyColor);  
  5. }  
  1. @import '../../theme';  
  2. @import '../../functions';.footer {  
  3.     background - color: var (--footerBackground);  
  4.     color: var (--footerColor);  
  5. }  
Header, body, and footer; all three values get a function.css $variable. The variables are declared and set in theme.css. Every component has a different dynamic color and background color variables.
  1. Header Page- --headBackground, --headColor;  
  2. Body Page- -- bodyBackground, -- bodyColor;  
  3. Footer Page- -- footerBackground, -- footerColor;  
We need to call the style class in a component.html page.
Step 5
How do we change the color values in variables? I'm going to use the user theme-setting component.
In theme-setting.component.html, use template forms with ngModal to create a unique key and value.
For style input, set value to pass and overwrite the variable value dynamically in typescript.
  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. @Component({  
  5.     selector: 'app-theme-setting',  
  6.     templateUrl: './theme-setting.component.html',  
  7.     styleUrls: ['./theme-setting.component.scss']  
  8. })  
  9. export class ThemesettingComponent {  
  10.     private themeWrapper = document.querySelector('body');  
  11.     onSubmit(form) {  
  12.         this.ThemeChanges(form.value);  
  13.     }  
  14.     ThemeChanges(style) {  
  15.         // Header Styles  
  16.         if (style.headColor) {  
  17.             this.themeWrapper.style.setProperty('--headColor', style.headColor);  
  18.         }  
  19.         if (style.headBackground) {  
  20.             this.themeWrapper.style.setProperty('--headBackground', style.headBackground);  
  21.         }  
  22.         // Body Styles  
  23.         if (style.bodyColor) {  
  24.             this.themeWrapper.style.setProperty('--bodyColor', style.bodyColor);  
  25.         }  
  26.         if (style.bodyBackground) {  
  27.             this.themeWrapper.style.setProperty('--bodyBackground', style.bodyBackground);  
  28.         }  
  29.         // Footer Styles  
  30.         if (style.footerColor) {  
  31.             this.themeWrapper.style.setProperty('--footerColor', style.footerColor);  
  32.         }  
  33.         if (style.footerBackground) {  
  34.             this.themeWrapper.style.setProperty('--footerBackground', style.footerBackground);  
  35.         }  
  36.     }  
  37. }  
Open the theme-setting.component.html file and add the following code inside of it.
  1. <div class="theme">  
  2.     <form #gsForm="ngForm" (ngSubmit)="onSubmit(gsForm)">  
  3.         <label>Header Section Font Color: </label>  
  4.         <input #headColor name="headColor" type="color" ngModel>  
  5.             <br>  
  6.                 <label>Header Section Background Color: </label>  
  7.                 <input #headBackground name="headBackground" type="color" ngModel>  
  8.                     <br>  
  9.                         <label>Body Section Font Color: </label>  
  10.                         <input #bodyColor name="bodyColor" type="color" ngModel>  
  11.                             <br>  
  12.                                 <label>Body Section Background Color:</label>  
  13.                                 <input #bodyBackground name="bodyBackground" type="color" ngModel>  
  14.                                     <br>  
  15.                                         <label>Footer Section Font Color: </label>  
  16.                                       <input #footerColor name="footerColor" type="color" ngModel>  
  17.                                    <br>  
  18.                                <label>Footer Section Background Color: </label>  
  19.                           <input #footerBackground name="footerBackground" type="color" ngModel>  
  20.                         <br>  
  21.                      <br>  
  22.                 <br>  
  23.             <button type="submit">Apply Theme</button>  

  24.         </form>  
  25. </div>  
Run the project using ng-serve -o command the default localhost: 4200 will open a page with initial default variable style values. Like shown in the below screen.
Dynamic Themes Without A Library In Angular
Change the color by using the theme - picker (please check the image1). After selecting the theme-color, click the “Apply Theme” button, and you will get the theme changes in every component text-color and background-color values.
Dynamic Themes Without A Library In Angular 
Dynamic Themes Without A Library In Angular
Finally, you will see the changes on the screen. I hope this article was helpful to everyone. Thanks