https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=38550
--- Comment #42 from Martin Renvoize (ashimema) <[email protected]> --- Created attachment 200764 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=200764&action=edit Bug 38550: Token foundation and FOUC fix The PoC patch hardcoded data-bs-theme="dark" on every <html> element and relied on switch-theme.js running on DOMContentLoaded to undo it for users who chose Light. That caused a flash of dark theme on every page load. It also shipped a dead `.element` demo rule copied from the Bootstrap docs, and pinned every fieldset / page-section / patroninfo panel to a hardcoded #FFF via @mixin card, leaving them unreachable from any future dark-mode work. This patch lays the foundation needed before the rest of the audit work can land: * A new _root.scss partial defines a small set of Koha CSS custom properties (--koha-surface, --koha-on-surface, --koha-border, …) for both light and dark, using Bootstrap 5.3's color-mode() mixin to emit the dark overrides on [data-bs-theme="dark"]. Component SCSS in subsequent patches references these tokens instead of hardcoded hex literals. * @mixin card now uses var(--koha-surface) / var(--koha-on-surface) so every fieldset, .page-section and .patroninfo-section flips with the theme without further changes. * doc-head-open.inc no longer hardcodes data-bs-theme="dark". An inline FOUC-killer script reads localStorage (or prefers-color-scheme as a fallback) and sets the attribute on <html> before first paint. The localStorage call is wrapped in try/catch so privacy/kiosk lockdowns degrade gracefully to light. * The dead `.element { ... }` block under @include color-mode(dark) in staff-global.scss is removed. Test plan: 1) Apply patch, rebuild CSS: yarn css:build 2) With a fresh browser profile (no localStorage), load the staff client. Confirm no flash of dark theme; the page renders light. 3) In devtools, run localStorage.setItem('theme','dark'); reload. Confirm page renders dark from the first paint (no flash). 4) localStorage.setItem('theme','light'); reload. Confirm light. 5) localStorage.removeItem('theme'); set OS to dark mode, reload. Confirm page renders dark via prefers-color-scheme. 6) Inspect any fieldset / .page-section: in dark mode it should now pick up var(--koha-surface) (#1E1E1E) instead of #FFF. 7) grep the compiled CSS for [data-bs-theme=dark] — Koha tokens should appear under it alongside Bootstrap's own dark overrides. This patch is intentionally infrastructure-only. The bulk of the hardcoded hex literals across staff-global.scss, _forms.scss, _tables.scss, _toolbar.scss, _header.scss, mainpage.scss and the Vue SFCs is addressed in follow-up patches in this series. -- 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/
