Angular 🇺🇦 - practical notes

📄 Theming for Angular Applications with CSS Variables

#angular #guide #theming

1. Install required packages

Install the font-awesome/angular-fontawesome package for creating the theme switcher later.

npm install --save @font-awesome/angular-fontwaesome

2. Define CSS variables

First, we have to define colors as CSS variables in the styles.scss. The properties defined in the :root section could be referred to globally.

:root represents the <html> element and is identical to the selector html .

🎁

Code Link

3. Create pre-defined themes

Create a new TypeScript file.

— Define required theme types (line 1 ~ line 4)
— Define required themes in the JSON format (line11 ~ line 35)

🎁

Code Link

4. Create a theme service to operate the theme
Create a new service from the ng-cli.

ng g s theme

Update the service.

— Expose the method to retrieve the theme type from memory and localStorage (line 20 ~ line 23)
— Expose the method to set the theme type to memory and localStorage (line 42 ~ line 47)

The key is document.documentElement(line 55). It stands for the root DOM. In setCurrentTheme() , we set the new value for the corresponding theme.

🎁

Code Link

5. Create a theme component for the theme switcher

Create a new component from the ng-cli.

ng g c theme

Update the theme.component.ts.

— In ngOnInit() phase, we set the corresponding icon for the theme type retrieved from the service (line 23 ~ line 26)
— When the user toggles, we set the icon for the next theme type retrieved from the service (line 28 ~ line 32)

🎁

Code Link