paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge pull request #535 from the-luap/fix/public-site-dark-theme-contrast

Browse Source 
Fix public site contrast for dark themes
This commit is contained in:
Paul Nothaft
2026-05-20 08:53:02 +02:00
committed by GitHub
parent e0ad7ac2a7 8b72721812
commit 83fc58a523
5 changed files with 67 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/server.js
+4
View File
@@ -187,6 +187,10 @@ function composeInlineStyles(payload) {
--brand-accent: ${branding.colors.accent}; --brand-accent: ${branding.colors.accent};
--brand-background: ${branding.colors.background}; --brand-background: ${branding.colors.background};
--brand-text: ${branding.colors.text}; --brand-text: ${branding.colors.text};
--brand-surface: ${branding.colors.surface || '#ffffff'};
--brand-elevated: ${branding.colors.elevated || '#f5f5f5'};
--brand-border: ${branding.colors.border || '#e5e5e5'};
--brand-muted-text: ${branding.colors.mutedText || '#737373'};
}`); }`);
if (payload.baseCss) { if (payload.baseCss) {
backend/src/__tests__/publicSiteService.test.js
+29
View File
@@ -159,4 +159,33 @@ describe('publicSiteService', () => {
expect(payload.branding.colors.accentDark).toBe('#5C8762'); expect(payload.branding.colors.accentDark).toBe('#5C8762');
}); });
it('exposes surface tokens and uses theme-aware public site CSS', async () => {
const publicSiteRows = buildPublicSiteRows({});
const brandingRows = buildBrandingRows({
themeConfig: {
primaryColor: '#014E4E',
accentColor: '#017C7C',
backgroundColor: '#0D0D0D',
surfaceColor: '#111414',
elevatedColor: '#182222',
surfaceBorderColor: '#1E2E2E',
textColor: '#EBEBEB',
mutedTextColor: '#B6C2C2'
}
});
db.mockImplementationOnce(() => ({ whereIn: () => Promise.resolve(publicSiteRows) }));
db.mockImplementationOnce(() => ({ whereIn: () => Promise.resolve(brandingRows) }));
const payload = await getPublicSitePayload({ bypassCache: true });
expect(payload.branding.colors.surface).toBe('#111414');
expect(payload.branding.colors.elevated).toBe('#182222');
expect(payload.branding.colors.border).toBe('#1E2E2E');
expect(payload.branding.colors.mutedText).toBe('#B6C2C2');
expect(payload.baseCss).toContain('var(--brand-surface');
expect(payload.baseCss).toContain('var(--brand-muted-text');
});
}); });
backend/src/constants/publicSiteDefaults.js
+29 -29
View File
@@ -165,7 +165,7 @@ const DEFAULT_PUBLIC_SITE_CSS = `
body { body {
margin: 0; margin: 0;
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(180deg, var(--brand-background), #ffffff 55%); background: linear-gradient(180deg, var(--brand-background), var(--brand-surface, #ffffff) 55%);
color: var(--brand-text); color: var(--brand-text);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
@@ -184,16 +184,16 @@ img {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.03), transparent 65%); background: linear-gradient(180deg, var(--brand-elevated, rgba(15, 23, 42, 0.03)), transparent 65%);
} }
.site-header { .site-header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 30; z-index: 30;
background: rgba(255, 255, 255, 0.92); background: var(--brand-surface, rgba(255, 255, 255, 0.92));
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(15, 23, 42, 0.08); border-bottom: 1px solid var(--brand-border, rgba(15, 23, 42, 0.08));
} }
.header-inner { .header-inner {
@@ -238,14 +238,14 @@ img {
.brand-tagline { .brand-tagline {
margin: 0; margin: 0;
font-size: 0.85rem; font-size: 0.85rem;
color: rgba(15, 23, 42, 0.65); color: var(--brand-muted-text, rgba(15, 23, 42, 0.65));
} }
.site-nav { .site-nav {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
font-size: 0.95rem; font-size: 0.95rem;
color: rgba(15, 23, 42, 0.65); color: var(--brand-muted-text, rgba(15, 23, 42, 0.65));
} }
.site-nav a { .site-nav a {
@@ -334,7 +334,7 @@ img {
.hero__lead { .hero__lead {
margin: 0; margin: 0;
max-width: 32rem; max-width: 32rem;
color: rgba(15, 23, 42, 0.72); color: var(--brand-muted-text, rgba(15, 23, 42, 0.72));
font-size: 1.05rem; font-size: 1.05rem;
line-height: 1.6; line-height: 1.6;
} }
@@ -360,7 +360,7 @@ img {
.hero__stats dd { .hero__stats dd {
margin: 0.35rem 0 0; margin: 0.35rem 0 0;
color: rgba(15, 23, 42, 0.6); color: var(--brand-muted-text, rgba(15, 23, 42, 0.6));
font-size: 0.95rem; font-size: 0.95rem;
} }
@@ -372,9 +372,9 @@ img {
.deck { .deck {
border-radius: 20px; border-radius: 20px;
padding: 1.75rem; padding: 1.75rem;
background: #fff; background: var(--brand-surface, #fff);
box-shadow: 0 35px 60px -35px rgba(15, 23, 42, 0.35); box-shadow: 0 35px 60px -35px rgba(15, 23, 42, 0.35);
border: 1px solid rgba(15, 23, 42, 0.08); border: 1px solid var(--brand-border, rgba(15, 23, 42, 0.08));
display: grid; display: grid;
gap: 1.35rem; gap: 1.35rem;
} }
@@ -384,7 +384,7 @@ img {
} }
.deck--secondary { .deck--secondary {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(15, 23, 42, 0.03)); background: linear-gradient(135deg, var(--brand-surface, #fff), var(--brand-elevated, rgba(15, 23, 42, 0.03)));
} }
.deck__header { .deck__header {
@@ -411,14 +411,14 @@ img {
padding-left: 1.1rem; padding-left: 1.1rem;
display: grid; display: grid;
gap: 0.65rem; gap: 0.65rem;
color: rgba(15, 23, 42, 0.68); color: var(--brand-muted-text, rgba(15, 23, 42, 0.68));
} }
.deck__quote { .deck__quote {
margin: 0; margin: 0;
font-size: 1.05rem; font-size: 1.05rem;
line-height: 1.7; line-height: 1.7;
color: rgba(15, 23, 42, 0.78); color: var(--brand-text, rgba(15, 23, 42, 0.78));
} }
.deck__author { .deck__author {
@@ -458,7 +458,7 @@ img {
.section-head p { .section-head p {
margin: 0; margin: 0;
color: rgba(15, 23, 42, 0.65); color: var(--brand-muted-text, rgba(15, 23, 42, 0.65));
} }
.feature-grid { .feature-grid {
@@ -469,10 +469,10 @@ img {
} }
.feature-grid article { .feature-grid article {
background: rgba(255, 255, 255, 0.9); background: var(--brand-surface, rgba(255, 255, 255, 0.9));
border-radius: 16px; border-radius: 16px;
padding: 1.75rem; padding: 1.75rem;
border: 1px solid rgba(15, 23, 42, 0.08); border: 1px solid var(--brand-border, rgba(15, 23, 42, 0.08));
box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.28); box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.28);
} }
@@ -504,17 +504,17 @@ img {
.workflow__steps p { .workflow__steps p {
margin: 0; margin: 0;
color: rgba(15, 23, 42, 0.65); color: var(--brand-muted-text, rgba(15, 23, 42, 0.65));
} }
.workflow__browser { .workflow__browser {
margin: 0; margin: 0;
background: rgba(15, 23, 42, 0.05); background: var(--brand-elevated, rgba(15, 23, 42, 0.05));
border-radius: 20px; border-radius: 20px;
border: 1px solid rgba(15, 23, 42, 0.1); border: 1px solid var(--brand-border, rgba(15, 23, 42, 0.1));
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
color: rgba(15, 23, 42, 0.55); color: var(--brand-muted-text, rgba(15, 23, 42, 0.55));
font-size: 0.85rem; font-size: 0.85rem;
} }
@@ -526,9 +526,9 @@ img {
} }
.collection-showcase article { .collection-showcase article {
background: rgba(255, 255, 255, 0.92); background: var(--brand-surface, rgba(255, 255, 255, 0.92));
border-radius: 18px; border-radius: 18px;
border: 1px solid rgba(15, 23, 42, 0.08); border: 1px solid var(--brand-border, rgba(15, 23, 42, 0.08));
padding: 1.5rem; padding: 1.5rem;
box-shadow: 0 18px 45px -32px rgba(15, 23, 42, 0.3); box-shadow: 0 18px 45px -32px rgba(15, 23, 42, 0.3);
} }
@@ -543,9 +543,9 @@ img {
.story-grid figure { .story-grid figure {
margin: 0; margin: 0;
padding: 1.75rem; padding: 1.75rem;
background: rgba(255, 255, 255, 0.95); background: var(--brand-surface, rgba(255, 255, 255, 0.95));
border-radius: 20px; border-radius: 20px;
border: 1px solid rgba(15, 23, 42, 0.08); border: 1px solid var(--brand-border, rgba(15, 23, 42, 0.08));
box-shadow: 0 18px 42px -32px rgba(15, 23, 42, 0.28); box-shadow: 0 18px 42px -32px rgba(15, 23, 42, 0.28);
} }
@@ -553,12 +553,12 @@ img {
margin: 0 0 1.2rem; margin: 0 0 1.2rem;
font-size: 1.05rem; font-size: 1.05rem;
line-height: 1.7; line-height: 1.7;
color: rgba(15, 23, 42, 0.8); color: var(--brand-text, rgba(15, 23, 42, 0.8));
} }
.story-grid figcaption { .story-grid figcaption {
font-weight: 600; font-weight: 600;
color: rgba(15, 23, 42, 0.7); color: var(--brand-muted-text, rgba(15, 23, 42, 0.7));
} }
.cta { .cta {
@@ -625,8 +625,8 @@ img {
.site-footer { .site-footer {
padding: 3rem 1.5rem; padding: 3rem 1.5rem;
background: rgba(15, 23, 42, 0.05); background: var(--brand-elevated, rgba(15, 23, 42, 0.05));
border-top: 1px solid rgba(15, 23, 42, 0.08); border-top: 1px solid var(--brand-border, rgba(15, 23, 42, 0.08));
} }
.footer-inner { .footer-inner {
@@ -644,7 +644,7 @@ img {
.footer-inner p { .footer-inner p {
margin: 0; margin: 0;
color: rgba(15, 23, 42, 0.65); color: var(--brand-muted-text, rgba(15, 23, 42, 0.65));
line-height: 1.6; line-height: 1.6;
} }
frontend/src/pages/admin/CMSPage.tsx
+1 -1
View File
@@ -303,7 +303,7 @@ export const CMSPage: React.FC = () => {
const branding = publicSiteBranding || publicSiteDefaults?.branding; const branding = publicSiteBranding || publicSiteDefaults?.branding;
const substitutedHtml = applyBrandTokens(publicSiteSanitizedHtml, branding); const substitutedHtml = applyBrandTokens(publicSiteSanitizedHtml, branding);
const inlineStyles = [ const inlineStyles = [
branding ? `:root {\n --brand-primary: ${branding.colors.primary};\n --brand-accent: ${branding.colors.accent};\n --brand-background: ${branding.colors.background};\n --brand-text: ${branding.colors.text};\n}` : '', branding ? `:root {\n --brand-primary: ${branding.colors.primary};\n --brand-accent: ${branding.colors.accent};\n --brand-background: ${branding.colors.background};\n --brand-text: ${branding.colors.text};\n --brand-surface: ${branding.colors.surface || '#ffffff'};\n --brand-elevated: ${branding.colors.elevated || '#f5f5f5'};\n --brand-border: ${branding.colors.border || '#e5e5e5'};\n --brand-muted-text: ${branding.colors.mutedText || '#737373'};\n}` : '',
publicSiteBaseCss, publicSiteBaseCss,
publicSiteSanitizedCss ? `/* Custom styles */\n${publicSiteSanitizedCss}` : '' publicSiteSanitizedCss ? `/* Custom styles */\n${publicSiteSanitizedCss}` : ''
].filter(Boolean).join('\n\n'); ].filter(Boolean).join('\n\n');
frontend/src/services/settings.service.ts
+4
View File
@@ -152,6 +152,10 @@ export interface PublicSiteBranding {
accent: string; accent: string;
background: string; background: string;
text: string; text: string;
surface?: string;
elevated?: string;
border?: string;
mutedText?: string;
}; };
} }