Rack visualization is stuck at light mode

[jii8by]

Deployment Type

Self-hosted

NetBox Version

v4.3.5

Python Version

3.11

Steps to Reproduce

1. Create site Example
2. Create rack Rack 1 in site Example
3. Go to rack details at /dcim/racks/1/

Expected Behavior

Since NetBox defaults to dark mode, rack visualization uses a dark background

This image originates from version 4.3.0

Observed Behavior

Rack visualization uses a light background

Current version of NetBox

This issue also occurs when viewing rack elevations at /dcim/rack-elevations/

[AliMickey]

Can confirm same behaviour on v4.3.6. The device type images can barely be seen, and reading device names is a strain.

[ITJamie]

same issue on 4.4

[AliMickey]

Is this issue not affecting everyone or something for it to be not picked up?

The demo suffers from this regression.

[jeremystretch]

@AliMickey would you like to volunteer to own this issue?

[AliMickey]

@jeremystretch Nope, I am not a qualified developer that can fix this for Netbox.

Thank you for the shout though.

[github-actions[bot]]

This issue has been automatically closed due to lack of activity. In an effort to reduce noise, please do not comment any further. Note that the core maintainers may elect to reopen this issue at a later date if deemed necessary.

[AliMickey]

Are we just closing issues now because your enterprise customers haven't upgraded to an affected release yet :D

[jeremystretch]

@AliMickey I asked earlier if you wanted to fix this and you declined. It appears no one else was interested in owning it either. Such is the nature of open source.

We'll be happy to re-open this should a volunteer step up to own it.

[AliMickey]

Such is the case of open source that charges thousands per year and doesn't have middle ground for donations to incentivise more volunteers.

[jeremystretch]

You're certainly free to pay someone else to contribute a fix. You don't need us for that.

[UnknownTy]

Hey it's me, the volunteer. Decided to take a look during my lunch since this was annoying me.

Taking a look at the source it appears the svg object is being missed by the query:

https://github.com/netbox-community/netbox/blob/6efb258b9fe7281535a88ea729cdf5c64619684f/netbox/project-static/src/colorMode.ts#L30-L36 Specifically:

const svg = elevation.contentDocument?.querySelector('svg') ?? null; 

The elevation object doesn't have a contentDocument underneath it. A quick test of swapping it to select by children (And verifying it's an SVG) seems to have worked.

  for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
    const svg = elevation.children[0] ?? null;
    if (svg !== null && svg.nodeName == 'svg') {
      svg.setAttribute(`data-bs-theme`, targetMode);
    }

This solution feels hacky though since I'm selecting the only child of the class element. I'm not sure where the contentDocument went since it was there in the past. I haven't worked with JS or TS in some time so if you know a better way then let me know!

A change ~4 months ago modified how the svg is generated which seems to be the earliest point of this bug: https://github.com/netbox-community/netbox/issues/19902#issue-3238576106 Notice how the screenshots show SVG with a white background, even though user is in dark mode. I don't think made this bug just the earliest I found it.

[jeremystretch]

Hey it's me, the volunteer.

@UnknownTy happy to reopen this and assign it to you if you're committing to submit a PR.

[UnknownTy]

Sure, send it my way.

[jeremystretch]

@UnknownTy do you still intend to work on this?

[UnknownTy]

@jeremystretch Yes! Apologies, rush of changes for work & life before Christmas.

I'm on break next week so plenty of free time (I hope ;) )