Fix diff2html colors being unreadable in dark mode - #1153
Open
agreen wants to merge 1 commit into
Open
Conversation
nautobot-golden-config vendors diff2html 3.4.43, which ships a single hardcoded light-mode palette (white/pastel-pink/pastel-green table cells, near-black low-opacity text) with no dark variant and no media query. Nautobot itself is fully dark-themed via Bootstrap 5's data-bs-theme="dark" attribute, but this vendored stylesheet never accounted for it, making the Config Compliance and Config Plan diff views essentially unreadable in dark mode. Adds a new, separate stylesheet (diff2html-dark-overrides.css) rather than editing the vendored diff2html.min.css directly, so future diff2html version bumps stay clean. Every rule is scoped under Nautobot's existing [data-bs-theme="dark"] attribute selector, so light-mode users are completely unaffected. Fixes nautobot#1152
agreen
requested review from
itdependsnetworks,
jeffkala and
nkallergis
as code owners
September 3, 2026 12:43
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What's happening
nautobot_golden_config/static/nautobot_golden_config/diff2html-3.4.43/diff2html.min.cssships a single hardcoded light-mode palette (white/pastel-pink/pastel-green table cells, near-black low-opacity text) with no dark variant and no media query. Nautobot itself is fully dark-themed via Bootstrap 5'sdata-bs-theme="dark"attribute on<html>, but this vendored stylesheet never accounted for that, making the Config Compliance and Config Plan diff views essentially unreadable in dark mode.Unchanged/context rows happen to look fine only by accident —
.d2h-cntxisn't styled bydiff2html.min.cssat all, so it falls through to Nautobot's own dark table default. Every cell diff2html does style explicitly (deletions, insertions, line-number gutters, the file header bar) overrides that dark default with hardcoded light colors.Before (Nautobot dark mode, unpatched):
After (this PR):
What this PR does
Adds a new, separate stylesheet (
diff2html-dark-overrides.css) rather than editing the vendoreddiff2html.min.cssdirectly, so futurediff2htmlversion bumps stay clean. Every rule is scoped under Nautobot's existing[data-bs-theme="dark"]attribute selector, so light-mode users are completely unaffected — nothing changes for them. The one shared template that loads diff2html's assets (goldenconfig_detailsmodal.html, used by both the Config Compliance detail view and Config Plan diff rendering) now also loads the new stylesheet.Testing
Verified live against a real Config Compliance diff on Nautobot 3.2.4 / golden-config 3.0.7, and reproduced standalone in the two screenshots above using the actual vendored
diff2html.min.js/.cssassets and a real (secret-redacted) config diff.Fixes #1152
🤖 Generated with Claude Code