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

New dashboard widgets have insufficient header contrast in dark mode #7889

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

Originally created by @sleepinggenius2 on GitHub (Apr 11, 2023).

Originally assigned to: @jeremystretch on GitHub.

NetBox version

v3.5.0-dev

Python version

3.8

Steps to Reproduce

  1. Navigate to the dashboard screen with the new widgets.

Expected Behavior

The text and icon colors within the card header should maintain at least the same contrast ratio between light and dark modes. You can see this done within the search and log in buttons in the screenshots below.

Observed Behavior

Currently, the colors used for the text and icons for card headers in dark mode do not provide much contrast against the background, making them very difficult to see. Screenshots below for reference.

beta-demo netbox dev_light
beta-demo netbox dev_dark

Originally created by @sleepinggenius2 on GitHub (Apr 11, 2023). Originally assigned to: @jeremystretch on GitHub. ### NetBox version v3.5.0-dev ### Python version 3.8 ### Steps to Reproduce 1. Navigate to the dashboard screen with the new widgets. ### Expected Behavior The text and icon colors within the card header should maintain at least the same contrast ratio between light and dark modes. You can see this done within the search and log in buttons in the screenshots below. ### Observed Behavior Currently, the colors used for the text and icons for card headers in dark mode do not provide much contrast against the background, making them very difficult to see. Screenshots below for reference. ![beta-demo netbox dev_light](https://user-images.githubusercontent.com/24281183/231177958-95e85747-d315-48d9-9738-1c5b4acab55e.png) ![beta-demo netbox dev_dark](https://user-images.githubusercontent.com/24281183/231177957-b4edc302-60f1-4842-b931-8bea66a1a37c.png)
adam added the type: bugstatus: acceptedtopic: UI/UXseverity: low labels 2025-12-29 20:29:35 +01:00
adam closed this issue 2025-12-29 20:29:35 +01:00
adam commented 2025-12-29 20:29:36 +01:00
Author
Owner
Copy Link

@mmfreitas commented on GitHub (Apr 11, 2023):

For the lighter colors this happens:
image

Could this be fixed the same way the #8088 was?

@mmfreitas commented on GitHub (Apr 11, 2023): For the lighter colors this happens: ![image](https://user-images.githubusercontent.com/91552302/231199538-638cbb65-e460-400d-9d2e-adffc470c730.png) Could this be fixed the same way the #8088 was?
adam commented 2025-12-29 20:29:36 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Apr 11, 2023):

I don't think we'll be able to use foreground_color() directly, because it takes a discrete RGB value, whereas in this case we're working with named colors (e.g. blue vs. #0000ff). But we should be able to come up with a similar approach.

@jeremystretch commented on GitHub (Apr 11, 2023): I don't think we'll be able to use `foreground_color()` directly, because it takes a discrete RGB value, whereas in this case we're working with named colors (e.g. `blue` vs. `#0000ff`). But we should be able to come up with a similar approach.
adam commented 2025-12-29 20:29:36 +01:00
Author
Owner
Copy Link

@sleepinggenius2 commented on GitHub (Apr 12, 2023):

Just playing around with this a bit in Dev Tools, I changed the text-light class to text-black for the text and text-gray to text-black-50 for the icons and it certainly puts the contrast for the text at a good level. At 50% opacity though, the icons are still a little low on contrast, but at 100%, I think they have too much contrast (example on NetBox News widget). Those were the only out-of-the-box Bootstrap color classes that I saw available to try in the black space, but I haven't had a chance to look into the code to see if changing the classes like that between themes is even a viable option. Screenshot for reference:

beta-demo netbox dev_dark_black2

@sleepinggenius2 commented on GitHub (Apr 12, 2023): Just playing around with this a bit in Dev Tools, I changed the `text-light` class to `text-black` for the text and `text-gray` to `text-black-50` for the icons and it certainly puts the contrast for the text at a good level. At 50% opacity though, the icons are still a little low on contrast, but at 100%, I think they have too much contrast (example on *NetBox News* widget). Those were the only out-of-the-box Bootstrap color classes that I saw available to try in the black space, but I haven't had a chance to look into the code to see if changing the classes like that between themes is even a viable option. Screenshot for reference: ![beta-demo netbox dev_dark_black2](https://user-images.githubusercontent.com/24281183/231497801-507b3815-3d79-4eb8-997c-38816f023266.png)
adam commented 2025-12-29 20:29:37 +01:00
Author
Owner
Copy Link

@jsenecal commented on GitHub (Apr 27, 2023):

Actually, just removing the class bg-secondary on the card-header div makes this much more readable and looks a bit more like the original ui:
image

The lighter version still needs it or at least the text and icons need a different class:
image

Same with text-dark applied:
image

If the proposed solution is accepted I can take ownership of this.

@jsenecal commented on GitHub (Apr 27, 2023): Actually, just removing the class `bg-secondary` on the `card-header` div makes this much more readable and looks a bit more like the original ui: ![image](https://user-images.githubusercontent.com/1564902/234748366-6f06b9ab-3ba0-43b6-939f-ea93b106cded.png) The _lighter_ version still needs it or at least the text and icons need a different class: ![image](https://user-images.githubusercontent.com/1564902/234748754-12aae83a-c6e7-48ec-926c-3dcb3c24014d.png) Same with `text-dark` applied: ![image](https://user-images.githubusercontent.com/1564902/234749383-4ab10b40-4abe-499a-a351-b424e2dad421.png) If the proposed solution is accepted I can take ownership of this.
adam commented 2025-12-29 20:29:37 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Apr 27, 2023):

I much prefer keeping the card headers. IMO it looks better and the ability to select different colors helps provide visual clues.

@jeremystretch commented on GitHub (Apr 27, 2023): I much prefer keeping the card headers. IMO it looks better and the ability to select different colors helps provide visual clues.
adam commented 2025-12-29 20:29:37 +01:00
Author
Owner
Copy Link

@jsenecal commented on GitHub (Apr 27, 2023):

It wouldn't change the ability to change colors, only change the default gray looking one @jeremystretch .

@jsenecal commented on GitHub (Apr 27, 2023): It wouldn't change the ability to change colors, only change the default gray looking one @jeremystretch .
adam commented 2025-12-29 20:29:37 +01:00
Author
Owner
Copy Link

@heroin-moose commented on GitHub (Sep 5, 2023):

This is really an issue, because even for the demo site we have either:

  • Barely readable Default color in light mode (default color prior to v3.5)
  • Barely readable Gray color in dark mode (default color since v3.5)
@heroin-moose commented on GitHub (Sep 5, 2023): This is really an issue, because even for the demo site we have either: - Barely readable Default color in light mode (default color prior to v3.5) - Barely readable Gray color in dark mode (default color since v3.5)
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 severity: low status: accepted 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#7889
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?