User talk:Pelagic/dark vector/core.css

Page name
"pdv1-core" isn't a great name. Perhaps something more catchy will arise later. The intention is that there will be complementary modules, say "pdv1-overrides" or even split into smaller more specific parts like "pdv1-navbox". ⁓ Pelagic ( messages ) 01:13, 29 December 2021 (UTC)

Bluelinks
One aspect I've vacillated over is the right types of blue to use for hyperlinks.

I want to keep a comparable brightness with the surrounding text, without them looking pale and washed out.

The classic Vector uses hues at or near 220&deg; for links but 205&deg; for some other visual elements. But when I tried changing the hue of the active links page-wide, I didn't notice a difference. These are the two CSS rules, you can see the difference when the colours are juxtaposed here:


 * a { color: #6ebef7 ; color: hsl(205, 90%, 70%) ; }
 * a { color: #6e9cf7 ; } /* equivalent to hsl(220, 90%, 70%) */

Although these are supposedly the same 70% "lightness" (I wish we could work in L*), the H205 blue looks lighter to me. Human vision is normally more sensitive to green than blue. The off-white/light-grey Base 20 text is L93%. But bringing the blue up to 90% makes it hard to tell links apart from normal text, even with max saturation:


 * a { color: #6ebef7 ; color: hsl(205, 90%, 70%) ;}
 * a:visited { color: #cfe9fc ; color: hsl(205, 88%, 90%) ;}
 * a:visited { color: #cceaff ; color: hsl(205, 100%, 90%) ;}

If I stick with hue 205, does a darker darkening the blue look better?


 * a { color: #6ebef7 ; color: hsl(205, 90%, 70%) ;}
 * a { color: #55b3f6 ; color: hsl(205, 90%, 65%) ;}
 * a { color: #3da8f5 ; color: hsl(205, 90%, 60%) ;}
 * c.f. a { color: #6e9cf7 ; /* equivalent to hsl( 220, 90%, 70%) */ }

For visited links, I already went as dark as 50% (with less saturation also). In isolation it looks a bit too dark, but it works on a real page where visited links are the minority:


 * a { color: #6ebef7 ; color: hsl(205, 90%, 70%) ;}
 * a:visited { color: #338ccc ; color: hsl(205, 60%, 50%) ;}

By the way, I've been using W3chools' Color Picker for the calculations. See HSL and HSV for why we can only get high chroma (as opposed to saturation) at mid-lightness. ⁓ Pelagic ( messages ) 03:32, 29 December 2021 (UTC)


 * Contrast checkers:  ⁓ Pelagic ( messages ) 04:36, 10 January 2022 (UTC)

LCH and OKLCH

 * OK LrCH https://bottosson.github.io/misc/colorpicker/
 * Lch and Lab colour and gradient picker: https://davidjohnstone.net/lch-lab-colour-gradient-picker

Hue 205&deg; in RGB-based HSL is equivalent to 250&deg; Lab-based, according to the above picker. I get overall peak chroma of just 19 at Lr=60 (#0097ff). Going up to Lr=80, max chroma is 9 (#9accff). Darkest colour at (hue=250, chroma=9) has L=22 (#00355f).

The resulting gradient is pleasant, here are the values with 7 stops: ['#9accff', '#82b1e3', '#6996c7', '#527cac', '#3a6391', '#214b78', '#00355f']

. ⁓ Pelagic ( messages ) 04:13, 10 January 2022 (UTC)


 * Putting the WM base greys (Base100, Base90, ... [1]) into the picker, I get Lr values: 100, 98, 93, 82, 69, 50 (Base30), 38, 14, 14. It seems to fall over at dark RGB triples.
 * Grey sequence with endpoints at Chroma=1: #f5faff, #d6dbe0, #b9bec3, #9ca1a6, #80858a, #656a6f, #4b5055, #33383c, #1c2125.
 * [1] And remembering there is no Base40 nor Base60. ⁓ Pelagic ( messages ) 04:32, 10 January 2022 (UTC)