New Feature·Pushed May 9, 2026·S

Site operators can now customize link colors

A new theme.linkColor config option lets site operators set their preferred accent color, applied to links and hover states.

Site operators can now customize link colors independently from the existing accent color. The new [[code]]theme.linkColor[[/code]] config option accepts any hex color and applies it to three CSS custom properties: [[code]]--accent-primary[[/code]] for standard links, [[code]]--accent-hover[[/code]] for hover states, and [[code]]--accent[[/code]] for general accent usage. This gives operators finer control over their site's visual identity without modifying the gold accent color that already controls feed styling and tertiary accents. The option is validated at config load time, ensuring only valid hex colors are accepted. In the [[code]]@gitpulse/site[[/code]] app, these CSS overrides are injected at the root layout level so they cascade throughout the entire site.

Technical description

This PR introduces a new optional [[code ref=4]]linkColor[[/code]] field to the theme configuration, allowing site operators to set a custom accent color specifically for links and interactive elements. The configuration flows through three layers. First, the [[code ref=2]]ThemeSchema[[/code]] in [[code]]cli/src/project-config.ts[[/code]] validates the field as an optional hex color string using the same regex pattern as [[code]]accentColor[[/code]]. The [[code ref=1]]RuntimeConfig[[/code]] interface in [[code]]cli/src/config.ts[[/code]] and [[code ref=3]]RepoInfo[[/code]] in [[code]]cli/src/github.ts[[/code]] both receive the new field, ensuring type consistency across the CLI. On the site side, [[code]]site/src/lib/repo.ts[[/code]] exports a [[code ref=4]]linkColor[[/code]] function that mirrors the existing [[code]]accentColor[[/code]] function — it extracts the field from repo config and validates it against the same hex regex. This function is called from [[code ref=5]]RootLayout[[/code]] in [[code]]site/src/app/layout.tsx[[/code]]. In the layout, the CSS generation logic was refactored to build an array of overrides that is then joined into a single CSS string. If [[code]]linkColor[[/code]] is set, it adds three properties: [[code]]--accent-primary[[/code]], [[code]]--accent-hover[[/code]], and [[code]]--accent[[/code]]. The existing [[code]]accentColor[[/code]] continues to control [[code]]--feed-gold[[/code]] and [[code]]--accent-tertiary[[/code]], keeping feed styling intact while letting operators customize link colors separately. ````tsx file=site/src/app/layout.tsx const overrides: string[] = []; if (accent) overrides.push([[code]]--feed-gold:${accent}[[/code]], [[code]]--accent-tertiary:${accent}[[/code]]); if (link) overrides.push( [[code]]--accent-primary:${link}[[/code]], [[code]]--accent-hover:${link}[[/code]], [[code]]--accent:${link}[[/code]], ); const themeOverrideCss = overrides.length ? [[code]]:root,[data-theme='light'],[data-theme='dark']{${overrides.join(';')};}[[/code]] : null; ```` **Files at a Glance** - [[code]]cli/src/config.ts[[/code]] — Added linkColor to RuntimeConfig interface - [[code]]cli/src/github.ts[[/code]] — Added linkColor to RepoInfo interface - [[code]]cli/src/project-config.ts[[/code]] — Added linkColor to ThemeSchema validation - [[code]]site/src/lib/repo.ts[[/code]] — Added linkColor extraction function - [[code]]site/src/app/layout.tsx[[/code]] — Apply linkColor to CSS custom properties