Skip to content

fix(vibe-check): make logo readable in dark mode#18164

Closed
DerGeraetK wants to merge 1 commit into
PostHog:masterfrom
DerGeraetK:fix/vibe-check-logo-dark-mode
Closed

fix(vibe-check): make logo readable in dark mode#18164
DerGeraetK wants to merge 1 commit into
PostHog:masterfrom
DerGeraetK:fix/vibe-check-logo-dark-mode

Conversation

@DerGeraetK

Copy link
Copy Markdown

Changes

Fixes #17952

In dark mode on /vibe-check, the PostHog logo in the "You'll hate PostHog if..." heading was nearly invisible: the Logo SVG letters use hardcoded black path fills that don't adapt to the theme.

This applies the same theme-conditional fill already used for the Logo across the site (About/v2/Letterhead.tsx, Home/Control, Home/Test, ko/_KoreanHome.tsx):

fill={siteSettings.theme === 'dark' ? 'white' : undefined}

  • In dark mode the whole logo (letters + glyph) renders monochrome white — intentional, matching the site's established dark-mode logo treatment (see screenshots).
  • In light mode undefined falls back to the component default — unchanged behavior.

Note: open PR #17950 fixes the text contrast on this same page (#17926). This PR only touches the Logo fill — semantically independent, but both edit adjacent lines of the same <h1>, so whichever lands second needs a trivial rebase. Happy to rebase if #17950 merges first.

Screenshots (dark before → dark after → light unchanged)

Dark before:
Screenshot 2026-07-03 132520

Dark after:
Screenshot 2026-07-03 132538

Light unchanged:
Screenshot 2026-07-03 133053

Checklist

  • I've read the docs/content style guides
  • Words are spelled using American English
  • Relative URLs for internal links (n/a — none added)
  • Vercel preview build checked (will verify once the preview builds)
  • No page moved (n/a)

🤖 Agent context

Claude-written: implemented with Claude Code under my direction.

  • Tools: Claude Code (single session). Approach: located the root cause in components/Logo (hardcoded path fills), searched the repo for existing dark-mode Logo treatments and applied the established pattern rather than inventing one.
  • Verification: ran the site locally (Gatsby dev), visually verified both themes on /vibe-check; Prettier/ESLint via the repo's commit hooks.
  • Human review: I reviewed the diff and can explain it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@DerGeraetK
DerGeraetK force-pushed the fix/vibe-check-logo-dark-mode branch from d683907 to 3bd0334 Compare July 3, 2026 11:53
@DerGeraetK
DerGeraetK marked this pull request as ready for review July 3, 2026 11:53
@github-actions

Copy link
Copy Markdown
Contributor

This PR hasn't seen activity in two weeks! Should it be merged, closed, or further worked on? If you want to keep it open, please remove the stale label – otherwise this will be closed in another week. If you want to permanently keep it open, use the waiting label.

@github-actions github-actions Bot added the stale This pull request has been marked as stale and will be closed soon automatically label Jul 22, 2026
@ianmatson

Copy link
Copy Markdown
Contributor

This is a great contribution - good eye! 👀

We've actually addressed this exact issue in the below PR, so I'm going to go ahead and close this guy.
#18806

@ianmatson ianmatson closed this Jul 23, 2026
@github-project-automation github-project-automation Bot moved this from Backlog to Done in PostHog.com planning Jul 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

stale This pull request has been marked as stale and will be closed soon automatically

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Bug Report: Text Color in PostHog is hard to Read

3 participants