-
-
Notifications
You must be signed in to change notification settings - Fork 78.9k
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
Dark mode colors have low contrast #38525
Comments
FWIW, we've using the dark-mode (based on preference with JS) on docs.mesa3d.org, and we've gotten complaints from users about the lack of contrast in the dark-mode as well. |
The color contrast in dark mode ( |
I see that the contrast works in theory, but as mentioned by @kusma and in my opinion, in practice it is still not readable for everyday text. Compare the comments here on GitHub, with a contrast ratio of 12.26:1. |
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.
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.
Fixed by #38815. |
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.
Prerequisites
Describe the issue
The new darkmode colors make text very hard to read due to bad contrast. Compare these screenshots:
Unmodified:
Text Color #eee:
Text Color #eee and Body Color #111 (bootstrap-darkmode):
I propose changing the
$body-color-dark
to something brighter like #eee for improved readability.Reduced test cases
What operating system(s) are you seeing the problem on?
Windows, macOS, Android, iOS, Linux
What browser(s) are you seeing the problem on?
Chrome, Safari, Firefox, Microsoft Edge, Opera
What version of Bootstrap are you using?
v5.3.0-alpha3
The text was updated successfully, but these errors were encountered: