refactor(default-header): color modes dropdown

Author: xidedix

src/app/layout/default-layout/default-header/default-header.component.html

@@ -160,49 +160,21 @@ <h6 cDropdownHeader class="bg-body-secondary text-body-secondary fw-semibold py-
 <ng-template #themeDropdown>
   <c-dropdown alignment="end" variant="nav-item">
     <button [caret]="false" cDropdownToggle>
-      @switch (colorMode()) {
-        @case ("dark") {
-          <svg cIcon name="cilMoon" size="lg"></svg>
-        }
-        @case ("auto") {
-          <svg cIcon name="cilContrast" size="lg"></svg>
-        }
-        @default {
-          <svg cIcon name="cilSun" size="lg"></svg>
-        }
-      }
+      <svg cIcon [name]="icons()" size="lg"></svg>
     </button>
     <div cDropdownMenu>
-      <button
-        (click)="colorMode.set('light')"
-        [active]="colorMode()==='light'"
-        [routerLink]="[]"
-        cDropdownItem
-        class="d-flex align-items-center"
-      >
-        <svg cIcon class="me-2" name="cilSun" size="lg"></svg>
-        Light
-      </button>
-      <button
-        (click)="colorMode.set('dark')"
-        [active]="colorMode()==='dark'"
-        [routerLink]="[]"
-        cDropdownItem
-        class="d-flex align-items-center"
-      >
-        <svg cIcon class="me-2" name="cilMoon" size="lg"></svg>
-        Dark
-      </button>
-      <button
-        (click)="colorMode.set('auto')"
-        [active]="colorMode()==='auto'"
-        [routerLink]="[]"
-        cDropdownItem
-        class="d-flex align-items-center"
-      >
-        <svg cIcon class="me-2" name="cilContrast" size="lg"></svg>
-        Auto
-      </button>
+      @for (mode of colorModes; track mode.name) {
+        <button
+          (click)="colorMode.set(mode.name)"
+          [active]="colorMode()===mode.name"
+          [routerLink]="[]"
+          cDropdownItem
+          class="d-flex align-items-center"
+        >
+          <svg cIcon class="me-2" [name]="mode.icon" size="lg"></svg>
+          {{ mode.text }}
+        </button>
+      }
     </div>
   </c-dropdown>
 </ng-template>

src/app/layout/default-layout/default-header/default-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, DestroyRef, inject, Input } from '@angular/core';
+import { Component, computed, DestroyRef, inject, Input } from '@angular/core';
 import {
   AvatarComponent,
   BadgeComponent,
@@ -41,6 +41,17 @@ export class DefaultHeaderComponent extends HeaderComponent {
   readonly colorMode = this.#colorModeService.colorMode;
   readonly #destroyRef: DestroyRef = inject(DestroyRef);
 
+  readonly colorModes = [
+    { name: 'light', text: 'Light', icon: 'cilSun' },
+    { name: 'dark', text: 'Dark', icon: 'cilMoon' },
+    { name: 'auto', text: 'Auto', icon: 'cilContrast' }
+  ];
+
+  readonly icons = computed(() => {
+    const currentMode = this.colorMode();
+    return this.colorModes.find(mode=> mode.name === currentMode)?.icon ?? 'cilSun';
+  });
+
   constructor() {
     super();
     this.#colorModeService.localStorageItemName.set('coreui-free-angular-admin-template-theme-default');

src/app/views/buttons/buttons/buttons.component.ts

@@ -2,13 +2,21 @@ import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { IconDirective } from '@coreui/icons-angular';
 import { DocsExampleComponent } from '@docs-components/public-api';
-import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, ButtonDirective } from '@coreui/angular';
+import {
+  ButtonDirective,
+  CardBodyComponent,
+  CardComponent,
+  CardHeaderComponent,
+  ColComponent,
+  RowComponent,
+  TextColorDirective
+} from '@coreui/angular';
 
 @Component({
-    selector: 'app-buttons',
-    templateUrl: './buttons.component.html',
-    standalone: true,
-    imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ButtonDirective, IconDirective, RouterLink]
+  selector: 'app-buttons',
+  templateUrl: './buttons.component.html',
+  standalone: true,
+  imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ButtonDirective, IconDirective, RouterLink]
 })
 export class ButtonsComponent {