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 committed Feb 16, 2019
1 parent 2ce6115 commit 0f18024
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions packages/editor/src/components/block-mover/style.scss
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 0f18024

Please sign in to comment.