Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Darker background colors in dark mode for increased contrast. #8484

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

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.

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