Skip to content

Conversation

@kgowru
Copy link
Contributor

@kgowru kgowru commented Jan 21, 2026

Summary

This PR addresses two visual improvements for the docs-starter:

  1. Dark mode logo fix: Updated the logo configuration to use a separate dark mode logo (logo-dark.svg) with white text, replacing the previous setup that used the same logo for both modes.

  2. Subtle gradient background: Added a custom CSS file with a subtle linear gradient background that works for both light and dark modes, using the respective accent colors at 3% opacity fading from top to transparent.

Files changed:

  • fern/docs.yml - Updated logo config to reference logo-dark.svg for dark mode, added CSS reference
  • fern/docs/assets/logo-dark.svg - Replaced with new SVG logo (white text)
  • fern/styles.css - New file with gradient background CSS for both modes

Updates since last revision

  • Updated gradient CSS to work for both light and dark modes (previously only dark mode)
  • Light mode uses rgba(0, 135, 0, 0.03) (the light accent color)
  • Dark mode uses rgba(112, 225, 85, 0.03) (the dark accent color)

Review & Testing Checklist for Human

  • Verify the gradient is visible in both light and dark modes - The gradient is very subtle (3% opacity). Check if it's actually visible and matches expectations from the previous implementation
  • Verify the dark mode logo renders correctly - Preview the docs in dark mode and confirm the new logo is visible and properly sized
  • Confirm the CSS selectors work correctly - The CSS uses .fern-background-image and :root.dark .fern-background-image selectors

Recommended test plan: Run fern docs dev locally, toggle between light and dark modes, and verify both the logo and gradient background look correct in each mode. Check multiple pages to ensure the gradient appears consistently.

Notes

  • The gradient uses 3% opacity which is intentionally very subtle - this may need adjustment based on preference
  • I couldn't locate the exact previous gradient configuration in git history that was mentioned. If this implementation doesn't match expectations, please provide more details about the previous approach
  • fern check passes with 0 errors

Link to Devin run: https://app.devin.ai/sessions/95131426440742f1912ad251034b5c53
Requested by: Kapil Gowru (@kgowru)

- Replace dark mode logo with new YourCompany SVG logo (white text)
- Update docs.yml to use separate logos for dark and light modes
- Add custom CSS with subtle linear gradient background for dark mode

Co-Authored-By: Kapil Gowru <[email protected]>
@devin-ai-integration
Copy link
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@github-actions
Copy link

@github-actions
Copy link

@Ryan-Amirthan Ryan-Amirthan merged commit a47ac13 into main Jan 30, 2026
2 checks passed
@Ryan-Amirthan Ryan-Amirthan deleted the devin/1769006404-fix-dark-logo-gradient branch January 30, 2026 15:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants