https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 Bug ID: 42898 Summary: Dark-mode foundation and theme switcher for the staff interface Initiative type: --- Sponsorship --- status: Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Staff interface Assignee: koha-bugs@lists.koha-community.org Reporter: martin.renvoize@openfifth.co.uk QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com Target Milestone: --- This patch lays the foundations for staff-client dark mode: the colour-mode machinery, a set of Koha design tokens, and a user-facing Light/Dark/Auto theme switcher in the header. It is deliberately foundations-only. Dark mode is NOT fully implemented yet - only the base surfaces flip at this stage. The component-by- component migration (forms, tables, search results, Vue widgets, etc.) lands in subsequent bugs, so the staff client will look progressively better in dark mode as those are pushed. The important thing this patch delivers is the switching mechanism and a token layer that leaves light mode untouched. What this patch adds: * A Light / Dark / Auto switcher in the staff header. "Auto" follows the operating system / browser preference; an explicit Light or Dark choice is remembered between sessions and across pages. * The chosen theme is applied before the page is drawn, so there is no flash of the wrong theme on load. If the browser blocks local storage (kiosk / privacy lockdown) the interface falls back to light mode. * A set of Koha colour tokens (--koha-surface, --koha-on-surface, --koha-border, ...) whose light values are identical to the colours used today, plus the dark values the follow-up bugs build on. Base page surfaces - fieldsets, page sections and the patron sidebar panel - already flip with the theme. Test plan: The pass/fail factor for this patch is "light mode is unchanged" and "theme switching works". How complete dark mode looks is NOT in scope here - that is tested in the follow-up bugs. 1) Apply the patch and rebuild the CSS (yarn css:build). 2) Light mode regression - the most important check. With the theme set to Light, click through the staff client (home page, a patron record, catalogue search results, a cataloguing/acquisitions form, the admin area). Everything should look exactly as it did before this patch. 3) Switching. Use the Light / Dark / Auto control in the header: - Switch to Dark. The page chrome and base panels turn dark immediately. (Some components are still light - that is expected at this stage.) - Switch back to Light. The interface returns to normal. - Move between pages and confirm the choice sticks. 4) No flash on load. With Dark selected, reload a page (or open a new one). It should appear dark straight away, with no brief flash of the light theme first. Repeat with Light selected. 5) Auto / follow-the-system. Set the theme to Auto. Set your operating system (or browser) to dark mode and reload - the staff client should be dark. Switch the OS back to light and reload - it should be light. 6) Accessibility / robustness. The switcher should be reachable and operable by keyboard, and a screen reader should announce which option is currently active. Switching themes should not produce any errors in the browser console. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.