https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 --- Comment #1 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 200852 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200852&action=edit Bug 42898: Dark-mode foundation and theme switcher -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|koha-bugs@lists.koha-commun |martin.renvoize@openfifth.c |ity.org |o.uk Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |42901 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42901 [Bug 42901] Dark mode for Vue components in the staff interface -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 --- Comment #2 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 200857 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200857&action=edit Bug 42898: Dark-mode foundation and theme switcher 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 (42899, 42900, 42901), 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 bugs 42899, 42900 and 42901. 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 watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 --- Comment #3 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 200866 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200866&action=edit Bug 42898: Dark-mode foundation and theme switcher 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 (42899, 42900, 42901), 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 bugs 42899, 42900 and 42901. 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 watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 --- Comment #4 from Lucas Gass (lukeg) <lucas@bywatersolutions.com> --- Looks good! -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 Esther Melander <esther.melander@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |esther.melander@bywatersolu | |tions.com Status|Needs Signoff |Signed Off --- Comment #5 from Esther Melander <esther.melander@bywatersolutions.com> --- I tested this and everything works as described. No errors in the console or flashes when reloading a page. The theme switcher was accessible by keyboard. I did enable Orca on my desktop and it did successfully read the option for the theme switcher, but the voice is not very intelligible. That just might be a limitation of my Orca configuration/system. I feel comfortable enough to sign off on the bug. Signed-off-by: Esther Melander <esther@bywatersolutions.com> -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 Andrew Fuerste-Henry <andrew@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #200866|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 Andrew Fuerste-Henry <andrew@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |andrew@bywatersolutions.com --- Comment #7 from Andrew Fuerste-Henry <andrew@bywatersolutions.com> --- In the switcher dropdown all three options had checkmarks next to them permanently, which was odd. The selected mode was highlighted, so one can tell which mode is in use. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA --- Comment #8 from Lucas Gass (lukeg) <lucas@bywatersolutions.com> --- Overall, I am not finding any "light-mode regressions", so this is looking nice. I suspect this would have to get pushed at the same time as Bug 42900 and 42901? If not the "bd-theme-toggle" would be quite confusing. This aria-label I don't think will be translatable: + if (toggle) { + toggle.setAttribute( + "aria-label", + `Toggle colour theme (current: ${preference})` + ); + } What is switch-theme.js? It says "Adapted from Bootstrap docs' colour-modes.js". Do we need to add more info. about it/licensing to the About page? -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Signed Off Patch complexity|--- |Small patch -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 --- Comment #9 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 208947 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=208947&action=edit Bug 42898: Dark-mode foundation and theme switcher 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 (42899, 42900, 42901), 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 bugs 42899, 42900 and 42901. 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. Signed-off-by: Esther Melander <esther@bywatersolutions.com> Signed-off-by: Barbara Johnson <Barbara.Johnson@bedfordtx.gov> -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Comma delimited| |West Sussex County Council list of Sponsors| |<https://libraries.westsuss | |ex.gov.uk> Sponsorship status|--- |Sponsored -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 --- Comment #11 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 208949 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=208949&action=edit Bug 42898: Dark-mode foundation and theme switcher 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 (42899, 42900, 42901), 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 bugs 42899, 42900 and 42901. 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. Sponsored-by: West Sussex County Council <https://libraries.westsussex.gov.uk> Signed-off-by: Esther Melander <esther@bywatersolutions.com> Signed-off-by: Barbara Johnson <Barbara.Johnson@bedfordtx.gov> -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 --- Comment #13 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Thanks Andrew and Lucas. Checkmarks: confirmed, nothing hid the active marker so all three icons were always visible. It is now hidden by default and only shown on the selected option. aria-label: good catch. The label is now built with __x() in switch-theme.js using the translated option text, and the static strings and option labels in header.inc are marked translatable too (with translator context on the Light/Dark/Auto labels). Dependencies: yes, this patch is foundations only. Only the base surfaces flip here, and 42899/42900/42901 migrate the components. Light mode is unchanged, so it is safe on its own, but the toggle makes most sense once those land. switch-theme.js: it is an adaptation of the colour-mode toggler from the Bootstrap docs. That script is licensed CC BY 3.0 (the Bootstrap library itself is MIT, already credited on the About page). I have added the copyright and licence lines to the file header and a "Bootstrap colour modes" entry to the About page. Follow-up patch attached. -- You are receiving this mail because: You are watching all bug changes.