48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { themes } from './index';
|
|
|
|
export interface ITheme {
|
|
[key: string]: string;
|
|
}
|
|
|
|
export interface IThemes {
|
|
[key: string]: ITheme;
|
|
}
|
|
|
|
export interface IMappedTheme {
|
|
[key: string]: string | null;
|
|
}
|
|
|
|
export const mapTheme = (variables: ITheme): IMappedTheme => {
|
|
return {
|
|
'--color-primary': variables.primary || '',
|
|
'--color-secondary': variables.secondary || '',
|
|
'--color-positive': variables.positive || '',
|
|
'--color-negative': variables.negative || '',
|
|
'--color-text-primary': variables.textPrimary || '',
|
|
'--background-primary': variables.backgroundPrimary || '',
|
|
'--background-sec': variables.backgroundSecondary || '',
|
|
'--font-size-small': variables.fontSmall || '18px',
|
|
'--font-size-medium': variables.fontMedium || '30px',
|
|
'--font-size-large': variables.fontLarge || '45px',
|
|
};
|
|
};
|
|
|
|
export const applyTheme = (theme: string): void => {
|
|
const themeObject: IMappedTheme = mapTheme(themes[theme]);
|
|
if (!themeObject) return;
|
|
|
|
const root = document.documentElement;
|
|
|
|
Object.keys(themeObject).forEach((property) => {
|
|
if (property === 'name') {
|
|
return;
|
|
}
|
|
|
|
root.style.setProperty(property, themeObject[property]);
|
|
});
|
|
};
|
|
|
|
export const extend = (extending: ITheme, newTheme: ITheme): ITheme => {
|
|
return { ...extending, ...newTheme };
|
|
};
|