https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38550
--- Comment #48 from Martin Renvoize (ashimema) <[email protected]> --- Created attachment 200770 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200770&action=edit Bug 38550: Fix nav-tabs active and tab-content panel in dark mode Two pieces of tab styling were still pinned to white and didn't flip with the colour-mode toggle: 1) The active tab itself. _variables.scss overrode Bootstrap's defaults for $nav-tabs-link-active-bg and $nav-tabs-link-active-border-color from var(--bs-body-bg) to a literal $white. The original Bootstrap-style values were even left as a comment beside the override. With this in place the .nav-tabs .nav-link.active button stayed solid white in dark mode, producing a glaring white pill on top of the dark page chrome and a white sliver where the active tab's border meets the panel. Reverting both Sass variables to var(--#{$prefix}body-bg) makes the active tab's bg/border resolve through Bootstrap's own dark override of --bs-body-bg, so the active tab now reads as a continuation of the panel underneath in either mode. 2) The .tab-content panel. staff-global.scss hardcoded background-color: #FFF on the wrapper that holds every tab-pane. In dark mode this stayed white, dwarfing the active tab and turning all body text black on white inside the panel. Switched to var(--koha-surface) / var(--koha-on-surface) so the panel matches the rest of the tokenised surfaces. The Koha-specific .nav-tabs .nav-link override (brand-green pill for *inactive* tabs with white text) is intentionally left alone: it's the staff client's signature tab look, and brand green + white still reads cleanly in either mode. Test plan: 1) Apply patch, rebuild: yarn css:build 2) In light mode, open any tabbed view (a patron details page, the catalogue detail / authority / acquisitions screens). Tabs should look identical to pre-patch — green inactive pills, white active pill, white panel. 3) Switch to dark mode. The active tab should now render dark and merge into the dark .tab-content panel. The inactive tabs stay green (intentional). The panel itself should be the same shade as other dark cards / fieldsets on the page. 4) Spot-check pages that mount tab badges (e.g. patron checkout counts) — the green/white inactive tabs and their badges continue to read in both modes. -- You are receiving this mail because: You are watching all bug changes. _______________________________________________ Koha-bugs mailing list [email protected] https://lists.koha-community.org/cgi-bin/mailman/listinfo/koha-bugs website : http://www.koha-community.org/ git : http://git.koha-community.org/ bugs : http://bugs.koha-community.org/
