Skip to content

Conversation

isoos
Copy link
Collaborator

@isoos isoos commented Jan 22, 2025

Following further Lighthouse reports on not enough contrast in certain context, and also comparing the brightness and (de)saturation of these colors with other dark mode palettes.

  • #1b1b1b -> #121317 (default background)
  • #373737 -> #2f3034 (hover bg)
  • #41424c -> #242b32 (inset, code highlight bg)

Before/after example for hover:
image
image

Before/after example for code highlight:
image
image

@isoos isoos requested review from jonasfj and sigurdm January 22, 2025 14:15
@isoos
Copy link
Collaborator Author

isoos commented Jan 22, 2025

/cc @parlough

@jonasfj jonasfj requested review from szakarias and removed request for jonasfj January 22, 2025 16:06
@jonasfj
Copy link
Member

jonasfj commented Jan 22, 2025

I don't have any strong feelings here, mostly I hope we can align with dart.dev plans @parlough ?

@parlough
Copy link
Member

parlough commented Jan 23, 2025

Thanks for working to improve the contrast here!

I'm not sure I love completely losing the saturation. I feel it makes the site seem a bit grey/yellow and not Dart related.

I think to maintain some saturation and further improve the contrast, we can go a bit darker. I imagine many developers would want a bit darker anyway.


Playing around a bit with the same content, I found something around this combination works pretty well. What do you think?

Page background: #121317
Code block background: #242b32

Darker, more saturated colors

Slightly lower saturation and/or increased lightness could work as well, particularly for the code block.

@isoos isoos changed the title Darker and desaturated background colors in dark mode for increased contrast. Darker background colors in dark mode for increased contrast. Jan 23, 2025
@isoos
Copy link
Collaborator Author

isoos commented Jan 23, 2025

Updated the PR and its images with the darker colors @parlough suggested + experimented with a relevant hover background too. (also staging update ongoing).
PTAL.

@isoos isoos merged commit f6fc85f into dart-lang:master Jan 24, 2025
31 checks passed
@isoos isoos deleted the darker-bgcolors branch January 24, 2025 09:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants