jbc.lol
unoffical wafrn mirror
wafrn.net
atproto
social-network
activitypub
1import { Component, WritableSignal, inject } from '@angular/core'
2import { MatFormFieldModule } from '@angular/material/form-field'
3import { MatSelectChange, MatSelectModule } from '@angular/material/select'
4import { TranslatePipe } from '@ngx-translate/core'
5import { KeyValueTypedPipe } from 'src/app/pipes/keyvaluetyped.pipe'
6import {
7 AdditionalStyleMode,
8 additionalStyleModesData,
9 Theme,
10 themeData,
11 themeGroupList,
12 LightDarkMode,
13 lightDarkModeData,
14 ThemeService
15} from 'src/app/services/theme.service'
16
17@Component({
18 selector: 'app-setting-theme-switcher',
19 imports: [MatFormFieldModule, MatSelectModule, TranslatePipe, KeyValueTypedPipe],
20 templateUrl: './setting-theme-switcher.component.html',
21 styleUrl: './setting-theme-switcher.component.scss'
22})
23export class SettingThemeSwitcherComponent {
24 private themeService = inject(ThemeService);
25
26 // light/dark
27 lightDarkMode: WritableSignal<LightDarkMode>
28 colorThemeData = lightDarkModeData
29
30 // colors
31 colorScheme: WritableSignal<Theme>
32 colorSchemeData = themeData
33 colorSchemeGroupList = themeGroupList
34
35 // style modes
36 additionalStyleModes
37 additionalStyleModesSelect
38 additionalStyleModesData = additionalStyleModesData
39
40 constructor() {
41 const themeService = this.themeService;
42
43 this.lightDarkMode = themeService.lightDarkMode
44
45 this.colorScheme = themeService.theme
46
47 this.additionalStyleModes = themeService.additionalStyleModes
48 this.additionalStyleModesSelect = Object.entries(this.additionalStyleModes)
49 .filter(([_, enabled]) => enabled())
50 .map(([val, _]) => val) as AdditionalStyleMode[]
51 }
52
53 setLightDarkMode(event: MatSelectChange) {
54 this.themeService.setLightDarkMode(event.value)
55 }
56 setTheme(event: MatSelectChange) {
57 console.log('setting theme to', event.value)
58 this.themeService.setTheme(event.value)
59 }
60 setAdditionalStyleModes(event: MatSelectChange) {
61 this.additionalStyleModesSelect = event.value as AdditionalStyleMode[]
62
63 const allModes = Object.keys(this.additionalStyleModesData) as AdditionalStyleMode[]
64 const enabledModes = this.additionalStyleModesSelect
65 const disabledModes = allModes.filter((mode) => !this.additionalStyleModesSelect.includes(mode))
66 enabledModes.forEach((mode) => this.additionalStyleModes[mode].set(true))
67 disabledModes.forEach((mode) => this.additionalStyleModes[mode].set(false))
68 this.themeService.syncAdditionalStyleMode()
69 }
70}