<button *ngIf="activeTheme$ | async as activeTheme" class="theme-toggle" (click)="toggleTheme(activeTheme)">
    <span>{{ 'common.theme' | translate }}</span>
    <div class="theme-icon default" [class.active]="activeTheme === 'default'">
        <clr-icon shape="sun" class="is-solid"></clr-icon>
    </div>
    <div class="theme-icon dark" [class.active]="activeTheme === 'dark'">
        <clr-icon shape="moon" class="is-solid"></clr-icon>
    </div>
</button>
