New Feature·Pushed May 1, 2026·M

Gitpulse logo gains brand mark, theme toggle arrives

The site now shows a proper branded logo with a recognizable pulse glyph, and visitors can switch between light, dark, or system theme—with their preference saved for return visits.

Gitpulse had a text-only logo. That changes now: a small pulse-line SVG glyph precedes the wordmark, giving the brand a recognizable mark that works at any size. The wordmark itself is capitalized to "Gitpulse" for consistency with the editorial reference. The bigger addition is a theme toggle. Visitors can now choose between light, dark, or system theme—the last respects the visitor's OS preference. Clicking the toggle cycles through all three: light → dark → system → back to light. The chosen preference persists in localStorage under [[code]]gitpulse-preferences[[/code]], so returning visitors see their preferred theme immediately. A small inline script in the document head applies the resolved theme before React hydrates. This prevents the flash of light theme that dark-system users would otherwise see on first paint. The [[code]]html[[/code]] element carries [[code]]suppressHydrationWarning[[/code]] since the script mutates [[code]]data-theme[[/code]] before the first render. The [[code]]ThemeProvider[[/code]] also listens for OS preference changes, so if a user is in system mode and switches their OS to dark, the site follows automatically. In the site app.

Technical description

This PR adds two related improvements to the site: a branded logo with an SVG mark, and a full theme system with three modes. **Logo refresh**: The wordmark moves from lowercase "gitpulse" to capitalized "Gitpulse" with a new [[code ref=1]]PulseMark[[/code]] component rendering an SVG glyph showing a pulse-line waveform. The glyph uses feed-gold; the wordmark uses foreground color. Both live inside the [[code ref=2]]Logo[[/code]] component rendered in the [[code ref=3]]TopBar[[/code]]. **Theme system**: The new [[code ref=4]]ThemeProvider[[/code]] wraps the entire app in [[code ref=5]]layout.tsx[[/code]]. It exposes [[code]]theme[[/code]] (the stored mode: light | dark | system) and [[code]]resolvedTheme[[/code]] (the actual color scheme after resolving system). State is initialized from [[code ref=6]]localStorage[[/code]] under [[code]]gitpulse-preferences[[/code]]; new visitors default to "system". When [[code]]theme[[/code]] is "system", the provider listens to [[code]]matchMedia[[/code]] changes so OS switches propagate live. The [[code]]ThemeToggle[[/code]] button lives in a new [[code ref=7]]RightSection[[/code]] of the [[code]]TopBar[[/code]]. Clicking calls [[code]]cycleTheme[[/code]], which advances through ['system', 'light', 'dark'] in a loop. **Anti-flash pattern**: A minified inline script runs in [[code ref=8]]<head>[[/code]] before React hydrates. It reads localStorage, resolves system preference, and sets [[code]]data-theme[[/code]] on [[code]]document.documentElement[[/code]]. The [[code]]html[[/code]] element carries [[code]]suppressHydrationWarning[[/code]] because the script mutates the DOM before React's first reconciliation. ````mermaid graph TD A[User visits site] --> B[Inline <head> script] B --> C{Stored preference?} C -->|No| D[Default to system] C -->|Yes| E[Read from localStorage] D --> F[Resolve theme] E --> F F --> G[Set data-theme on <html>] G --> H[React hydrates with correct theme] I[ThemeToggle click] --> J[Update localStorage] J --> K[Update data-theme] L[OS preference changes] --> M[Only in system mode] M --> K ```` **Files at a glance**: - [[code]]site/src/app/layout.tsx[[/code]] — Wrapped body in ThemeProvider, added inline anti-flash script, added suppressHydrationWarning - [[code]]site/src/components/TopBar.tsx[[/code]] — Added RightSection with ThemeToggle, added PulseMark SVG, updated Logo styling - [[code]]site/src/components/ThemeToggle.tsx[[/code]] — New component: cycle button with Sun/Moon/Monitor icons - [[code]]site/src/providers/ThemeProvider.tsx[[/code]] — New context: theme state, persistence, system preference tracking