diff --git a/apps/taiga-lumbermill/src/components/app/app.component.html b/apps/taiga-lumbermill/src/components/app/app.component.html index c15b02865..b54876d26 100644 --- a/apps/taiga-lumbermill/src/components/app/app.component.html +++ b/apps/taiga-lumbermill/src/components/app/app.component.html @@ -1,3 +1,3 @@ - + diff --git a/apps/taiga-lumbermill/src/components/app/app.component.ts b/apps/taiga-lumbermill/src/components/app/app.component.ts index 44b120b75..3458d60b9 100644 --- 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 index e11ac98dc..e39e5dddf 100644 --- 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" > - A very very long project + {{ themeService.theme }} - - + @for (theme of themeService.themes; track $index) { + + } diff --git a/apps/taiga-lumbermill/src/components/navigation/navigation.component.ts b/apps/taiga-lumbermill/src/components/navigation/navigation.component.ts index 6393e7017..1f4980ca8 100644 --- 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,6 +60,7 @@ 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'), ); @@ -66,4 +68,10 @@ export class NavigationComponent { 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 new file mode 100644 index 000000000..0b2b5f174 --- /dev/null +++ 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); + } +}