Bug 38550 - Add dark mode option to the staff interface
Summary: Add dark mode option to the staff interface
Status: NEW
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Bugs List
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2024-11-29 08:37 UTC by Katrin Fischer
Modified: 2025-01-29 14:34 UTC (History)
15 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Example of what it would look like (29.42 KB, image/png)
2024-11-29 14:38 UTC, Pablo AB
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Katrin Fischer 2024-11-29 08:37:07 UTC
It would be great if we could have a dark mode for the staff interface. 

While in the OPAC we can assume that libraries have done heavy customizations to the color scheme, this might be easier, assuming that most libraries stick to our standard design/color scheme.
Comment 1 Pablo AB 2024-11-29 14:38:47 UTC
Created attachment 175028 [details]
Example of what it would look like
Comment 2 David Cook 2024-12-01 22:51:11 UTC
(In reply to Katrin Fischer from comment #0)
> While in the OPAC we can assume that libraries have done heavy
> customizations to the color scheme, this might be easier, assuming that most
> libraries stick to our standard design/color scheme.

That's a good point! Most of my libraries don't style their staff interfaces, and the ones that do only do to a minor degree.
Comment 3 Alexander Wagner 2024-12-02 08:03:09 UTC
I wonder if it makes sense to think of this as kind of backend theme pairs. This might allow for easily adopting existing pairs for light/dark.

Blue sky thinking: usually I feel bright white pages with black text have way to much contrast for long working hours, and I got rid of this stuff it on my desktop almost everywhere - except web pages... OTOH black pages with white text have a similar issue, and are IMHO even harder to read, so dark dark is probably not ideal either and just "inverting" never worked well to my experience.

I usually prefer Solarized (https://ethanschoonover.com/solarized/) which comes in a light and dark shade. One does not have to like the "off" colours, but IMHO it's a light/dark mode "done right". Selenized, Gruvbox or Monokai go in this direction as well.

BTW: while I _have to_ stick to CD for the outside world, I'd be quite free for something internal. Maybe that's a reason why the staff interface does not get that much effort in theming. (I also like to see immediately: it's green this is STAFF, its bright white blue, this is OPAC.)
Comment 4 Lisette Scheer 2024-12-02 18:39:11 UTC
Bootstrap has a built in color modes/themes option now 
https://getbootstrap.com/docs/5.3/customize/color-modes/ 
It doesn't have a built in theme picker, but they do share some java script they use for the documentation. 

I see that the dark mode on their documentation/the built in is really nice. I'm not sure if it's one of the color palettes Alexander shared, but it's definitely a similar idea. 

It would also be easy to force light mode in printing 

We could potentially add a default dark theme and the switcher to the staff interface. It also documents how to add additional ones, which we could do if we wanted or if down the line we wanted to make a way for folks to add custom ones it could be an option. 

I'd love to be able to do this, especially since it has an option to follow the browser setting and do it automatically.
Comment 5 Owen Leonard 2024-12-02 19:04:29 UTC
I did some tinkering with this last week. The color modes option is really only relevant for Bootstrap components, so whether or not we use those modes, a lot of custom CSS will have to be written. I'm not saying that to discourage anyone, but to say that we don't necessarily need to figure out the Bootstrap way of doing things.
Comment 6 David Cook 2024-12-02 22:17:34 UTC
(In reply to Owen Leonard from comment #5)
> I did some tinkering with this last week. The color modes option is really
> only relevant for Bootstrap components, so whether or not we use those
> modes, a lot of custom CSS will have to be written. I'm not saying that to
> discourage anyone, but to say that we don't necessarily need to figure out
> the Bootstrap way of doing things.

On a different project, I've been converting a site from jQueryUI to Bootstrap 5, and I hear what you're saying here. We don't use Bootstrap components everywhere, and even if we did, we still customize the CSS beyond the default themes. (I've been working on figuring out how to take advantage of Bootstrap defaults while providing a minimal amount of custom styling on my other project. I'm loving using the CSS variables.)
Comment 7 Christopher Brannon 2025-01-22 17:17:20 UTC
(In reply to David Cook from comment #2)
> (In reply to Katrin Fischer from comment #0)
> > While in the OPAC we can assume that libraries have done heavy
> > customizations to the color scheme, this might be easier, assuming that most
> > libraries stick to our standard design/color scheme.
> 
> That's a good point! Most of my libraries don't style their staff
> interfaces, and the ones that do only do to a minor degree.

This was an assumption that is causing me a headache right now.
Comment 8 David Nind 2025-01-24 23:28:14 UTC
While I don't know how to do it and what is involved (and there is a lot of discussion on the internet about how and why), maybe we make sure Koha respects a person's system-wide choices, instead of more code to maintain (if that is possible).

Whatever choice is made, please please make it optional and not turned on by default - I personally find dark mode websites VERY hard to read (I actively dislike them, and will only read if I really really have to, and have no other choice). 

I realise this is the opposite to others preferences 8-)

It is also sometimes "sold" as an accessibility solution, which it can be in some situations.

But more often than not, it is a matter of personal preference.

Some links and articles that provide a (hopefully) balanced view:
- Nielsen Norman Group article: Dark Mode: How Users Think About It and Issues to Avoid (2023) https://www.nngroup.com/articles/dark-mode-users-issues/ 
- Dark mode & accessibility myth (2024) https://stephaniewalter.design/blog/dark-mode-accessibility-myth-debunked/
Comment 9 Lucas Gass (lukeg) 2025-01-24 23:41:37 UTC
(In reply to David Nind from comment #8)
> While I don't know how to do it and what is involved (and there is a lot of
> discussion on the internet about how and why), maybe we make sure Koha
> respects a person's system-wide choices, instead of more code to maintain
> (if that is possible).
> 
> Whatever choice is made, please please make it optional and not turned on by
> default - I personally find dark mode websites VERY hard to read (I actively
> dislike them, and will only read if I really really have to, and have no
> other choice). 
> 
> I realise this is the opposite to others preferences 8-)
> 
> It is also sometimes "sold" as an accessibility solution, which it can be in
> some situations.
> 
> But more often than not, it is a matter of personal preference.
> 
> Some links and articles that provide a (hopefully) balanced view:
> - Nielsen Norman Group article: Dark Mode: How Users Think About It and
> Issues to Avoid (2023)
> https://www.nngroup.com/articles/dark-mode-users-issues/ 
> - Dark mode & accessibility myth (2024)
> https://stephaniewalter.design/blog/dark-mode-accessibility-myth-debunked/

Very good points and very good resources. Thank you, David!
Comment 10 Katrin Fischer 2025-01-25 08:11:01 UTC
David, you are not the only one - I know a lot of people would like to have a dark mode and that's perfectly fine and I would like for Koha to have the feature, but I am unlikely to be using it :)
Comment 11 Lisette Scheer 2025-01-27 15:20:15 UTC
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

It looks like the css prefers-color-scheme media feature can follow browser default, but having a toggle would be good so if someone wants to switch it back to the non-dark mode they can.

Also I totally agree that dark mode shouldn't be the default. I think following the browser default (which can be set to follow the system) makes the most sense and always makes me happiest when I start using a new site and it just follows my settings.
Comment 12 David Cook 2025-01-29 00:26:02 UTC
(In reply to Lisette Scheer from comment #11)
> https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

That's pretty cool.

(In reply to Katrin Fischer from comment #0)
> While in the OPAC we can assume that libraries have done heavy
> customizations to the color scheme, this might be easier, assuming that most
> libraries stick to our standard design/color scheme.

Looking at the comments and ideas behind bug 37054, I wonder if we're assuming too much.

Admittedly, I do have a few libraries that customize their staff interfaces, but then they would be styling the light mode, and if we have an option to disable the dark mode... maybe it would all work...
Comment 13 Jonathan Druart 2025-01-29 08:24:22 UTC
I was not aware of this bug. It looks like a duplicate of bug 31327, where a patch is waiting for feedback...
Comment 14 Christian Stelzenmüller 2025-01-29 09:37:15 UTC
The other bug says "Add color scheme picker to the OPAC", but the patch was written for the staff interface it seems (i just tested in a sandbox, the staff interface is partially black). So i'm a little confused
Comment 15 Jonathan Druart 2025-01-29 10:35:54 UTC
(In reply to Christian Stelzenmüller from comment #14)
> The other bug says "Add color scheme picker to the OPAC", but the patch was
> written for the staff interface it seems (i just tested in a sandbox, the
> staff interface is partially black). So i'm a little confused

Both discussion and identical: we want a dark-theme. No matter the interface, we need to discuss how to do and implement it.

Yes the bug title is saying "OPAC", but the patch is only touching the staff interface. Yes it's confusing, sorry about that.

I think the dark-them discussion should stay on a a single bug report, especially when 2 days ago we are talking here about prefers-color-scheme and the patch on the other bug used it 3 months ago...

Good to see the discussion moving on though!
Comment 16 Katrin Fischer 2025-01-29 14:34:25 UTC
Agreed, good to see this moving. What about we merge the bugs and make one "Implement dark mode". Alternative: start a new omnibus and attach both.