matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: fix theme configuration?

Browse Source 
Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
mkljczk
2025-01-14 09:38:22 +01:00
parent ba6976349c
commit cc4d600cd0
3 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/pl-fe/src/features/theme-editor/index.tsx
View File

@ -15,6 +15,7 @@ import ColorPicker from 'pl-fe/features/pl-fe-config/components/color-picker';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
import { normalizeColors } from 'pl-fe/hooks/use-theme-css';
import { plFeConfigSchema } from 'pl-fe/normalizers/pl-fe/pl-fe-config';
import toast from 'pl-fe/toast';
import { download } from 'pl-fe/utils/download';
@ -50,11 +51,11 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const plFe = usePlFeConfig();
const plFeConfig = usePlFeConfig();
const host = useAppSelector(state => getHost(state));
const rawConfig = useAppSelector(state => state.plfe);
const [colors, setColors] = useState(plFe.colors);
const [colors, setColors] = useState(normalizeColors(plFeConfig));
const [submitting, setSubmitting] = useState(false);
const [resetKey, setResetKey] = useState(crypto.randomUUID());
@ -85,7 +86,7 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
};
const resetTheme = () => {
setTheme(plFe.colors);
setTheme(normalizeColors(plFeConfig));
};
const updateTheme = async () => {
@ -94,8 +95,8 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
};
const restoreDefaultTheme = () => {
const colors = v.parse(plFeConfigSchema, { brandColor: '#d80482' }).colors;
setTheme(colors);
const config = v.parse(plFeConfigSchema, { brandColor: '#d80482' });
setTheme(normalizeColors(config));
};
const exportTheme = () => {

5
packages/pl-fe/src/hooks/use-theme-css.ts
View File

@ -38,7 +38,7 @@ const DEFAULT_COLORS = {
const normalizeColors = (theme: Partial<Pick<PlFeConfig, 'brandColor' | 'accentColor' | 'colors'>>) => {
const brandColor: string = theme.brandColor || theme.colors?.primary?.['500'] || '#d80482';
const accentColor: string = theme.accentColor || theme.colors?.accent?.['500'] || '' || generateAccent(brandColor);
const accentColor: string = theme.accentColor || theme.colors?.accent?.['500'] || generateAccent(brandColor) || '';
const colors = {
...theme.colors,
@ -48,6 +48,7 @@ const normalizeColors = (theme: Partial<Pick<PlFeConfig, 'brandColor' | 'accentC
const normalizedColors = toTailwind({
brandColor,
accentColor,
// @ts-ignore
colors,
});
@ -82,4 +83,4 @@ const useThemeCss = (overwriteConfig?: PlFeConfig) => {
}, [demo, plFeConfig, theme]);
};
export { useThemeCss };
export { normalizeColors, useThemeCss };

10
packages/pl-fe/src/normalizers/pl-fe/pl-fe-config.ts
View File

@ -43,7 +43,15 @@ const plFeConfigSchema = coerceObject({
logoDarkMode: v.fallback(v.nullable(v.string()), null),
brandColor: v.fallback(v.string(), ''),
accentColor: v.fallback(v.string(), ''),
colors: v.any(),
colors: v.fallback(v.nullable(v.objectWithRest(
{
'accent-blue': v.string(),
'gradient-end': v.string(),
'gradient-start': v.string(),
greentext: v.string(),
},
v.record(v.string(), v.string()),
)), null),
copyright: v.fallback(v.string(), `♥${new Date().getFullYear()}. Copying is an act of love. Please copy and share.`),
defaultSettings: v.fallback(v.record(v.string(), v.any()), {}),
gdpr: v.fallback(v.boolean(), false),