Skip to content

Conversation

@PitNikola
Copy link
Member

@PitNikola PitNikola commented Aug 29, 2025

Problem

GitHub and other websites provide dark favicons that become invisible on dark backgrounds. Most websites don't provide theme-specific favicon variants, making it difficult to maintain icon visibility across different themes.

Solution

This PR implements automatic tinting for monochrome SVG icons based on theme preference. When a theme parameter is specified, the service detects monochrome icons and applies appropriate colors for better visibility.

Key Features

  • New theme parameter: Optional parameter accepting light or dark values
  • Intelligent monochrome detection: Identifies grayscale icons by analyzing color values
  • Automatic tinting:
    • Light theme → Dark icons tinted to #333333
    • Dark theme → Light icons tinted to #E0E0E0
  • Color preservation: Non-monochrome icons (red, blue, etc.) remain unchanged
  • Special handling: GitHub icons always treated as monochrome for consistent theming
  • Zero overhead: No processing when theme parameter is omitted

Implementation Details

Monochrome Detection Logic

  • Checks if RGB values are within 30 units of each other
  • Recognizes standard gray color names (black, white, gray, etc.)
  • Preserves colorful single-color icons

Performance

  • Tinting adds ~1ms processing time for SVG icons
  • Non-SVG images pass through with 0ms overhead
  • Efficient caching - original icons cached once, tinting applied at request time

Testing

  1. Start the dev server: npm run dev
  2. Open test/index.html to see examples with GitHub, Twitter/X, Reddit, etc.
CleanShot 2025-08-29 at 13 09 32@2x CleanShot 2025-08-29 at 13 09 38@2x

Files Changed

  • API: Added theme parameter handling and processing pipeline
  • Image Processing: New module for SVG tinting logic
  • Ranking: Prefers SVG format when theme is specified (for tinting capability)
  • Types: Added ThemeParam type definition
  • Documentation: Updated README with new parameter and testing instructions
  • Testing: Added visual test page for theme comparison

Implements automatic tinting for monochrome SVG icons to improve visibility across light and dark themes. This addresses the issue where dark icons (like GitHub's) become invisible on dark backgrounds.

Key changes:
- Add optional `theme` parameter to API (light/dark)
- Detect and tint monochrome SVG icons based on theme preference
- Special handling for GitHub icons which are always treated as monochrome
- Preserve original colors for non-monochrome icons
- No processing overhead when theme is not specified

The tinting logic:
- Detects grayscale colors (R, G, B values within 30 units)
- Light theme: tints dark icons to #333333
- Dark theme: tints light icons to #E0E0E0
- Colorful icons (red, blue, etc.) are preserved as-is

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
@PitNikola PitNikola requested a review from KELiON August 29, 2025 12:07
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