Adding themes to any website, makes it more interesting to use, and also helps customize the website according to personal preferences. This blog deals with how we implemented themes in Susper.
Susper offers the following themes
- Default
- Dark
- Basic
- Contrast
- Terminal
This is how some of the themes look
Dark:
Contrast: 
Terminal:
Lets go through a step by step guide how to implement this:
- Add a Themes service (In app/src/theme.service.ts in Susper)
Here is the code snippet:
import { Injectable } from ‘@angular/core’;
@Injectable()
export class ThemeService {
public titleColor: string;
public linkColor: string;
public descriptionColor: string;
public backgroundColor: string;
constructor() { }
}
- Create a component for themes, and define functions for various themes in the .ts file.(src/app/theme/theme.component.ts in Susper)
Here is the example code:
import { ThemeService } from ‘../theme.service’;@Component({
selector: ‘app-theme’,
templateUrl: ‘./theme.component.html’,
styleUrls: [‘./theme.component.css’]
})
export class ThemeComponent implements OnInit {constructor(
private themeService: ThemeService
) { }ngOnInit() {
}darkTheme() {
this.themeService.backgroundColor = ‘#FFFFFF’;
this.themeService.titleColor = ‘#050404’;
this.themeService.linkColor = ‘#7E716E’;
this.themeService.descriptionColor = ‘#494443’;
}
defaultTheme() {
this.themeService.backgroundColor = ‘#FFFFFF’;
this.themeService.titleColor = ‘#1a0dab’;
this.themeService.linkColor = ‘#006621’;
this.themeService.descriptionColor = ‘#545454’;
}
basicTheme() {
this.themeService.backgroundColor = ‘#FFFFFF’;
this.themeService.titleColor = ‘#1a0dab’;
this.themeService.linkColor = ‘#494443’;
this.themeService.descriptionColor = ‘#7E716E’;
}
In the above code, the first few lines include the constructor, which defines the theme service, and include a default function that runs as soon as the page is initialized.
We then see three kinds of themes implemented, dark, default and contrast. Let us examine the darkTheme:
this.themeService.backgroundColor = ‘#FFFFFF’;
this.themeService.titleColor = ‘#050404’;
this.themeService.linkColor = ‘#7E716E’;
this.themeService.descriptionColor = ‘#494443’;
}
- The first line sets the background color of the screen(to white).
- The second line is used to set the color of all the titles of the search results
- The third line is used to set the link/url color
- The fourth line sets the description color
-
- Link the appropriate attributes in your html pages, using [style.’css-attribute’]
(src/app/results/results.component.html in Susper)
Following this example, you can link different parts of the html file to the attributes in your theme service and you are done!
If implementing this in a project like Susper, a few points of caution:
- Make sure you write your spec.ts file well, and add your component for proper compilation and testing.
- Do not forget to import the service into any component before you use it in its html files.
Resources
- This tutorial, provides a great insight into how such services work: https://angular.io/tutorial/toh-pt4
- If you wish to implement this, using the help of components, this bit in stack overflow might help: https://stackoverflow.com/questions/37363121/get-and-update-a-string-through-a-service-in-angular-2