I’m working on an Angular application with a light/dark mode switcher. The switcher is supposed to toggle between light and dark mode and also change the logo (which is an SVG image) accordingly. However, when I click on the switcher, it appears as though the entire page reloads.
Clicking on the theme switcher causes the whole page to refresh or reload.

I have a StackBlitz demo where I’ve tried to implement this, but I couldn’t manage to include the SVG images properly.

What I need help with:

• Understanding why clicking the switcher might cause the page to reload.
• Correct way to handle SVG images and switch them dynamically without causing a page reload.

Any guidance or suggestions on how to resolve this issue would be greatly appreciated!

Stackblitz Demo

main.ts

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  template: `
  @if (this.counter%2) {
      <img src="light.svg" alt="light-logo">

    } @else {
      <img src="dark.svg" alt="dark-logo">
    }
    <button type="button" (click)="changeTheme()">Change Theme</button>
  `,
})
export class App {
  name = 'Angular';
  counter = 0;

  public changeTheme() {
    this.counter++;
  }
}