Dynamic Themes Without a Library in Angular

Introduction

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.

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
// default colors
.theme - wrapper {
--headColor: #FFF;
--headBackground: #FFF;
--bodyColor: #FFF;
--bodyBackground: #FFF;
--footerColor: #FFF;
--footerBackground: #FFF;
}
$variables: (
--headColor: var (--headColor),
--headBackground: var (--headBackground),
--bodyColor: var (--bodyColor),
--bodyBackground: var (--bodyBackground),
--footerColor: var (--footerColor),
--footerBackground: var (--footerBackground), );

Create a function.scss file and follow the below codes.

// grabs the native css variable from the global sass map
@function
var ($variable) {
@return map - get($variables, $variable);
}

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.

header.component.scss

@import '../../theme';
@import '../../functions';.header {
background - color: var (--headBackground);
color: var (--headColor);
}

Body.component.scss

@import '../../theme';
@import '../../functions';.body {
background - color: var (--bodyBackground);
color: var (--bodyColor);
}

Footer.component.scss

@import '../../theme';
@import '../../functions';.footer {
background - color: var (--footerBackground);
color: var (--footerColor);
}

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.

Header Page- --headBackground, --headColor;
Body Page- -- bodyBackground, -- bodyColor;
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.

theme-setting.component.ts

import {
Component
} from '@angular/core';
@Component({
selector: 'app-theme-setting',
templateUrl: './theme-setting.component.html',
styleUrls: ['./theme-setting.component.scss']
})
export class ThemesettingComponent {
private themeWrapper = document.querySelector('body');
onSubmit(form) {
this.ThemeChanges(form.value);
}
ThemeChanges(style) {
// Header Styles
if (style.headColor) {
this.themeWrapper.style.setProperty('--headColor', style.headColor);
}
if (style.headBackground) {
this.themeWrapper.style.setProperty('--headBackground', style.headBackground);
}
// Body Styles
if (style.bodyColor) {
this.themeWrapper.style.setProperty('--bodyColor', style.bodyColor);
}
if (style.bodyBackground) {
this.themeWrapper.style.setProperty('--bodyBackground', style.bodyBackground);
}
// Footer Styles
if (style.footerColor) {
this.themeWrapper.style.setProperty('--footerColor', style.footerColor);
}
if (style.footerBackground) {
this.themeWrapper.style.setProperty('--footerBackground', style.footerBackground);
}
}
}

Open the theme-setting.component.html file and add the following code inside of it.

<div class="theme">
<form #gsForm="ngForm" (ngSubmit)="onSubmit(gsForm)">
<label>Header Section Font Color: </label>
<input #headColor name="headColor" type="color" ngModel>
<br>
<label>Header Section Background Color: </label>
<input #headBackground name="headBackground" type="color" ngModel>
<br>
<label>Body Section Font Color: </label>
<input #bodyColor name="bodyColor" type="color" ngModel>
<br>
<label>Body Section Background Color:</label>
<input #bodyBackground name="bodyBackground" type="color" ngModel>
<br>
<label>Footer Section Font Color: </label>
<input #footerColor name="footerColor" type="color" ngModel>
<br>
<label>Footer Section Background Color: </label>
<input #footerBackground name="footerBackground" type="color" ngModel>
<br>
<br>
<br>
<button type="submit">Apply Theme</button>
</form>
</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.

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.

Finally, you will see the changes on the screen. I hope this article was helpful to everyone. Thanks