Animating Theme Transitions in Angular with CSS Variables

Create smooth transitions when switching between themes. Use Angular to toggle a CSS class that changes variables, and CSS to define the transition property for a seamless effect.

/* In your Angular component .ts file */

export class AppComponent {
  isDarkTheme = false;

  toggleTheme() {
    this.isDarkTheme = !this.isDarkTheme;
  }
}

This is a TypeScript snippet in an Angular component, setting an initial theme state and providing a toggle function.

/* Add this to your Angular component .html file where you switch themes */

<button (click)="toggleTheme()">Toggle Theme</button>
<div [ngClass]="{ 'dark-theme': isDarkTheme }">
  <!-- Your content here -->
</div>

This is an HTML snippet showing a toggle button and content area where a CSS class is conditionally applied based on the theme state.

/* CSS styles with CSS variables and transitions */

:root {
  --main-bg-color: #fff;
  --main-text-color: #000;
  transition: background-color 0.3s, color 0.3s;
}

.dark-theme {
  --main-bg-color: #000;
  --main-text-color: #fff;
}

.content {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

This is a CSS snippet defining root variables for themes and transitions. It also includes a style for dark theme overrides and the content styling that uses these variables.