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:
rcourtman
2026-08-06 16:10:43 +01:00
parent 0dd9c92cb8
commit a6c7bbb913
+20 -1
View File
@@ -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