starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Rack visualization is stuck at light mode #11457

New Issue
Open
opened 2025-12-29 21:45:26 +01:00 by adam · 15 comments
adam commented 2025-12-29 21:45:26 +01:00
Owner
Copy Link

Originally created by @jii8by on GitHub (Aug 7, 2025).

Originally assigned to: @UnknownTy on GitHub.

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

Image

This image originates from version 4.3.0

Observed Behavior

Rack visualization uses a light background

Image

Current version of NetBox

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

Originally created by @jii8by on GitHub (Aug 7, 2025). Originally assigned to: @UnknownTy on GitHub. ### 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 ![Image](https://github.com/user-attachments/assets/e99a0a22-cbdf-435e-b240-0aaf4a3566ad) _This image originates from version 4.3.0_ ### Observed Behavior Rack visualization uses a light background ![Image](https://github.com/user-attachments/assets/f802c19b-a4c8-41df-951e-5e6a597c2248) _Current version of NetBox_ This issue also occurs when viewing rack elevations at `/dcim/rack-elevations/`
adam added the type: bugstatus: acceptednetboxseverity: low labels 2025-12-29 21:45:27 +01:00
adam commented 2025-12-29 21:45:27 +01:00
Author
Owner
Copy Link

@AliMickey commented on GitHub (Aug 25, 2025):

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

@AliMickey commented on GitHub (Aug 25, 2025): Can confirm same behaviour on v4.3.6. The device type images can barely be seen, and reading device names is a strain.
adam commented 2025-12-29 21:45:28 +01:00
Author
Owner
Copy Link

@ITJamie commented on GitHub (Sep 18, 2025):

same issue on 4.4

@ITJamie commented on GitHub (Sep 18, 2025): same issue on 4.4
adam commented 2025-12-29 21:45:28 +01:00
Author
Owner
Copy Link

@AliMickey commented on GitHub (Nov 2, 2025):

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

The demo suffers from this regression.

Image
@AliMickey commented on GitHub (Nov 2, 2025): Is this issue not affecting everyone or something for it to be not picked up? The demo suffers from this regression. <img width="364" height="404" alt="Image" src="https://github.com/user-attachments/assets/379bec44-6452-4d7f-8355-fe7438996d81" />
adam commented 2025-12-29 21:45:28 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Nov 3, 2025):

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

@jeremystretch commented on GitHub (Nov 3, 2025): @AliMickey would you like to volunteer to own this issue?
adam commented 2025-12-29 21:45:28 +01:00
Author
Owner
Copy Link

@AliMickey commented on GitHub (Nov 4, 2025):

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

Thank you for the shout though.

@AliMickey commented on GitHub (Nov 4, 2025): @jeremystretch Nope, I am not a qualified developer that can fix this for Netbox. Thank you for the shout though.
adam commented 2025-12-29 21:45:29 +01:00
Author
Owner
Copy Link

@github-actions[bot] commented on GitHub (Dec 5, 2025):

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.

@github-actions[bot] commented on GitHub (Dec 5, 2025): 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.
adam commented 2025-12-29 21:45:29 +01:00
Author
Owner
Copy Link

@AliMickey commented on GitHub (Dec 5, 2025):

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

@AliMickey commented on GitHub (Dec 5, 2025): Are we just closing issues now because your enterprise customers haven't upgraded to an affected release yet :D
adam commented 2025-12-29 21:45:30 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Dec 5, 2025):

@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.

@jeremystretch commented on GitHub (Dec 5, 2025): @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.
adam commented 2025-12-29 21:45:30 +01:00
Author
Owner
Copy Link

@AliMickey commented on GitHub (Dec 5, 2025):

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

@AliMickey commented on GitHub (Dec 5, 2025): Such is the case of open source that charges thousands per year and doesn't have middle ground for donations to incentivise more volunteers.
adam commented 2025-12-29 21:45:30 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Dec 5, 2025):

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

@jeremystretch commented on GitHub (Dec 5, 2025): You're certainly free to pay someone else to contribute a fix. You don't need us for that.
adam commented 2025-12-29 21:45:30 +01:00
Author
Owner
Copy Link

@UnknownTy commented on GitHub (Dec 5, 2025):

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:

6efb258b9f/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);
    }
Image

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.

@UnknownTy commented on GitHub (Dec 5, 2025): 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: ```ts 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. ```ts 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); } ``` <img width="578" height="288" alt="Image" src="https://github.com/user-attachments/assets/68f366f3-8c33-4018-9fcc-a0f2df451bd4" /> 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.
adam commented 2025-12-29 21:45:30 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Dec 7, 2025):

Hey it's me, the volunteer.

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

@jeremystretch commented on GitHub (Dec 7, 2025): > Hey it's me, the volunteer. @UnknownTy happy to reopen this and assign it to you if you're committing to submit a PR.
adam commented 2025-12-29 21:45:30 +01:00
Author
Owner
Copy Link

@UnknownTy commented on GitHub (Dec 7, 2025):

Sure, send it my way.

@UnknownTy commented on GitHub (Dec 7, 2025): Sure, send it my way.
adam commented 2025-12-29 21:45:30 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Dec 17, 2025):

@UnknownTy do you still intend to work on this?

@jeremystretch commented on GitHub (Dec 17, 2025): @UnknownTy do you still intend to work on this?
adam commented 2025-12-29 21:45:31 +01:00
Author
Owner
Copy Link

@UnknownTy commented on GitHub (Dec 18, 2025):

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

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

@UnknownTy commented on GitHub (Dec 18, 2025): @jeremystretch Yes! Apologies, rush of changes for work & life before Christmas. I'm on break next week so plenty of free time (I hope ;) )
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label netbox severity: low status: accepted type: bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#11457
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?