68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { Injectable } from '@angular/core';
|
|
|
|
import { StationConfig } from '../interfaces/station-config';
|
|
|
|
/** CSS custom property names mapped from StationConfig color fields. */
|
|
const COLOR_MAP: ReadonlyArray<{ field: keyof StationConfig; prop: string }> = [
|
|
{ field: 'color_primary', prop: '--color-primary' },
|
|
{ field: 'color_primary_light', prop: '--color-primary-light' },
|
|
{ field: 'color_primary_dark', prop: '--color-primary-dark' },
|
|
{ field: 'color_primary_muted', prop: '--color-primary-muted' },
|
|
{ field: 'color_accent', prop: '--color-accent' },
|
|
{ field: 'color_accent_light', prop: '--color-accent-light' },
|
|
{ field: 'color_accent_dark', prop: '--color-accent-dark' },
|
|
{ field: 'color_accent_muted', prop: '--color-accent-muted' },
|
|
{ field: 'color_background', prop: '--color-cream' },
|
|
{ field: 'color_text', prop: '--color-dark' },
|
|
{ field: 'color_success', prop: '--color-success' },
|
|
{ field: 'color_danger', prop: '--color-danger' },
|
|
{ field: 'color_info', prop: '--color-info' },
|
|
];
|
|
|
|
/** Build a gradient CSS value from three color stops. */
|
|
function gradient(from: string, mid: string, to: string): string {
|
|
return `linear-gradient(135deg, ${from} 0%, ${mid} 40%, ${to} 100%)`;
|
|
}
|
|
|
|
@Injectable({
|
|
providedIn: 'root',
|
|
})
|
|
export class ThemeService {
|
|
/**
|
|
* Apply color theme from StationConfig as CSS custom properties on `:root`.
|
|
* Also generates derived gradient variables.
|
|
*/
|
|
apply(config: StationConfig): void {
|
|
const root = document.documentElement.style;
|
|
|
|
for (const { field, prop } of COLOR_MAP) {
|
|
const value = (config as any)[field];
|
|
if (value) {
|
|
root.setProperty(prop, value);
|
|
}
|
|
}
|
|
|
|
// Derived gradients
|
|
root.setProperty(
|
|
'--sky-gradient',
|
|
gradient(
|
|
config.color_primary_dark,
|
|
config.color_primary,
|
|
config.color_primary_light,
|
|
),
|
|
);
|
|
root.setProperty(
|
|
'--sunset-gradient',
|
|
gradient(
|
|
config.color_accent_dark,
|
|
config.color_accent,
|
|
config.color_accent_light,
|
|
),
|
|
);
|
|
root.setProperty(
|
|
'--mixed-gradient',
|
|
`linear-gradient(135deg, ${config.color_primary_dark} 0%, ${config.color_primary} 50%, ${config.color_accent} 100%)`,
|
|
);
|
|
}
|
|
}
|