A few more dark mode fixes#1700
Merged
Merged
Conversation
7 tasks
Contributor
|
The changes thus far look great! I'll take a look at As a future item (beyond this PR), the bottom bar could afford to be even more prominent in dark mode and better aligned with light mode. For example, light mode uses a dark background which provides strong contrast, but then that feels incongruent with dark on dark mode. Perhaps a full color bottom bar would achieve both - better visibility and consistency across themes.
|
ryankeairns
approved these changes
Mar 8, 2019
Contributor
ryankeairns
left a comment
ryankeairns
left a comment
There was a problem hiding this comment.
👍 LGTM
Created a one-line PR against your fork that fixes the EuiStat subdued color.
cchaos#17
Contributor
|
Changed the warning color to be more yellow. Also fixed the badges.
|
snide
approved these changes
Mar 8, 2019
Contributor
snide
left a comment
snide
left a comment
There was a problem hiding this comment.
OK. Think we're good here.
chandlerprall
pushed a commit
to chandlerprall/eui
that referenced
this pull request
Mar 11, 2019
chandlerprall
added a commit
that referenced
this pull request
Mar 11, 2019
* Update react-datepicker time selector to not _always_ scroll to preSelection time * Update react-datepicker time selection scroll-into-view onMount logic * revert props default changes I made for testing * fix scroll issue * fix ie issue * A few more dark mode fixes (#1700) * 9.2.0 * Updated documentation. * Make EuiPopover's repositionOnScroll prop optional in TS (#1705) * Make EuiPopover's repositionOnScroll prop optional in TS * changelog * fix range coloring * Fix scrollTop target * changelog
Shigawire
pushed a commit
to Shigawire/eui
that referenced
this pull request
May 10, 2019
* Update react-datepicker time selector to not _always_ scroll to preSelection time * Update react-datepicker time selection scroll-into-view onMount logic * revert props default changes I made for testing * fix scroll issue * fix ie issue * A few more dark mode fixes (elastic#1700) * 9.2.0 * Updated documentation. * Make EuiPopover's repositionOnScroll prop optional in TS (elastic#1705) * Make EuiPopover's repositionOnScroll prop optional in TS * changelog * fix range coloring * Fix scrollTop target * changelog
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A follow-up to @snide's dark colors update.
Big-ish change
The lightest three colors euiColorDarkShade, euiColorDarkestShade, euiColorFullShade were way too similar that they were indistinguishable from each other (especially on the dark background). I altered the dark and darkest shades to be a tad darker (still using the same hex values from the light theme).
I noticed the difference when looking at subdued text, which didn't look subdued at all. So now it does.
Badges
@snide Can you handle the update of these? You can push directly to this branch.
But I did fix the notification badge:
Other changes
Tooltips
before
after
Callout titles
They were just a tad on the saturated side, so I tinted them ever so slightly.
before
after
Bottom bar
Added a shadow to try to distinguish it from the background ever so slightly.
before
after
it does also effect light theme
Loading chart
before
after
Sidenav underline color
I fixed the focus/hover underline color of the side nav
before
after
Still needs attention
Like I said, badges, but also the text colors of accent, warning and danger are soo similar, it's really hard to distinguish. Is it possible to go a littler more yellow with the warning color?
@ryankeairns It seems something is not working with the subdued stat color?
Checklist
[ ] This was checked in mobile[ ] This was checked in IE11[ ] Any props added have proper autodocs[ ] Documentation examples were added[ ] This was checked for breaking changes and labeled appropriately[ ] Jest tests were updated or added to match the most common scenarios[ ] This was checked against keyboard-only and screenreader scenarios[ ] This required updates to Framer X components