Responsive Theming with Angular and CSS Variables

Showcase responsive theming techniques by changing CSS variables based on different breakpoints using Angular's HostListener to detect window resize events.
import { HostListener, Component, Renderer2 } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  constructor(private renderer: Renderer2) {

  @HostListener('window:resize', ['$event'])
  onResize(event: Event) {
    this.updateCSSVariables(( as Window).innerWidth);

  updateCSSVariables(width: number) {
    const root = document.documentElement;
    if (width < 600) {
      // Small devices'--primary-color', 'blue');'--font-size', '14px');
    } else if (width >= 600 && width < 900) {
      // Medium devices'--primary-color', 'green');'--font-size', '16px');
    } else {
      // Large devices'--primary-color', 'red');'--font-size', '18px');
The AppComponent listens for the window resize event and then calls the updateCSSVariables method to set different CSS variable values based on window width breakpoints. This allows for responsive theming by changing styles dynamically according to the screen size.