Updating subtitle colors in dark mode

[leo3tian]

Issue: #399 Subtitle colors were too dark and violated WCAG guidelines.

Work I did: Changed the header color from dark gray to white, using the --wordplay-foreground variable in app.html

What the reviewer may need to consider: From a design standpoint, the reviewer may need to consider whether the color is visually different enough from the rest of the text. The reviewer may also need to consider how this change impacts the rest of the website, other than just the subtitles on the front page. I've provided screenshots at #399, showing how this change impacts other pages. Generally, I think any switch from the previous gray to white should be good for visibility but it's good to check other parts of the website to see if there are any unwanted changes.

[joonpiter]

Hi @leo3tian are you asking for a design review?

[leo3tian]

Right, it would be smarter to apply changes to --color-dark-grey in dark mode instead of changing the value for --wordplay-header. I've changed --color-dark-grey to be brighter, but the problem now is that there's a discrepancy in color values: After changing --color-dark-grey, dark grey now appears to be lighter than light grey and very light grey. I propose that we get rid of light grey and very light grey altogether - --color-dark-grey seems to be light enough already for all elements that we would color grey.

[amyjko]

It does create a misalignment between the names of the colors and their relative lightness, but that is common with dark mode: names don't always preserve their semantics when negated for darkness.

Light grey and very light grey are used for other purposes, not just text (e.g., alternating row colors in tables, widget backgrounds). Removing them would break the visual design of those other elements.