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

SVG UI elements background issues in dark mode #9542

New Issue
Closed
opened 2025-12-29 20:51:15 +01:00 by adam · 2 comments
adam commented 2025-12-29 20:51:15 +01:00
Owner
Copy Link

Originally created by @jsenecal on GitHub (Apr 25, 2024).

Originally assigned to: @arthanson on GitHub.

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.

image
image

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.

image
image

Originally created by @jsenecal on GitHub (Apr 25, 2024). Originally assigned to: @arthanson on GitHub. ### 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. ![image](https://github.com/netbox-community/netbox/assets/1564902/fea33c29-f1f7-4f74-ab29-e7259c89bf21) ![image](https://github.com/netbox-community/netbox/assets/1564902/31461b67-8912-4e37-a40a-8d57a084c47b) ### 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. ![image](https://github.com/netbox-community/netbox/assets/1564902/6aaf4398-bc1c-434e-b68a-75b4216293fd) ![image](https://github.com/netbox-community/netbox/assets/1564902/22d53d5d-2e8d-4452-86fc-22aee229bc41)
adam added the type: bugbetatopic: UI/UXseverity: low labels 2025-12-29 20:51:15 +01:00
adam closed this issue 2025-12-29 20:51:16 +01:00
adam commented 2025-12-29 20:51:16 +01:00
Author
Owner
Copy Link

@arthanson commented on GitHub (Apr 26, 2024):

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

@arthanson commented on GitHub (Apr 26, 2024): This is a superset of #15819 leaving this one open as it shows there are more effects then just the rack-elevation.
adam commented 2025-12-29 20:51:17 +01:00
Author
Owner
Copy Link

@arthanson commented on GitHub (Apr 26, 2024):

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.

@arthanson commented on GitHub (Apr 26, 2024): 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.
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 beta severity: low topic: UI/UX 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#9542
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?