feat: Add theme switcher (#29)

* chore: Add theme switcher * chore: change location of theme swither * chore: change names * chore: use control-flow syntax
taiga-family · Jul 26, 2024 · a0861ef · a0861ef
1 parent ba3abfc
commit a0861ef
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 13 deletions.
diff --git a/apps/taiga-lumbermill/src/components/app/app.component.html b/apps/taiga-lumbermill/src/components/app/app.component.html
@@ -1,3 +1,3 @@
-<tui-root>
+<tui-root [attr.tuiTheme]="themeService.theme">
     <app-navigation />
 </tui-root>
diff --git a/apps/taiga-lumbermill/src/components/app/app.component.ts b/apps/taiga-lumbermill/src/components/app/app.component.ts
@@ -1,7 +1,8 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiRoot} from '@taiga-ui/core';
 
+import {ThemeService} from '../../services/theme.service';
 import {NavigationComponent} from '../navigation/navigation.component';
 
 @Component({
@@ -12,5 +13,6 @@ import {NavigationComponent} from '../navigation/navigation.component';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
+    protected themeService = inject(ThemeService);
     public title = 'taiga-lumbermill';
 }
diff --git a/apps/taiga-lumbermill/src/components/navigation/navigation.component.html b/apps/taiga-lumbermill/src/components/navigation/navigation.component.html
@@ -15,21 +15,27 @@
         appearance="secondary"
         tuiButton
         tuiChevron
-        tuiDropdownOpen
         [tuiDropdown]="products"
+        [(tuiDropdownOpen)]="openTheme"
     >
-        <span tuiFade>A very very long project</span>
+        <span tuiFade>{{ themeService.theme }}</span>
         <ng-template #products>
             <tui-data-list size="s">
-                <button tuiOption>
-                    A very very long project
-                    <tui-icon
-                        icon="@tui.check"
-                        [style.font-size.em]="1"
-                        [style.margin-left.rem]="0.5"
-                    />
-                </button>
-                <button tuiOption>Something else</button>
+                @for (theme of themeService.themes; track $index) {
+                    <button
+                        tuiOption
+                        [value]="theme"
+                        (click)="chooseTheme(theme)"
+                    >
+                        {{ theme }}
+                        <tui-icon
+                            *ngIf="themeService.theme === theme"
+                            icon="@tui.check"
+                            [style.font-size.em]="1"
+                            [style.margin-left.rem]="0.5"
+                        />
+                    </button>
+                }
             </tui-data-list>
         </ng-template>
     </button>

diff --git a/apps/taiga-lumbermill/src/components/navigation/navigation.component.ts b/apps/taiga-lumbermill/src/components/navigation/navigation.component.ts
@@ -25,6 +25,7 @@ import {TuiCardLarge, TuiHeader, TuiNavigation} from '@taiga-ui/layout';
 import {map} from 'rxjs';
 
 import {IotComponent} from '../../dashboards/iot/iot.component';
+import {ThemeService} from '../../services/theme.service';
 
 @Component({
     standalone: true,
@@ -59,11 +60,18 @@ import {IotComponent} from '../../dashboards/iot/iot.component';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavigationComponent {
+    protected themeService = inject(ThemeService);
     protected readonly mobile$ = inject(TuiBreakpointService).pipe(
         map((key) => key === 'mobile'),
     );
 
     protected open = false;
     protected expanded = false;
     protected submenu = false;
+    protected openTheme = false;
+
+    public chooseTheme(theme: string): void {
+        this.themeService.theme = theme;
+        this.openTheme = false;
+    }
 }
diff --git a/apps/taiga-lumbermill/src/services/theme.service.ts b/apps/taiga-lumbermill/src/services/theme.service.ts
@@ -0,0 +1,30 @@
+import {inject, Injectable} from '@angular/core';
+import {LOCAL_STORAGE} from '@ng-web-apis/common';
+import {tuiCreateToken} from '@taiga-ui/cdk';
+
+export const TUI_THEME_KEY = tuiCreateToken('data-tui-theme');
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ThemeService {
+    private readonly storage = inject(LOCAL_STORAGE);
+    private readonly key = inject(TUI_THEME_KEY);
+    public themes = ['light', 'dark'];
+
+    public get theme(): string {
+        const value = this.storage.getItem(this.key);
+
+        if (value === null) {
+            this.storage.setItem(this.key, 'light');
+
+            return 'light';
+        }
+
+        return value;
+    }
+
+    public set theme(theme: string) {
+        this.storage.setItem(this.key, theme);
+    }
+}