Defining CSS Variables in Angular Component Styles

Show how to define CSS variables within an Angular component's styles section, setting a theme base for individual components that can be easily manipulated.
import { Component, OnInit } from '@angular/core';

  selector: 'app-theme-component',
  template: `<div class=
This code snippet begins by importing the necessary Angular core components. The @Component decorator defines the 'app-theme-component' which will use CSS variables within its styles.
Inside the template, a div element is given a class name that will be associated with the styles defined with the CSS variables.
>This is a themed component</div>`,
  styles: [`
    .themed-component {
      --primary-color: #336699; /* Define the primary color variable */
      --secondary-color: #aabbcc; /* Define the secondary color variable */
      background-color: var(--primary-color);
      color: var(--secondary-color);
export class ThemeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {

The styles array contains a backtick template literal where the CSS variables --primary-color and --secondary-color are defined for the themed-component class. The background and text color of this component are then set using these CSS variables. Lastly, the ThemeComponent class is exported, implementing the OnInit interface.