mirror of
https://github.com/rcourtman/Pulse.git
synced 2026-09-10 02:25:56 +00:00
fix(ui): make the favicon follow the OS colour scheme
logo.svg hardcoded a single palette, so the browser tab icon always rendered the dark-mode blue with pure white, including on light-themed tab strips where the brand file specifies blue-600. This could not be fixed while the file was also the Login and setup wizard logo, because an <img> resolves prefers-color-scheme against the OS while the app's theme comes from pulseThemePreference, and the two diverge freely. Those two call sites now render PulseBrandMark inline, so logo.svg is the favicon and nothing else, and the OS colour scheme is the only signal available to it. Adopt the palette from docs/images/pulse-logo.svg so all three published forms of the mark agree. Geometry is unchanged. Browsers that ignore the media query fall back to the light branch, which is the correct light appearance rather than a broken one.
This commit is contained in:
@@ -1 +1,20 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><circle fill="#3b82f6" cx="128" cy="128" r="122"/><circle fill="none" stroke="#fff" stroke-width="14" opacity=".92" cx="128" cy="128" r="84"/><circle fill="#fff" cx="128" cy="128" r="26"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
|
||||
<title>Pulse Logo</title>
|
||||
<style>
|
||||
/* Default (light mode) colors */
|
||||
.pulse-bg { fill: #2563eb; }
|
||||
.pulse-ring { fill: none; stroke: #ffffff; stroke-width: 14; opacity: 0.92; }
|
||||
.pulse-center { fill: #ffffff; }
|
||||
/* Dark mode colors. This file is the favicon only, so the OS colour
|
||||
scheme is the correct signal. In-app surfaces render PulseBrandMark
|
||||
instead, which follows the app's own theme class. */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.pulse-bg { fill: #3b82f6; }
|
||||
.pulse-ring { stroke: #dbeafe; }
|
||||
.pulse-center { fill: #dbeafe; }
|
||||
}
|
||||
</style>
|
||||
<circle class="pulse-bg" cx="128" cy="128" r="122"/>
|
||||
<circle class="pulse-ring" cx="128" cy="128" r="84"/>
|
||||
<circle class="pulse-center" cx="128" cy="128" r="26"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 847 B |
Reference in New Issue
Block a user