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

Fix "Elastic did not load properly" message color when system in dark mode #187653

Merged

Conversation

Dosant
Copy link
Contributor

@Dosant Dosant commented Jul 5, 2024

Summary

fix #187570

The problem was that when the system/browser was in dark mode, the default text color became white, but the background was forced to a specific bright color, so the text became unreadable. A quick fix is to also force the text color (I used EUI text colors)

Screenshot 2024-07-05 at 12 44 11

@Dosant Dosant added release_note:skip Skip the PR/issue when compiling release notes backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) Feature:Chrome Core's Chrome UI (sidenav, header, breadcrumbs) labels Jul 5, 2024
@Dosant Dosant requested a review from a team as a code owner July 5, 2024 10:51
Copy link
Contributor

@jloleysens jloleysens left a comment

Choose a reason for hiding this comment

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

Did not test, but proposed fix LGTM!

@Dosant Dosant enabled auto-merge (squash) July 5, 2024 11:40
@Dosant Dosant merged commit 305f665 into elastic:main Jul 5, 2024
32 checks passed
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jul 5, 2024
… mode (elastic#187653)

## Summary

fix elastic#187570

The problem was that when the system/browser was in dark mode, the
default text color became white, but the background was forced to a
specific bright color, so the text became unreadable. A quick fix is to
also force the text color (I used EUI text colors)

<img width="858" alt="Screenshot 2024-07-05 at 12 44 11"
src="https://github.com/elastic/kibana/assets/7784120/9ccefc04-60f6-46e3-a649-4e47cad043ac">

(cherry picked from commit 305f665)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.15

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Jul 8, 2024
…en system in dark mode (#187653) (#187670)

# Backport

This will backport the following commits from `main` to `8.15`:
- [Fix &quot;Elastic did not load properly&quot; message color when
system in dark mode
(#187653)](#187653)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Anton
Dosov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-07-05T12:30:42Z","message":"Fix
\"Elastic did not load properly\" message color when system in dark mode
(#187653)\n\n## Summary\r\n\r\nfix
https://github.com/elastic/kibana/issues/187570\r\n\r\nThe problem was
that when the system/browser was in dark mode, the\r\ndefault text color
became white, but the background was forced to a\r\nspecific bright
color, so the text became unreadable. A quick fix is to\r\nalso force
the text color (I used EUI text colors)\r\n\r\n\r\n<img width=\"858\"
alt=\"Screenshot 2024-07-05 at 12 44
11\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7784120/9ccefc04-60f6-46e3-a649-4e47cad043ac\">","sha":"305f66522c2cd4d2c578b33b9f62464de97d7190","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:prev-minor","Feature:Chrome","v8.16.0"],"title":"Fix
\"Elastic did not load properly\" message color when system in dark
mode","number":187653,"url":"https://github.com/elastic/kibana/pull/187653","mergeCommit":{"message":"Fix
\"Elastic did not load properly\" message color when system in dark mode
(#187653)\n\n## Summary\r\n\r\nfix
https://github.com/elastic/kibana/issues/187570\r\n\r\nThe problem was
that when the system/browser was in dark mode, the\r\ndefault text color
became white, but the background was forced to a\r\nspecific bright
color, so the text became unreadable. A quick fix is to\r\nalso force
the text color (I used EUI text colors)\r\n\r\n\r\n<img width=\"858\"
alt=\"Screenshot 2024-07-05 at 12 44
11\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7784120/9ccefc04-60f6-46e3-a649-4e47cad043ac\">","sha":"305f66522c2cd4d2c578b33b9f62464de97d7190"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/187653","number":187653,"mergeCommit":{"message":"Fix
\"Elastic did not load properly\" message color when system in dark mode
(#187653)\n\n## Summary\r\n\r\nfix
https://github.com/elastic/kibana/issues/187570\r\n\r\nThe problem was
that when the system/browser was in dark mode, the\r\ndefault text color
became white, but the background was forced to a\r\nspecific bright
color, so the text became unreadable. A quick fix is to\r\nalso force
the text color (I used EUI text colors)\r\n\r\n\r\n<img width=\"858\"
alt=\"Screenshot 2024-07-05 at 12 44
11\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7784120/9ccefc04-60f6-46e3-a649-4e47cad043ac\">","sha":"305f66522c2cd4d2c578b33b9f62464de97d7190"}}]}]
BACKPORT-->

Co-authored-by: Anton Dosov <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) Feature:Chrome Core's Chrome UI (sidenav, header, breadcrumbs) release_note:skip Skip the PR/issue when compiling release notes v8.15.0 v8.16.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make "Elastic did not load properly" message readable
3 participants