doc: improve dark theme

[Theory-of-Everything]

This patch aims to fix some readability issues in regards to those are visually impaired, mainly colorblindness.

• contrast of the fg/bg have been increased
• link and normal text fg have been brightened
• container objects (like the nav and pre background) contrast the primary background more.

I have tried to keep the modified colors as close to the original scheme as possible, however there was need for a couple of larger changes.

original (left) new (right)

[Aire-One]

Thank you, @Theory-of-Everything, for the PR.

I'm fine with these changes.

Since you worked on the doc themes recently, @raven2cz, I'd like to also have your input here.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (5077c83) 90.93% compared to head (8a7e6fe) 90.87%.
Report is 71 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3735      +/-   ##
==========================================
- Coverage   90.93%   90.87%   -0.06%     
==========================================
  Files         897      901       +4     
  Lines       56682    58960    +2278     
==========================================
+ Hits        51542    53581    +2039     
- Misses       5140     5379     +239     

Flag	Coverage Δ
gcov	90.87% <ø> (-0.06%)	⬇️
luacov	93.68% <ø> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

see 28 files with indirect coverage changes

[raven2cz]

Mainly depends on @actionless
The main concept was to keep same awesome colorscheme which was defined in the web refactoring issue by him. I had to keep "almost" all defined colors.

The problem with every dark mode is settings of your LCD brightness and eyes problems. According to this problem I created three colorschemes:

• Awesome dark - the lowest brightness level. Mostly used for people with eye problems. I myself have struggled with this for two years. Curiously, it is a directly defined actionless scheme.
• One Dark - the middle/normal brightness level. Very popular. Mainly for middle level.
• Monokai / Monokai Pro - A higher level of brightness. Sharper colors, very nice to look at, strong readability.

I don't know if the proposal is not in the middle level now. It means we haven't low level after the accepting this MR. Depends on @actionless.

From my side, I like all @Theory-of-Everything designed colors except two:

• background of content and source codes was inherited from dark purple. Actual designed background isn't, looks like dark one now. I like keep purple style for it.
• title color was a typical special red color of awesome colorscheme. Proposal has mid tone inherited from monokai pro now. So, it is little bit conflict between one dark and monokai now. I like previous red awesome color which is typical dark red. Maybe just decrease the background of titles and keep the red color?

[actionless]

That dark theme was an automatically generated (with Themix-Gui app) palette from main AwesomeWM color (used on the logo). I mentioned that would appreciate if anyone would like to manually improve it.
However, this would require, also modifying:
https://github.com/awesomeWM/awesome/blob/master/lib/beautiful/xresources.lua#L17-L45
and
https://github.com/awesomeWM/awesome-www/blob/master/css/dark.css#L1-L22

---

also @raven2cz, just noticed a problem with dark.css:
instead of:

 /* background:  #222222 */
......
  --background-color: #222222;

it should be:

--background:  #222222;
.....
  --background-color: var(--background);

(and same for other 17 colors)

[actionless]

the only requirement regarding palettes, is to preserve AwesomeWM brand color (#535d6c)

[Elv13]

Maybe we should just default to the NordTheme palette? Having it auto-generated is nice, but in the end it also has some issue with some of my devices. There are plenty of dark version of websites like GitHub which seem to work just fine regardless of the hardware.

[raven2cz]

Maybe we should just default to the NordTheme palette? Having it auto-generated is nice, but in the end it also has some issue with some of my devices. There are plenty of dark version of websites like GitHub which seem to work just fine regardless of the hardware.

We can add more themes, nord, dracula can be added. It is not problem. If you prefer nord, you can just select it and it is stored in your local storage, after it, the nord will be opened as default for you.

But in common, it is better to keep similar colorscheme between web page and documentation.

@Theory-of-Everything the changes are good. We just don't fully agree with two colors of background and titles. The brightness will be increased by this MR.

[Theory-of-Everything]

Thanks for the feedback, to address some concerns @raven2cz brought up:

background of content and source codes was inherited from dark purple. Actual designed background isn't, looks like dark one now. I like keep purple style for it.
title color was a typical special red color of awesome colorscheme. Proposal has mid tone inherited from monokai pro now. So, it is little bit conflict between one dark and monokai now. I like previous red awesome color which is typical dark red. Maybe just decrease the background of titles and keep the red color?

There were a couple of reasons that I did radically change those colors. First of all, I never noticed the dark purple(?) background at first until I pulled up inspect element. Its way too similar to the background in brightness that makes it (quite literally) impossible to see. As for the heading, dark red usually isn't a great color on top of a dark background and in general, dark on dark is never the way to go when making colorblind accessible design. Hue isn't as powerful a communicating tool as brightness in the context of color blindness. Its bumped up to have more of a brightness contrast since the hue really doesn't help.

I also don't think adding more themes fixes the problem. The dark could be changed to something like nord as @Elv13 mentioned, but with all the work done with awesome-dark, I feel that might be a waste.

But in common, it is better to keep similar colorscheme between web page and documentation.

@raven2cz if @actionless does approve of these changes, I don't think it will be too difficult to change the website as well, being that It will amount to a couple of css changes.

@actionless as for the brand color, I haven't changed it yet, but thanks for the heads up. I'll also look at the two files you mentioned for color changes as well.

[actionless]

as from my side - i'd like theme be synced in
https://github.com/awesomeWM/awesome/blob/master/lib/beautiful/xresources.lua#L17-L45 too as part of this PR (and for other file in separate PR, since it's in another repo obviously)

[Theory-of-Everything]

as from my side - i'd like theme be synced in
https://github.com/awesomeWM/awesome/blob/master/lib/beautiful/xresources.lua#L17-L45 too as part of this PR (and for other file in separate PR, since it's in another repo obviously)

Cool, I'll get to that at some point today.

[raven2cz]

@actionless I'm little bit lost goal now. Xresources is your previous colorscheme? If not, is it mean some global change of dark theme? Maybe I will wait to final change to see the result. It will be better :-)

@Theory-of-Everything Ok. We will see the result. Look and feel is always complicated. My advice is to use some standardized solution/colorscheme, not your own solution, because:

• colorscheme has to be tested with more levels of brightness,
• "colorblind" design - This disease is in contrast to my eye disease, which, on the other hand, I unfortunately do not agree with. It is opinion against opinion. But we will see final result. I'm not sure now which changes brings Xresources from actionless...

[actionless]

@raven2cz i think it's important to maintain the seamless visual experience everywhere
actually would be also nice to make sure the default theme (https://github.com/awesomeWM/awesome/tree/master/themes/default) itself full fit into the palette

[raven2cz]

@raven2cz i think it's important to maintain the seamless visual experience everywhere actually would be also nice to make sure the default theme (https://github.com/awesomeWM/awesome/tree/master/themes/default) itself full fit into the palette

Still I don't understand. Which palette? I know just defined palette which you provided in webpage issue. What is this
https://github.com/awesomeWM/awesome/blob/master/lib/beautiful/xresources.lua#L17-L45 ?

This is palette, which you defined:

 * background:  #222222
 * foreground:  #c4c5c8
 * color0:  #000300
 * color1:  #b44631
 * color2:  #6fc24e
 * color3:  #cab14c
 * color4:  #59929d
 * color5:  #926090
 * color6:  #668d96
 * color7:  #728c8d
 * color8:  #3f5f47
 * color9:  #c1605d
 * colorA:  #a9c68e
 * colorB:  #decf50
 * colorC:  #a6bbcb
 * colorD:  #ad79a2
 * colorE:  #8aa1af
 * colorF:  #bababa
 * color10: #edf0f1
 * color11: #0088a9

Expect to two last colores (it was added, because requirements from ldoc palette coverage).
It is very different from the post link fallback.

So, if I understand it, it means that you want new colorscheme defined in fallback parameter in xresources.lua for ldoc, webpage and standard theme awesomewm in theme.lua?

[actionless]

So, if I understand it, it means that you want new colorscheme defined in fallback parameter in xresources.lua for ldoc, webpage and standard theme awesomewm in theme.lua?

yes, and in case of further improvement to keep it synchronized

[raven2cz]

@actionless Sorry, that I ask again, but still don't understand it.

In issue, awesomeWM/awesome-www#175 (comment) you wrote

i tried generating the color palette which would match with default AwesomeWM theme (btw i think we should also use it as fallback for beautiful.xresources module, as current fallback is pink/purple colors which i copied from random theme).

It means that you defined awesome palette which I attached here in previous post and you wanted to apply it to the xresources too. Not, to take actual xresources palette and use it for awesome theme, webpage and default ldoc.

Or do you mean to take @Theory-of-Everything actual changed colors, change the actual defined awesome palette and replace xresources, webpage and ldoc default?

I'm very confused now.

[actionless]

@raven2cz

1. in scope of this PR (and soon after) i want to be changed doc, www and xresources-fallback - so they all have SAME theme

2. as a separate activity to rethink default awesome theme colors (so it would fit into that same theme too), but trying to do the smallest amount of changes, and preserving overall visual recognition

nothing else

[raven2cz]

@raven2cz

1. in scope of this PR (and soon after) i want to be changed doc, www and xresources-fallback - so they all have SAME theme

2. as a separate activity to rethink default awesome theme colors (so it would fit into that same theme too), but trying to do the smallest amount of changes, and preserving overall visual recognition

nothing else

Thanks! I understand now. It makes sense.
@Theory-of-Everything Can you update and provide here your new proposal for awesome dark theme? To ensure your reqs for colorblind problems. I will try to check it in more LCDs and brightness levels after it.
It will be complete unification.