diff --git a/core/modules/toolbar/css/toolbar.icons.theme.css b/core/modules/toolbar/css/toolbar.icons.theme.css
index cb052a64ae36df9bb96a7be20a002feec61be0e9..569ce3bb104447ca51a53265f1a745a78de08d52 100644
--- a/core/modules/toolbar/css/toolbar.icons.theme.css
+++ b/core/modules/toolbar/css/toolbar.icons.theme.css
@@ -87,6 +87,10 @@
   padding-left: 4em;
 }
 
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
+  filter: invert(100%);
+}
+
 /**
  * Top level icons.
  */
diff --git a/core/modules/toolbar/css/toolbar.icons.theme.pcss.css b/core/modules/toolbar/css/toolbar.icons.theme.pcss.css
index 98c6d92ee552da6f19e2ae79a8eb95b7dc708d0b..582e2898e010ea05c08f4fe52739385280862df3 100644
--- a/core/modules/toolbar/css/toolbar.icons.theme.pcss.css
+++ b/core/modules/toolbar/css/toolbar.icons.theme.pcss.css
@@ -67,6 +67,9 @@
   padding-right: 2.75em;
   padding-left: 4em;
 }
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
+  filter: invert(100%);
+}
 
 /**
  * Top level icons.
diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css
index b0c8ada389208d75ffec686698b7643069ba5bcf..ea108f658098670c5b3063e9e8ac0b9ace771986 100644
--- a/core/modules/toolbar/css/toolbar.theme.css
+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -47,7 +47,9 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
 }
 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
-  background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
+  color: #000;
+  border-bottom: 1px solid #ddd;
+  background-color: #fff;
 }
 
 /**
diff --git a/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarApiTest.js b/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarApiTest.js
index 8e10c135a0117d869c26356d684ce9243613524e..95ff877edf025bcb4b62139dff59534567b04cf2 100644
--- a/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarApiTest.js
+++ b/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarApiTest.js
@@ -81,7 +81,7 @@ module.exports = {
         toReturn.toolbarModelOffsetsRight =
           models.toolbarModel.get('offsets').right === 0;
         toReturn.toolbarModelOffsetsTop =
-          models.toolbarModel.get('offsets').top === 79;
+          models.toolbarModel.get('offsets').top === 80;
         toReturn.toolbarModelSubtrees =
           models.menuModel.get('subtrees') === null;
         return toReturn;
diff --git a/core/themes/claro/css/theme/toolbar.icons.theme.css b/core/themes/claro/css/theme/toolbar.icons.theme.css
index ac70bec61064baf443609bebe4a31b5141812b2d..872f651dff1750aacb733e98f7724876d267abbf 100644
--- a/core/themes/claro/css/theme/toolbar.icons.theme.css
+++ b/core/themes/claro/css/theme/toolbar.icons.theme.css
@@ -90,6 +90,10 @@
   padding-left: 4em;
 }
 
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
+  filter: invert(100%);
+}
+
 /**
  * Top level icons.
  */
diff --git a/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css b/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
index b7439a20456e65f7f22bbfb401488b350600dffb..b98c87aa98c6e463a861f2d076adba92fdd8ed0c 100644
--- a/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
+++ b/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
@@ -71,6 +71,10 @@
   padding-left: 4em;
 }
 
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
+  filter: invert(100%);
+}
+
 /**
  * Top level icons.
  */
diff --git a/core/themes/claro/css/theme/toolbar.theme.css b/core/themes/claro/css/theme/toolbar.theme.css
index bd9da734d653ababb1c757bbf936fb28778251fb..9285456847b9c52f67abbd4f5b37dfed27b3af72 100644
--- a/core/themes/claro/css/theme/toolbar.theme.css
+++ b/core/themes/claro/css/theme/toolbar.theme.css
@@ -57,7 +57,9 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
 }
 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
-  background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
+  color: #000;
+  border-bottom: 1px solid #ddd;
+  background-color: #fff;
 }
 /**
  * Toolbar tray.
diff --git a/core/themes/claro/css/theme/toolbar.theme.pcss.css b/core/themes/claro/css/theme/toolbar.theme.pcss.css
index 7f1e21764f3a707ac056ce101b7ea06b108407b1..c732bdb270c34e2913704fd7c3b850d9e5bc3bc9 100644
--- a/core/themes/claro/css/theme/toolbar.theme.pcss.css
+++ b/core/themes/claro/css/theme/toolbar.theme.pcss.css
@@ -50,7 +50,9 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
 }
 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
-  background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
+  color: #000;
+  border-bottom: 1px solid #ddd;
+  background-color: #fff;
 }
 
 /**