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

Improve contrast of red and green background colors in the changelog #11498

New Issue
Closed
opened 2025-12-29 21:46:02 +01:00 by adam · 2 comments
adam commented 2025-12-29 21:46:02 +01:00
Owner
Copy Link

Originally created by @fabi125 on GitHub (Aug 18, 2025).

Originally assigned to: @jeremystretch on GitHub.

NetBox version

v4.3.6

Feature type

Other

Proposed functionality

Current Colors

The contrast of the red and green background for added and removed content is currently quite poor:

Light Mode

Image

Dark Mode

Image

Suggested Colors

I'd like to propose #FFCECB as a new red and #ACEEBB as a new green for light mode and #5C1720 as a new red and #004421 as a new green for dark mode.

Light Mode

Image

Dark Mode

Image

Use case

The current background and text color combination can make the text hard to read.

Database changes

None

External dependencies

None

Originally created by @fabi125 on GitHub (Aug 18, 2025). Originally assigned to: @jeremystretch on GitHub. ### NetBox version v4.3.6 ### Feature type Other ### Proposed functionality ### Current Colors The contrast of the red and green background for added and removed content is currently quite poor: **Light Mode** - Red contrast is 2.21: https://coolors.co/contrast-checker/374151-d63939 - Green contrast is 3.76: https://coolors.co/contrast-checker/374151-2fb344 <img width="881" height="832" alt="Image" src="https://github.com/user-attachments/assets/3902338c-2116-4ba0-a575-80b65490fd69" /> **Dark Mode** - Red contrast is 3.77: https://coolors.co/contrast-checker/e5e7eb-d63939 - Green contrast is 2.22: https://coolors.co/contrast-checker/e5e7eb-2fb344 <img width="881" height="828" alt="Image" src="https://github.com/user-attachments/assets/baf0bea0-f46e-4137-968a-e10b3f4fc68d" /> ### Suggested Colors I'd like to propose #FFCECB as a new red and #ACEEBB as a new green for light mode and #5C1720 as a new red and #004421 as a new green for dark mode. **Light Mode** - Red #FFCECB contrast is 7.33: https://coolors.co/contrast-checker/374151-ffcecb - Green #ACEEBB contrast is 7.71: https://coolors.co/contrast-checker/374151-aceebb <img width="877" height="831" alt="Image" src="https://github.com/user-attachments/assets/a800a1d9-99be-40c3-871b-29e1ebed1030" /> **Dark Mode** - Red #5C1720 contrast is 10.61: https://coolors.co/contrast-checker/e5e7eb-5c1720 - Green #004421 contrast is 9.17: https://coolors.co/contrast-checker/e5e7eb-004421 <img width="879" height="832" alt="Image" src="https://github.com/user-attachments/assets/755e44ce-0477-4b73-a401-8bcf278f2442" /> ### Use case The current background and text color combination can make the text hard to read. ### Database changes None ### External dependencies None
adam added the status: acceptedtype: featurecomplexity: low labels 2025-12-29 21:46:02 +01:00
adam closed this issue 2025-12-29 21:46:02 +01:00
adam commented 2025-12-29 21:46:03 +01:00
Author
Owner
Copy Link

@fabi125 commented on GitHub (Aug 21, 2025):

To keep things simple, Tabler also provides colors that could be used here: --tblr-green-lt and --tblr-red-lt

Image Image
@fabi125 commented on GitHub (Aug 21, 2025): To keep things simple, Tabler also provides colors that could be used here: `--tblr-green-lt` and `--tblr-red-lt` <img width="1250" height="721" alt="Image" src="https://github.com/user-attachments/assets/51d216f9-8021-458c-a17f-bd93c49e1150" /> <img width="1248" height="716" alt="Image" src="https://github.com/user-attachments/assets/8ebf0ced-0b70-49dd-ad05-707e55f01ace" />
adam commented 2025-12-29 21:46:03 +01:00
Author
Owner
Copy Link

@jnovinger commented on GitHub (Aug 21, 2025):

Bootstrap v5.3+ has color variables defined (like $green-200 or $red-300) that we should use for this.

@jnovinger commented on GitHub (Aug 21, 2025): Bootstrap v5.3+ has [color variables](https://getbootstrap.com/docs/5.3/customize/color/#all-colors) defined (like `$green-200` or `$red-300`) that we should use for this.
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 complexity: low status: accepted type: feature
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#11498
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?