New Feature·Pushed May 1, 2026·M

Theme toggle and logo updated on site

Gitpulse's site now respects system color preferences with a theme toggle, and carries a proper branded logo with a recognizable pulse glyph.

The website now gives visitors control over their visual experience. A theme toggle in the top bar cycles through light, dark, and system modes — respecting whatever the visitor has set as their OS preference by default. Preferences stick around too, stored in localStorage so repeat visits remember the choice. An inline script in the document head applies the resolved theme before React even loads, preventing the jarring flash that dark-mode users often see on first paint. While at it, the Gitpulse wordmark got a proper upgrade. The all-lowercase "gitpulse" became "Gitpulse," and a small pulse-line SVG glyph now sits beside the text, giving the brand a recognizable mark rather than just text. The glyph uses a gold accent color that should pop against both light and dark backgrounds.

Technical description

The site now ships with a complete theme system and an improved branded logo. Theme infrastructure centers on [[code ref=1]]ThemeProvider[[/code]], a React context that manages theme state across three modes: light, dark, and system. [[code ref=4]]THEME_INIT_SCRIPT[[/code]] is an inline script embedded in [[code ref=7]]RootLayout[[/code]]'s [[code]]head[[/code]] that executes before React hydrates. It reads the user's stored preference from localStorage, resolves system theme if needed via [[code]]matchMedia('(prefers-color-scheme: dark)')[[/code]], and sets [[code]]data-theme[[/code]] on the [[code]]html[[/code]] element immediately. This prevents the flash-of-wrong-theme problem that plagues dark-mode sites on first load. [[code ref=3]]ThemeToggle[[/code]] is a new button component in the TopBar's [[code ref=5]]RightSection[[/code]] that cycles through modes on click. It displays Sun (light), Moon (dark), or Monitor (system) icons depending on current state, and includes proper aria-label text for accessibility. The [[code ref=2]]useTheme[[/code]] hook provides the theme context to any component that needs it. The provider also attaches a [[code]]change[[/code]] listener when in system mode, so the theme updates live if the visitor changes their OS preference mid-session. On the branding front, the logo component now renders [[code ref=6]]PulseMark[[/code]] — a 28×12 pixel SVG waveform — before the text "Gitpulse." The glyph uses the feed-gold color variable while the wordmark uses foreground color, creating visual hierarchy. Font classes were updated from [[code]]font-display[[/code]] to [[code]]font-feed-display[[/code]] to match editorial standards. Files at a glance: - [[code]]site/src/app/layout.tsx[[/code]] — wraps layout in ThemeProvider, adds inline theme script, suppresses hydration warning - [[code]]site/src/providers/ThemeProvider.tsx[[/code]] — context provider with theme state, persistence, and system preference tracking - [[code]]site/src/components/ThemeToggle.tsx[[/code]] — toggle button with icon cycling - [[code]]site/src/components/TopBar.tsx[[/code]] — adds RightSection with ThemeToggle, new PulseMark SVG, updated Logo and PublicationTitle