https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 --- Comment #1 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Last mention of such an idea was in bug 20554 -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 --- Comment #3 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- I have been asked about the availability of a dark mode several times in the last few weeks when showing or discussing the new staff interface with different groups of people. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Change sponsored?|--- |Seeking sponsor -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au --- Comment #5 from David Cook <dcook@prosentient.com.au> --- I don't know the best way to do this from the CSS point of view for Koha (especially with the new staff interface), but I have some thoughts from the system point of view. Do we want dark mode to be available to all users or only authenticated users? I think apps like Github only allow you to customize the app's appearance if you're logged in. Then you can go to an "Appearance" option in your account to choose "dark mode". If it's only for authenticated users, we could save that option, and present that through something like the "userenv". In the templates, I imagine that we'd probably set a class or attribute at a high level. (Looking at Github, it seems that the "data-color-mode" attribute on the "html" root element lets them toggle between "dark" and "light". Obviously there's more that goes into it than that, but that's the initial hook.) -- The problem with a "dark" mode is that we already allow so much customization to Koha, so I wonder how many libraries would be able to actually customize and test a "light" and "dark" mode. We'd definitely want system preferences to control this feature. But it would be a great feature to have out of the box. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 Daniel Jones <daniel.jones@cheshiresharedservices.gov.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |daniel.jones@cheshireshared | |services.gov.uk -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 --- Comment #7 from David Liddle <david.liddle@wycliff.de> --- I've was working some more on our own OPAC customizations, and not being a web developer or design professional, I had cause to look up some aspects of CSS. It was then that I learned about CSS variables. (See https://www.w3schools.com/css/css3_variables.asp.) It occurred to me that CSS variables for colors could make Koha theming really easy. There *is* a list of such variables listed in the ":root" section of opac.css, but it seems that none of them are in use. Instead, colors are specified directly by each rule. If a default color palette was formed for the Koha OPAC, and the CSS contained something like this: :root { --kColor1: #abcdef --kColor2: #fedcba --kColor3: #123456 --kColor4: #654321 ... } AND the CSS rules in opac.css (and others) were edited to *always* refer to colors by way of variables, then a *basic* theme variation would simply need to change those variables. The change could come by way of OPACUserCSS, a custom CSS file, a built-in light/dark mode switcher, or a plugin. Some color variants can be created programmatically – e.g. lighter or darker, shades or tints – so they wouldn't have to exist as separate variables. The color-mix() function is a good example of this. (See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix.) As I wrote, I'm not a web pro, so I could be wrong, or there could be a more efficient way. In some ways, I'm just recording my own thoughts on the matter. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 Pedro Amorim <pedro.amorim@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |pedro.amorim@ptfs-europe.co | |m -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 --- Comment #10 from David Liddle <david.liddle@wycliff.de> --- That interesting and encouraging news, Owen. If there's a need and a way to get involved with the refinement of theming, I'm open. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 --- Comment #12 from Jonathan Druart <jonathan.druart@gmail.com> --- Created attachment 173536 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=173536&action=edit Bug 31327: PoC Dark theme See https://getbootstrap.com/docs/5.3/customize/color-modes/ -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 Jonathan Druart <jonathan.druart@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |In Discussion -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |christian.stelzenmueller@bs | |z-bw.de -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 Lisette Scheer <lisette@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lisette@bywatersolutions.co | |m --- Comment #15 from Lisette Scheer <lisette@bywatersolutions.com> --- Jonathan, this a great start! I clicked through to look for places that are going to need tweaking and/or aren't currently covered by the variables on the staff side. Some places I'm noticing need different colors text/placeholder in top search bar (or background of it) text in new (or background) Text or background of messges Text or background in moremember.pl The form for editing a patron is white with dark boxes and light text, as opposed to still light in the search bar. These should probably match for consistence. Datepicker fields are a different black/grey to other form fields Datatables are still all light with light colored text. The yellow for links doesn't look quite right and in some cases (like circulation.pl) it doesn't contrast enough. "Leave a message" on circulation.pl "limit to the following" on search.pl In general a number of the "panel" areas on search.pl and moremember.pl have a lot of white space still, setting show backgrounds as darker would probably be better. itemsearch.pl dropdowns for selecting things have very low contrast. h3 on the homepages (such as circulation-home.pl) don't have enough contrast. Similarly on both the main pages and the homepages I think the buttons (circ-button etc) should be darker as well. Reading some into UI dark mode and with some examples here https://m2.material.io/design/color/dark-theme.html#ui-application One of the comments on the other bug mentioned solarized as a more readable than some dark mode https://ethanschoonover.com/solarized/ For the theme picker could it be in the dropdown similar to "Set library and cash register"? or possibly an icon that opens a picker? I imagine once this feature is pushed, a likely next step would be the ability to add custom themes that could also be picked from so having a picker rather than a switch would be nice. I'd be interested at least in testing and helping with color selection. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 --- Comment #16 from David Cook <dcook@prosentient.com.au> --- (In reply to Jonathan Druart from comment #13)

Remaining work: 1. Move all HTML colour codes to variables 2. Find a dark variant for the different colors 3. Make the theme selector nicer 4. Add other themes (high contrast)

Is it as easy as that?

Who is interesting to help here?

I actually just overhauled a different app using Bootstrap 5 and my own CSS variables recently, so I'm interested in step 1 there. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 --- Comment #18 from Lisette Scheer <lisette@bywatersolutions.com> --- Datatables can be styled via bootstrap 5: https://datatables.net/examples/styling/bootstrap5.html They also have a dark mode and a snippet for autodetecting dark or light mode: https://datatables.net/manual/styling/dark-mode#Enabling-dark-mode I think probably to handle all the bugs we have discussing themes/dark mode/styling option, we have a couple of steps here. Step 1: Add a dark mode and theme switcher Step 2: Add a configuration page where themes can be set up by users and set as defaults/matching dark and light themes Either as part of that or as step 3: add the ability for some ui elements to be configured per library within the theme? Such as a header color based on logged in library from Bug 37054 Also do we want to do opac and staff interface as separate bugs? If so we have this one for OPAC and 38550 for staff interface. -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 --- Comment #20 from Lisette Scheer <lisette@bywatersolutions.com> --- (In reply to Christian Stelzenmüller from comment #19)

i agree, although i think it would be easier to provide different "pre-defined" color-schemes (and the dark mode) for the staff interface, from which the libraries can choose from later, so it doesn't get too complicated for the staff in the libraries

We have a lot of partners who want to do more customization and currently use a combo of custom css and js to customize. We've had some similar and related discussion over on Bug 37054. https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37054 -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 Lisette Scheer <lisette@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Keywords| |Hackfest -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks|39495 | Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39495 [Bug 39495] [OMNIBUS] Staff Interface Theming -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 Anni Mäki-Mantila <anni.maki-mantila@turku.fi> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |anni.maki-mantila@turku.fi -- You are receiving this mail because: You are watching all bug changes.

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31327 --- Comment #23 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Migrated this patch added lots of follow-ups to Bug 38550 - Add dark mode option to 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=31327 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |39495 Depends on|39495 | Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39495 [Bug 39495] [OMNIBUS] Staff Interface Theming -- You are receiving this mail because: You are watching all bug changes.