42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { DOCUMENT } from '@/infra/platform/injection';
|
|
import { LocalStorageService } from '@/infra/storage/web-storage.service';
|
|
import { Injectable, inject } from '@outposts/injection-js';
|
|
|
|
export type PreferColorSchemaType = 'dark' | 'light' | 'system';
|
|
export type PreferColorSchemaClass = 'dark' | 'light';
|
|
|
|
@Injectable()
|
|
export class ThemeService {
|
|
document = inject(DOCUMENT);
|
|
localStorage = inject(LocalStorageService);
|
|
|
|
get systemColorSchema(): PreferColorSchemaClass {
|
|
return this.document.defaultView?.matchMedia('(prefers-color-scheme: dark)')
|
|
.matches
|
|
? 'dark'
|
|
: 'light';
|
|
}
|
|
|
|
private getColorSchemaByType(
|
|
themeType: PreferColorSchemaType
|
|
): PreferColorSchemaClass {
|
|
this.document.documentElement.classList.remove('dark', 'light');
|
|
if (themeType === 'dark' || themeType === 'light') {
|
|
return themeType;
|
|
}
|
|
return this.systemColorSchema;
|
|
}
|
|
|
|
get colorSchema() {
|
|
const theme = this.localStorage.getItem('prefers-color-scheme');
|
|
return this.getColorSchemaByType(theme as PreferColorSchemaType);
|
|
}
|
|
|
|
set colorSchema(themeType: PreferColorSchemaType) {
|
|
this.localStorage.setItem('prefers-color-scheme', themeType);
|
|
const themeClass = this.getColorSchemaByType(themeType);
|
|
this.document.documentElement.classList.remove('dark', 'light');
|
|
this.document.documentElement.classList.add(themeClass);
|
|
}
|
|
}
|