Skip to content

Commit

Permalink
Fix issue with mover colors in dark themes. (#13869)
Browse files Browse the repository at this point in the history
The block editor supports an inverted UI to ensure contrast in themes that register themselves as having dark backgrounds (see https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#dark-backgrounds).

What this mode does, is invert the UI wherever it can, so dark gray borders are light gray on black backgrounds, and the mover icons are white instead of black.

But they shouldn't be in nested contexts, because in nested contexts the movers have a white background.

This PR fixes that.
  • Loading branch information
jasmussen authored and youknowriad committed Mar 6, 2019
1 parent 73ae8c3 commit e2edbe5
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions packages/editor/src/components/block-mover/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@
color: $light-opacity-300;
}

// Nested movers have a background, so don't invert the colors there.
.is-dark-theme .wp-block .wp-block & {
color: $dark-opacity-300;
}

&[aria-disabled="true"] {
cursor: default;
pointer-events: none;
Expand Down Expand Up @@ -72,6 +77,11 @@
.is-dark-theme & {
color: $light-opacity-500;
}

// Nested movers have a background, so don't invert the colors there.
.is-dark-theme .wp-block .wp-block & {
color: $dark-opacity-500;
}
}

&:not(:disabled):not([aria-disabled="true"]):not(.is-default):active {
Expand Down

0 comments on commit e2edbe5

Please sign in to comment.