Set website colors to match ABC

[egrace479]

ABC Colors from @Ryan-Horns:

• turquoise: #4FB797
• grey blue: #667FAF
• Green: #73AB4E
• Dark grey blue: #2D3C58

MkDocs Custom Color

[egrace479]

The first two screenshots are light and dark mode with colors set as uploaded to the ux-colors branch following experiments with @gwtaylor. We used the ABC Logo "A" background color (#4E70B3) for all URL colors.

In dark mode, the Grey blue (#667FAF) looks better for the URLs, but it doesn't have high-enough contrast on the side navigation panels. I had tried to distinguish these, but couldn't get it to change on dark mode without setting the overall color. @annavik, I'm wondering if you might be able to help solve that? Or if you just have other ideas to make the color scheme better?

light/dark mode switching is handled through mkdocs.yaml—I just updated the schemas for each in the CSS file.

[gwtaylor]

Also noting that @annavik is at the AMI partners meeting in Denmark until Sep 26 so don't anticipate a response until next week 🙂

[annavik]

Hello @egrace479 ! With the current setup, here is how I would tweak the dark mode colors for links in the way you describe (from this CSS file):

/* Dark mode colors */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #2d3c58;
  --md-accent-fg-color: #4fb797;
}

/* Dark mode custom link color */
[data-md-color-scheme="slate"] .md-typeset a {
  color: #667faf;
}

/* Dark mode custom active link color (side panel) */
[data-md-color-scheme="slate"] .md-nav .md-nav__link--active {
  color: #667faf;
}

This would use the color "grey blue" for the dark mode links, without affecting the light mode. Is that what you had in mind?

I have the app running locally now, so let me know if anything else! :)

[egrace479]

Hello @egrace479 ! With the current setup, here is how I would tweak the dark mode colors for links in the way you describe (from this CSS file):

...

I have the app running locally now, so let me know if anything else! :)

Thanks @annavik!

Other than that, I'd just like your opinion. What do you think of the color scheme as we set it up? Is there anything else you would change to make it more cohesive or otherwise improve the look?

[annavik]

I think light mode looks nice! For the dark mode I would probably increase the contrast further for accessibility reasons. For example, the "grey blue" color on the dark background is still pretty low contrast.

Here is a tool I sometimes use: https://coolors.co/contrast-checker/667faf-1f2129

I might get back after the weekend with some more thoughts, but I think great work overall!

[egrace479]

https://coolors.co/contrast-checker/667faf-1f2129

Awesome, thank you! Always neat to find a new color-checker site. I like tanaguru contrast finder for flexibility in how you provide the color and how they fix it. #96ADCD and #90ADD8 look like they could be good options.

[egrace479]

I seem to have lost the hover color change on active and body links; it's only working on the sidepanel (as shown here).

[egrace479]

I figured out the hover color issue, resolved in this commit.