search

analogjs / analog

The fullstack meta-framework for Angular. Powered by Vite and Nitro
https://analogjs.org
MIT License
2.62k stars 252 forks source link

[DOCS]: Update homepage header to different shade of red in dark mode #39

Closed brandonroberts closed 1 year ago

brandonroberts commented 2 years ago

Update the color for the header to match on lite/dark modes. The red should be the one used in the light mode on both.

That being said, the red has been brightened in dark mode for accessibility WCAG-AA contrast concerns when used with black as recommended by Docusaurus.

Originally posted by @LayZeeDK in https://github.com/analogjs/analog/issues/38#issuecomment-1219769649

LayZeeDK commented 2 years ago

Use this Docusaurus tool to generate shades and tints of red for dark mode.

The Infima color variables used by Docusaurus are defined in https://github.com/analogjs/analog/blob/main/apps/docs-app/src/css/custom.css.

umairhm commented 2 years ago

@brandonroberts I will like to give this a try, please assign it to me.

umairhm commented 2 years ago

@brandonroberts @LayZeeDK What if we keep the same banner color in both dark and light modes, including the copy and buttons? The rest of the page changes anyways, and the banner can stay as-is.

Or we can do what the official Angular website is doing, it's a gradient that starts from the same color on both light and dark, and ends differently to create a slight visual difference.

LayZeeDK commented 2 years ago

The banner is probably where the color variation is currently the most apparent. How about the opposite of what you're suggesting? Banner uses the real red while everything else uses the brighter palette in dark mode.

brandonroberts commented 2 years ago

@LayZeeDK @umairhm the other color choices are fine in my opinion. I'd have to see a preview of the proposed changes

brandonroberts commented 1 year ago

Resolved in https://github.com/analogjs/analog/pull/251