Angular Theming with CSS Variable Fallbacks

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="themed-element">
      This element will be styled based on the theme.
    </div>
  `,
  styles: [
    `:host(.themed-element) {
      --primary-color: var(--custom-primary-color, #007bff);
      --secondary-color: var(--custom-secondary-color, #6c757d);
      background-color: var(--primary-color);
      color: var(--secondary-color);
    }`
  ]
})
export class MyComponent {
  // You can bind CSS Variables with host binding to set up themes dynamically
  @HostBinding('style.--custom-primary-color') primaryColor = '';
  @HostBinding('style.--custom-secondary-color') secondaryColor = '';

  constructor() {
    // Assign default fallback values if not provided
    this.primaryColor = this.primaryColor || '#007bff'; // Default primary color
    this.secondaryColor = this.secondaryColor || '#6c757d'; // Default secondary color
  }
}