65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import '../../design-system/styles.css';
|
|
|
|
export const designSystemStylesheet = '../../design-system/styles.css';
|
|
|
|
export type DesignSystemThemeId = 'warm' | 'cool' | 'dual';
|
|
|
|
export type DesignSystemTheme = {
|
|
id: DesignSystemThemeId;
|
|
label: string;
|
|
description: string;
|
|
};
|
|
|
|
export const defaultDesignSystemTheme: DesignSystemThemeId = 'warm';
|
|
export const designSystemThemeStorageKey = 'ctv-theme';
|
|
|
|
export const designSystemThemes: DesignSystemTheme[] = [
|
|
{
|
|
id: 'warm',
|
|
label: 'Warm chicory',
|
|
description: 'Warm chicory theme'
|
|
},
|
|
{
|
|
id: 'cool',
|
|
label: 'Cool periwinkle',
|
|
description: 'Cool periwinkle theme'
|
|
},
|
|
{
|
|
id: 'dual',
|
|
label: 'Dual accent',
|
|
description: 'Dual accent theme'
|
|
}
|
|
];
|
|
|
|
function isDesignSystemTheme(value: string | null): value is DesignSystemThemeId {
|
|
return value === 'warm' || value === 'cool' || value === 'dual';
|
|
}
|
|
|
|
function getStorage(): Storage | undefined {
|
|
if (typeof window === 'undefined') {
|
|
return undefined;
|
|
}
|
|
|
|
try {
|
|
return window.localStorage;
|
|
} catch {
|
|
return undefined;
|
|
}
|
|
}
|
|
|
|
export function getStoredDesignSystemTheme(): DesignSystemThemeId {
|
|
const storedTheme = getStorage()?.getItem(designSystemThemeStorageKey) ?? null;
|
|
|
|
return isDesignSystemTheme(storedTheme) ? storedTheme : defaultDesignSystemTheme;
|
|
}
|
|
|
|
export function applyDesignSystemTheme(theme: DesignSystemThemeId): void {
|
|
if (theme === defaultDesignSystemTheme) {
|
|
document.documentElement.removeAttribute('data-theme');
|
|
} else {
|
|
document.documentElement.dataset.theme = theme;
|
|
}
|
|
|
|
getStorage()?.setItem(designSystemThemeStorageKey, theme);
|
|
}
|