Skip to content

Conversation

@kusma
Copy link
Contributor

@kusma kusma commented Jun 23, 2023

Description

This increases the default brightness for the body text-color in dark mode, which inceases readability a bit.

It was also suggested to darken the background a bit, but we unfortunately don't have a darker gray in our color palette. So for now, let's increase the text-color by two notches, and leave the background color as-is instead.

Motivation & Context

See issue #38525

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

(not really sure any of the above applies here)

Live previews

Related issues

#38525

This increases the default brightness for the body text-color in dark
mode, which inceases readability a bit.

It was also suggested to darken the background a bit, but we
unfortunately don't have a darker gray in our color palette. So for now,
let's increase the text-color by two notches, and leave the background
color as-is instead.
@kusma kusma requested a review from a team as a code owner June 23, 2023 10:22
@kusma
Copy link
Contributor Author

kusma commented Jun 23, 2023

This matches the work-around I implemented for mesa3d.org.

@kusma
Copy link
Contributor Author

kusma commented Jun 23, 2023

Worth to note, this increases the contrast ratio from 8.22 to 13.1.

@pranjal32
Copy link

The original contrast really helps to differentiate between body text and headings as a dual tone effect, however with everything as white text, there seems to be a bit of blending.

image

image

@kusma
Copy link
Contributor Author

kusma commented Jun 23, 2023

The original contrast really helps to differentiate between body text and headings as a dual tone effect, however with everything as white text, there seems to be a bit of blending.

image

image

It's not white, it's just a bit closer to white.

FWIW, the contrast between the body-text and the headings are now more similar to what we do for light mode, which seems like a good thing to me:

image

Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels like a great first start to me, thanks!

@mdo mdo merged commit 14292b4 into twbs:main Jun 25, 2023
@mdo mdo mentioned this pull request Jun 25, 2023
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

No open projects
Status: Done

Development

Successfully merging this pull request may close these issues.

4 participants