[Bug 42899] New: Dark mode for core staff interface chrome
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42899 Bug ID: 42899 Summary: Dark mode for core staff interface chrome 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 builds on the dark-mode foundation (bug 42898) by migrating the core staff-client chrome to the Koha colour tokens, so it flips with the Light/Dark/Auto theme switcher instead of staying glued to light colours. Areas covered: * Global chrome - the patron sidebar, admin/tools side menu, catalogue search facets, search results panel and summary, the sticky search header and the apply-to-results action panels. * Forms - fieldsets, legends, text/select/file inputs, read-only fields and textareas. * Tables (grid only) - cell text, the active tab and its content panel. * Toolbars - the button toolbar above lists and its dropdown menus. * Header - the search-bar autocomplete drop-down and the breadcrumb bar. * Home page - news blocks and the big icon links. Light mode is unchanged: each token's light value is the colour used today. The dark values are tuned for legible contrast. Note: status-coloured table rows (overdue, on hold, etc.) and the DataTables footer/export chrome are handled in bug 42900. Vue widgets are in bug 42901. The OPAC is out of scope. Depends on: bug 42898 Test plan: 1) Apply the patch (after bug 42898) and rebuild the CSS (yarn css:build). 2) Light mode regression. With the theme set to Light, click through: a patron record (sidebar), the admin home and a tools page (side menu), catalogue search results (facets, results, search header, apply-to-results), a patron entry form, the staff home page (news and the big icon links). Everything should look exactly as it did before this patch. 3) Dark mode. Switch the header control to Dark and revisit the same pages. Each of the areas above should now use dark surfaces with readable text, flowing into the dark page chrome rather than standing out as bright panels. Text, headings, form fields, toolbar buttons and the autocomplete drop-down should all be comfortably legible. 4) Tabs. Open a tabbed screen (e.g. a patron record). In light mode the tabs look as before; in dark mode the active tab and the panel under it should be dark and read as one piece. 5) Switch back to Light and confirm everything returns to normal. -- 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=42899 --- Comment #1 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 200853 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200853&action=edit Bug 42899: Dark mode for core staff interface chrome -- 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=42899 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |42898 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42898 [Bug 42898] Dark-mode foundation and theme switcher for the staff interface -- 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=42899 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |42900 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42900 [Bug 42900] Dark mode for tables and status rows -- 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=42899 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff Assignee|koha-bugs@lists.koha-commun |martin.renvoize@openfifth.c |ity.org |o.uk -- 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=42899 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks|42900 | Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42900 [Bug 42900] Dark mode for tables and status rows -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42899 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |42902 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42902 [Bug 42902] Dark-mode regression guards for 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=42899 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #200853|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=42899 --- Comment #2 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 200858 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200858&action=edit Bug 42898: Dark-mode foundation and theme switcher -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42899 --- Comment #3 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 200859 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200859&action=edit Bug 42899: Dark mode for core staff interface chrome Builds on the dark-mode foundation (bug 42898) by migrating the core staff-client chrome to the Koha colour tokens, so it flips with the Light/Dark/Auto theme switcher instead of staying glued to light colours. Areas covered: * Global chrome - the patron sidebar, admin/tools side menu, catalogue search facets, search results panel and summary, the sticky search header and the apply-to-results action panels. * Forms - fieldsets, legends, text/select/file inputs, read-only fields and textareas. * Tables (grid only) - cell text, the active tab and its content panel. * Toolbars - the button toolbar above lists and its dropdown menus. * Header - the search-bar autocomplete drop-down and the breadcrumb bar. * Home page - news blocks and the big icon links. Light mode is unchanged: each token's light value is the colour used today. The dark values are tuned for legible contrast. Status-coloured table rows (overdue, on hold, etc.) and the DataTables footer/export chrome are handled in bug 42900. Vue widgets are in bug 42901. The OPAC is out of scope. Test plan: 1) Apply the patch (after bug 42898) and rebuild the CSS (yarn css:build). 2) Light mode regression. With the theme set to Light, click through: a patron record (sidebar), the admin home and a tools page (side menu), catalogue search results (facets, results, search header, apply-to-results), a patron entry form, the staff home page (news and the big icon links). Everything should look exactly as it did before this patch. 3) Dark mode. Switch the header control to Dark and revisit the same pages. Each of the areas above should now use dark surfaces with readable text, flowing into the dark page chrome rather than standing out as bright panels. Text, headings, form fields, toolbar buttons and the autocomplete drop-down should all be comfortably legible. 4) Tabs. Open a tabbed screen (e.g. a patron record). In light mode the tabs look as before; in dark mode the active tab and the panel under it should be dark and read as one piece. 5) Switch back to Light and confirm everything returns to normal. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42899 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #200859|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=42899 --- Comment #4 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 200867 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200867&action=edit Bug 42899: Dark mode for core staff interface chrome Builds on the dark-mode foundation (bug 42898) by migrating the core staff-client chrome to the Koha colour tokens, so it flips with the Light/Dark/Auto theme switcher instead of staying glued to light colours. Areas covered: * Global chrome - the patron sidebar, admin/tools side menu, catalogue search facets, search results panel and summary, the sticky search header and the apply-to-results action panels. * Forms - fieldsets, legends, text/select/file inputs, read-only fields and textareas. * Tables (grid only) - cell text, the active tab and its content panel. * Toolbars - the button toolbar above lists and its dropdown menus. * Header - the search-bar autocomplete drop-down and the breadcrumb bar. * Home page - news blocks and the big icon links. Light mode is unchanged: each token's light value is the colour used today. The dark values are tuned for legible contrast. Status-coloured table rows (overdue, on hold, etc.) and the DataTables footer/export chrome are handled in bug 42900. Vue widgets are in bug 42901. The OPAC is out of scope. Test plan: 1) Apply the patch (after bug 42898) and rebuild the CSS (yarn css:build). 2) Light mode regression. With the theme set to Light, click through: a patron record (sidebar), the admin home and a tools page (side menu), catalogue search results (facets, results, search header, apply-to-results), a patron entry form, the staff home page (news and the big icon links). Everything should look exactly as it did before this patch. 3) Dark mode. Switch the header control to Dark and revisit the same pages. Each of the areas above should now use dark surfaces with readable text, flowing into the dark page chrome rather than standing out as bright panels. Text, headings, form fields, toolbar buttons and the autocomplete drop-down should all be comfortably legible. 4) Tabs. Open a tabbed screen (e.g. a patron record). In light mode the tabs look as before; in dark mode the active tab and the panel under it should be dark and read as one piece. 5) Switch back to Light and confirm everything returns to normal. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42899 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #200858|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=42899 Danielle M. <dmeininger591@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dmeininger591@gmail.com -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon@bugs.koha-community.org