Skip to content

Use theme-aware SVG favicon for Predbat web UI#3935

Merged
springfall2008 merged 2 commits into
springfall2008:mainfrom
jim-ip:feature/svg-favicon-dark-mode
May 30, 2026
Merged

Use theme-aware SVG favicon for Predbat web UI#3935
springfall2008 merged 2 commits into
springfall2008:mainfrom
jim-ip:feature/svg-favicon-dark-mode

Conversation

@jim-ip
Copy link
Copy Markdown
Contributor

@jim-ip jim-ip commented May 17, 2026

Summary

Predbat currently uses bat_logo_light.png as the web favicon in both light mode and dark mode.

On dark browser tab backgrounds this results in a dark icon on a dark background because the favicon does not adapt to the active colour scheme.

Changes

  • Add docs/images/bat_logo.svg as a theme-aware favicon asset
  • Update apps/predbat/web_helper.py to use the SVG favicon first
  • Keep the existing bat_logo_light.png as a PNG fallback

Current behaviour

The HTML currently emits:

<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/springfall2008/batpred/refs/heads/main/docs/images/bat_logo_light.png">

So both light mode and dark mode use the same light-mode PNG favicon.

Proposed behavior

The HTML will emit:

<link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/springfall2008/batpred/refs/heads/main/docs/images/bat_logo.svg">
<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/springfall2008/batpred/refs/heads/main/docs/images/bat_logo_light.png">

This allows supported browsers to use the theme-aware SVG favicon while preserving PNG fallback compatibility.

@jim-ip jim-ip marked this pull request as ready for review May 17, 2026 10:19
Comment thread docs/images/bat_logo.svg
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor changes made to smooth out some of the vector curves where there were some indentations

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates Predbat’s web UI favicon to be theme-aware by preferring an SVG icon that adapts to light/dark mode, while keeping the existing PNG as a fallback for browsers that don’t support SVG favicons.

Changes:

  • Added a new theme-aware favicon asset: docs/images/bat_logo.svg (CSS switches fills based on prefers-color-scheme).
  • Updated get_header_html() to emit an SVG favicon <link> before the existing PNG favicon <link>.

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated no comments.

File Description
docs/images/bat_logo.svg Adds a theme-aware SVG logo that switches light/dark rendering via prefers-color-scheme.
apps/predbat/web_helper.py Adds an SVG favicon <link> ahead of the existing PNG favicon to enable theme-aware rendering with fallback.

@springfall2008 springfall2008 merged commit 1c8ffd8 into springfall2008:main May 30, 2026
1 check passed
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