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

Change Text Color on "Aqua" background #5785

New Issue
Closed
opened 2025-12-29 19:32:40 +01:00 by adam · 5 comments
adam commented 2025-12-29 19:32:40 +01:00
Owner
Copy Link

Originally created by @mmfreitas on GitHub (Dec 16, 2021).

Originally assigned to: @jeremystretch on GitHub.

NetBox version

v3.1.0

Feature type

Change to existing functionality

Proposed functionality

Change text color on aqua background.

From this:
imageimage

To this:
imageimage

Use case

To see the text on an "aqua" background more clearly.

Database changes

No response

External dependencies

No response

Originally created by @mmfreitas on GitHub (Dec 16, 2021). Originally assigned to: @jeremystretch on GitHub. ### NetBox version v3.1.0 ### Feature type Change to existing functionality ### Proposed functionality Change text color on aqua background. From this: ![image](https://user-images.githubusercontent.com/91552302/146373070-550a3928-d21c-43ec-93cd-f5e11cc06f00.png)![image](https://user-images.githubusercontent.com/91552302/146373277-e5a51f95-98dd-40f9-8778-d304a3c0e0a5.png) To this: ![image](https://user-images.githubusercontent.com/91552302/146373166-0c6906c8-9678-4fe9-ae54-940eed168b9e.png)![image](https://user-images.githubusercontent.com/91552302/146373344-a281951d-3327-49eb-8d28-bff0b34fc19e.png) ### Use case To see the text on an "aqua" background more clearly. ### Database changes _No response_ ### External dependencies _No response_
adam added the type: bugstatus: accepted labels 2025-12-29 19:32:40 +01:00
adam closed this issue 2025-12-29 19:32:40 +01:00
adam commented 2025-12-29 19:32:41 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Dec 16, 2021):

So here's an interesting bit of trivia: There's a utility function in NetBox called foreground_color() which is used to determine the color of text over a colored background automatically. We use the RBG code 00ffff for aqua, which resolves to white for its corresponding foreground color.

>>> from utilities.utils import foreground_color
>>> foreground_color('00ffff')
'ffffff'

I do agree that black text is more legible, but I don't recall where the formula it uses came from originally and I'm hesitant to tweak it. Might need to do a bit more research.

@jeremystretch commented on GitHub (Dec 16, 2021): So here's an interesting bit of trivia: There's a utility function in NetBox called [`foreground_color()`](https://github.com/netbox-community/netbox/blob/8d069083535e478de95b0c895f9ac2d24121b04b/netbox/utilities/utils.py#L49) which is used to determine the color of text over a colored background automatically. We use the RBG code `00ffff` for aqua, which resolves to white for its corresponding foreground color. ```python >>> from utilities.utils import foreground_color >>> foreground_color('00ffff') 'ffffff' ``` I do agree that black text is more legible, but I don't recall where the formula it uses came from originally and I'm hesitant to tweak it. Might need to do a bit more research.
adam commented 2025-12-29 19:32:41 +01:00
Author
Owner
Copy Link

@hSaria commented on GitHub (Dec 16, 2021):

The source of the function appears to be a stackoverflow answer. The RGB multipliers, I believe, come from NTSC's RGB to YIQ conversion formula, where Y, the luma, is for black/white. Not quite sure where the threshold of >186 for black originates from.

@hSaria commented on GitHub (Dec 16, 2021): The source of the function appears to be a stackoverflow [answer](https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color). The RGB multipliers, I believe, come from NTSC's [RGB to YIQ conversion formula](https://en.wikipedia.org/wiki/YIQ#From_RGB_to_YIQ), where `Y`, the luma, is for black/white. Not quite sure where the threshold of `>186` for black originates from.
adam commented 2025-12-29 19:32:42 +01:00
Author
Owner
Copy Link

@hSaria commented on GitHub (Dec 16, 2021):

W3 has a page that uses a threshold of 150. On the same page is a slider you can play around with to see how well it works, it works significantly better with 150.

You can check out the source of the W3 page and look for isDark. The class w3color can be found here. It uses the same multipliers as RGB-to-YIQ, but with a 150 threshold on the W3 page.

@hSaria commented on GitHub (Dec 16, 2021): W3 has a [page](https://www.w3schools.com/css/css_colors_rgb.asp) that uses a threshold of 150. On the same page is a slider you can play around with to see how well it works, it works significantly better with 150. You can check out the source of the W3 page and look for `isDark`. The class `w3color` can be found [here](https://www.w3schools.com/lib/w3color.js). It uses the same multipliers as RGB-to-YIQ, but with a 150 threshold on the W3 page.
adam commented 2025-12-29 19:32:42 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Dec 16, 2021):

Reducing the dark threshold to 150 tweaks the text color for several colors, namely fuchsia, agua, light green, orange, and grey. They do seem more readable with this configuration.

Screenshot_2021-12-16 Home NetBox(1)

@jeremystretch commented on GitHub (Dec 16, 2021): Reducing the dark threshold to 150 tweaks the text color for several colors, namely fuchsia, agua, light green, orange, and grey. They do seem more readable with this configuration. ![Screenshot_2021-12-16 Home NetBox(1)](https://user-images.githubusercontent.com/13487278/146421629-5214d1b5-6e73-4e12-83a2-46bbae63ce39.png)
adam commented 2025-12-29 19:32:42 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Dec 16, 2021):

Thanks for the pointers, @hSaria!

@jeremystretch commented on GitHub (Dec 16, 2021): Thanks for the pointers, @hSaria!
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 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#5785
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?