SVG UI elements background issues in dark mode

[jsenecal]

Deployment Type

Self-hosted

NetBox Version

v4.0-beta2

Python Version

3.11

Steps to Reproduce

1- Create a 42 RU rack
2- Create two devices-types with interfaces, then two devices of this type and assign them to this rack.
3- Connect the interfaces together using a cable
4- Navigate the Rack elevation or perform a cable trace

(step 4 can also be simply executed on https://beta-demo.netbox.dev/ with existing demo data)

Expected Behavior

SVG objects should have their color-scheme set to auto, which should display a transparent background, and white text for labels in dark mode.

Observed Behavior

SVG objects are displaying a white background (and black text) with bad looking padding which is not aligned with the rest of the UI. This is observed on a chrome based browser. Safari seems to have a transparent background which lack contrast with the text.

[arthanson]

This is a superset of #15819 leaving this one open as it shows there are more effects then just the rack-elevation.

[arthanson]

The rack one I think is HTMX enabled issue only, it works fine on mine if that is not enabled. I do see the cable trace one being the wrong background even if HTMX is not enabled. Strangely safari displays it fine but chrome does not.