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: [email protected]
Reporter: [email protected]
QA Contact: [email protected]
CC: [email protected]
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.
_______________________________________________
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/
