BookStackApp / BookStack

A platform to create documentation/wiki content built with PHP & Laravel
https://www.bookstackapp.com/
MIT License
15.19k stars 1.9k forks source link

Reduce sidebar fade when in dark mode for better legibility #3203

Closed posta246 closed 2 years ago

posta246 commented 2 years ago

Describe the feature you'd like

Hi everybody, as said in the title, I want to propose the use of "better" colors for standard dark mode theme. As you can see in the image attached, the default ones - "rounded" in the 1, 2 and 3 yellow box - are difficult to read. I do not know how to explain what colors should be used... they should be more clear/shiny, maybe the use of white could be the best one. I've seen that some colors can be changed from the config menu, but:

  1. the result is not so good, because it changes both the char and the background color;
  2. I hope this is a need of more people, so the approach should be the opposite... the dark mode has (will have) highly readable colors as standard, then if someone wants more soft colors, can change them
  3. actual dark mode colors for library and book may cause problems for colour-blind person/daltonians.

Thx for reading all of this, hope it will be possible and that it is a common/shared opinion... otherwise no prob (will be very appreciated, in this case, if someone tell me which file I may edit to change that colors). Bye! Great project!!!

Describe the benefits this feature would bring to BookStack users

Because bookstack is a tool for writing and reading, a better choice for standard dark mode color will reduce eyes' tiring and will help people with difficult such color-blind; a very side effect could also be the increase in the use and spreading of this tool, because it will be more pleasureful to interact with.

Additional context

immagine

ssddanbrown commented 2 years ago

Thanks for the request @posta246.

In regards to side sidebar sections (1 & 3 in the screenshot) we dim these areas by default which may be making them harder to read. If you focus within them or hover these areas with your mouse then they'll be more visible. This is to retain focus on the central content although maybe we need to adjust the affect slightly for dark mode.

In regards to the colors used (Within screenshot block 2 and block 3) these are determined by the configured colors as mentioned which I think, in regards to better dark mode support, is already covered by issue #2314.

Is it okay If I update this issue to focus on adjusting the auto-dimmed sidebars for dark mode, and we'll leave #2314 as the primary issue for colors?

posta246 commented 2 years ago

Hi, thanks to you for the fast answer and for the interest in the question, happy to be helpful for the community. Yes, I've seen that "on mouse over" they are more visible but - for me! :) - I also need to have an eye on that infos (expecially section 1). Of course, update the issue in a way it is easiest to manage, considering the issue #2314 (sorry me if I have not found, I'm a noob here on github). I will ask something about it in the related thread.

reddexx commented 2 years ago

Dark.zip

Set this CSS-Content in the Settings > Custom HTML Content

Information: this is a Darkmode Theme for bookstack

posta246 commented 2 years ago

Hi reddex, thx... I'm testing it, great and big job! I'm not a css expert, but it seems to me you have made lot of changes, not just the colors, right? Or your css includes also part of the original one? I ask this because I would (also :) ) minimize differences with the vanilla version, just in case in future release something can change and "break" the production installation. I'll keep playing with your file, hoping that some basic improvement will be added soon in the ufficial version

reddexx commented 2 years ago

Had help with the tool darkreader. CSS exported and adjusted

ssddanbrown commented 2 years ago

Within fb16ac326f458fea1279f2d1472921f50dcc5b97 I've toned down the fade for dark mode so I will close this off. Will be part of the next patch release.