import {PixieTheme} from '../config/default-config';
import {CssTheme} from '../common/ui/themes/css-theme';
import {DEFAULT_THEMES} from '../config/default-themes';
import color from 'color';
export function pixieThemeToCssTheme(theme: PixieTheme): CssTheme {
const defaultTheme = theme.isDark
? DEFAULT_THEMES.find(t => t.isDark)
: DEFAULT_THEMES.find(t => !t.isDark);
const mergedTheme = {
...defaultTheme,
...theme,
colors: {
...defaultTheme?.colors,
...theme.colors,
},
};
const parsedColors = Object.entries(mergedTheme.colors).map(
([key, value]) => {
return [key, parseThemeValue(value)];
}
);
return {
id: mergedTheme.name,
name: mergedTheme.name,
colors: Object.fromEntries(parsedColors),
is_dark: mergedTheme.isDark,
};
}
function parseThemeValue(value: string) {
// opacity or rgb string: 0 0 0
if (value.endsWith('%') || value.split(' ').length === 3) {
return value;
}
// convert user provided color to rgb string
return color(value).rgb().array().slice(0, 3).join(' ');
}