https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38550
--- Comment #44 from Martin Renvoize (ashimema) <[email protected]> --- Created attachment 200766 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200766&action=edit Bug 38550: Token forms, tables, toolbar, header and news Extends the dark-mode coverage from staff-global.scss to the rest of the global staff-client SCSS partials. After this patch every form field, table cell, toolbar button, search-bar autocomplete panel and home-page news block flips correctly between light and dark via the [data-bs-theme="dark"] toggle, instead of staying glued to white. Token additions (_root.scss): * --koha-input-bg / --koha-input-color / --koha-input-border / --koha-input-bg-disabled. The custom (.fg-row) form widgets use a dedicated palette: in dark mode the input sits one elevation step lighter than its containing card so empty fields read as fields, and the readonly icon retains contrast. Components touched: * _forms.scss - fieldset legend uses --koha-on-surface-muted (was #696969) - .fg-row btn-default border, text inputs/select, readonly inputs, textareas and file inputs all use the new --koha-input-* tokens - the <table>.unselected fallback bg is var(--koha-surface) * _tables.scss - default <td> bg + colour use --koha-surface / --koha-on-surface so the body of every datatable flips with the theme - .dt-button caption colours, sort-arrow placeholder, dtrg-group grouping rows, .group rows and tr.expired / tr.highlight all use surface / on-surface tokens with a strong border for separators - status-meaning row/cell colours (paid, overdue, selected, info) are intentionally left untouched in this patch — they need a semantic-tokens pass with the Bootstrap *-bg-subtle family * _toolbar.scss - #toolbar / .btn-toolbar bg uses --koha-surface-muted; the inner .btn-default text and hover state use on-surface-muted with surface-accent for the hover bg - dropdown items inside the toolbar drop their hardcoded "black" text colour for --koha-on-surface * _header.scss - the autocomplete .form-content panel and .form-extra-content drop-down both use --koha-surface-overlay for their bg, with on-surface text and a themed divider between fields - the active breadcrumb link replaces dimgray with --koha-on-surface-muted - text colours that sit on the (constant) brand-green nav are deliberately left as "white" / "$green-text-color" * mainpage.scss - .newsitem uses --koha-surface / --koha-border-muted with explicit on-surface text. The pre-existing opacity: .75 has been removed: on a dark page background it produced grey-on-grey body text failing AA, and on light it offered no real visual benefit - .newsfooter uses --koha-on-surface-subtle - .biglinks-list .icon_general uses surface-accent / on-surface in its rest state and brand / brand-on on hover, with the inner .fa-stack-1x dropping to on-surface-muted Test plan: 1) Apply patch, rebuild: yarn css:build 2) Light mode (localStorage.setItem('theme','light')) — load the home page, a patron form (members/memberentrygen.pl), the catalogue search results page and the admin home page. Confirm each looks identical to pre-patch (regression check) 3) Dark mode (localStorage.setItem('theme','dark')) — same pages. Confirm: - News blocks are dark surfaces with light text (no white islands) - Form fieldsets, legends and inputs all read as cohesive dark - Datatables: header / body / hover / grouping all themed - Toolbar above a results table is dark with legible button text - Header search autocomplete drop-down is a dark overlay - Big icon links on the home page use the dark accent surface 4) WCAG contrast spot-check: legend text, .newsfooter, .icon_general stack icon, breadcrumb-active. Aim for 4.5:1 body / 3:1 large. 5) The status-meaning colours (overdue red, paid green, selected yellow) are intentionally NOT yet themed — they will be addressed with the Bootstrap *-bg-subtle mapping in a follow-up. -- 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/
