DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to theme components in Angular
Dany Paredes for This is Angular

Posted on • Updated on • Originally published at danywalls.com

How to theme components in Angular

When we build components it needs to be flexible, because they can be used in many places or contexts, sometimes change layout and colors.

For example, Our customer wants a list of contacts, it needs to show as a card with the picture, name, and details, and list pictures with big borders but gray and white by default without the picture.

Also, be able to add new layouts and colors in the future and apply them easily, in short like this:

Alt Text

Let start

Use the power of the big 3 :host() pseudo-class ,
Angular and CSS custom properties.

Alt Text

The layout

We create the app-contact-component, and the markup for contacts.

ng g c contact
Enter fullscreen mode Exit fullscreen mode

Using the BEM style, we assign one class to each element class to keep specificity low.

<div class="contact">
  <h1 class="contact__firstname">{{contact.first_name}}</h1>
  <p class="contact__lastname">{{contact.last_name}}</p>
  <img  class="contact__avatar" [src]="contact.avatar"/>
</div>
Enter fullscreen mode Exit fullscreen mode

Edit the contact sass file with the default styles for the contact component.

.contact {
    background: grey;
    font-family: monospace;
    border: 1px solid black;
    border-radius: 5px;
    margin: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    &__firstname {
        font-size: 1.5em;
        color: whitesmoke;
    }
    &__lastname {
        font-size: 1.5em;
        color: whitesmoke;
    }
    &__avatar {
        display: none;
        border: 1px solid black;
        background-color: lightblue;
    }
}
Enter fullscreen mode Exit fullscreen mode

We have the default layout ready and working!!

Alt Text

The default layout is working, but we made some mistakes, the colors it hardcoded, and the layout and colors are in the same file.

Themes and Colors

Split every case in files, layout, and colors, create the directory theme with these files.

-winter.scss
-winter-colors.scss
-summer.scss
-summer-colors.scss

The power of :host and CSS custom properties.

The :host pseudo-class helps us to assign one style only when the component match or has one specific CSS class.

read more about :host() https://angular.io/guide/component-styles#host

The CSS Custom properties allow us, stored a value in one like variables of Sass.

Read more about CSS Custom properties https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Using it, create the winter-colors using CSS custom properties into the winter-colors.scss

:host(.contact-winter-colors) {
    --background-color: #424b68;
    --primary-color: rgb(220, 59, 226);
    --secondary-color: rgb(80, 245, 65);
    --avatar-background: rgb(48, 109, 78);  
}
Enter fullscreen mode Exit fullscreen mode

Create the winter layout using the CSS custom properties to assign the colors and adapt the layout changes for our elements.

:host(.contact-winter) {
    .contact {
        background: var(--background-color);
        font-family: monospace;
        border: 1px solid black;
        border-radius: 5px;
        width: -moz-fit-content;
        min-width: 150px;
        flex-direction: column;
        padding: 10px;
        text-align: center;
        display: table-cell;

    &__firstname {
        font-size: 1.5em;
        color: var(--primary-color);
    }
    &__lastname {
        font-size: 1.5em;
        color: var(--secondary-color);
    }
    &__avatar {
        display: block;
        border: 1px solid black;
        border-radius: 50%;
        background-color: var(--avatar-background);
    }
}
}
Enter fullscreen mode Exit fullscreen mode

Repeat the same steps for summer.scss and summer-colors.scss

Import themes and color.

Into the contact.component.scss import our layout and colors themes.

/*layouts*/
@import './themes/summer';
@import './themes/winter';

/*colors themes*/
@import './themes/summer-colors';
@import './themes/winter-colors';
Enter fullscreen mode Exit fullscreen mode

more about import files with Sass https://sass-lang.com/documentation/at-rules/import

The component sass files have the default value and the references to layout and colors by default.

We want to change his colors default colors with the summer or winter colors, using CSS Custom properties' fallback.

more about fallback values https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values

So, if the --background-color has a value then use it, else it assigns the grey.

background: var(--background-color, grey);
Enter fullscreen mode Exit fullscreen mode

So, the default style is ready to get the values from CSS custom properties or the default.

ngClass and :host

Set colors and layout dynamic using the Angular ngClass directive to assign the class to the component.

<app-contact [ngClass]="theme" *ngFor="let contact of contacts" [contact]="contact">      
</app-contact>
Enter fullscreen mode Exit fullscreen mode

To make it dynamic, we create a theme variable and change it using changeLayoutColor, addColor, and reset

  <div class="actions">
    <button (click)="changeLayoutColor()">change</button>
    <button (click)="addColor('contact-winter-colors')">Winter</button>
    <button (click)="addColor('contact-summer-colors')">Summer</button>
    <button (click)="theme = ''">reset</button>
    <p>
      current theme: {{theme}}
    </p>
  </div>
Enter fullscreen mode Exit fullscreen mode
 theme = '';
  changeLayoutColor() {
    this.theme = this.theme === 'contact-winter' ? 'contact-summer' : 'contact-winter';
  }
  addColor(color:string) {
    this.theme += ` ${color}`
  }
Enter fullscreen mode Exit fullscreen mode

Because the: host pseudo-class applies the styles when the component match with the class.

Feel free to play with the demo https://theme-angular-components.surge.sh/

Done!!

That's it! Hopefully, that will give you a bit of help on how to set the theme and colorize your components and make it dynamic. If you enjoyed this post, share it!

Photo by Sigmund on Unsplash

Top comments (2)

Collapse
 
mugan86 profile image
Anartz Mugika Ledo

Thanks! Very usefull😊

Collapse
 
bezael profile image
Bezael PΓ©rez

Excellent. Thank you for sharing 😎😎

An Animated Guide to Node.js Event Loop

>> Check out this classic DEV post <<