diff --git a/src/theme/components/collapsible-header.scss b/src/theme/components/collapsible-header.scss
index f9993274d..06eb839e0 100644
--- a/src/theme/components/collapsible-header.scss
+++ b/src/theme/components/collapsible-header.scss
@@ -24,7 +24,9 @@
 
     &:not(.is-collapsed) .collapsible-header-collapsed {
         --core-header-toolbar-border-width: 0;
-        --core-header-toolbar-background: transparent;
+        ion-toolbar {
+            --background: transparent;
+        }
 
         h1 {
             opacity: 0;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index a08dc3fa9..41a76c55c 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -161,6 +161,7 @@ ion-header {
         ion-back-button,
         .in-toolbar.button-clear {
             --color: var(--core-header-toolbar-color);
+            --background: var(--core-header-toolbar-background);
             --ion-toolbar-color: var(--core-header-toolbar-color);
             --border-radius: var(--huge-radius);
         }
@@ -170,7 +171,7 @@ ion-header {
 
         .button.button-clear,
         .button.button-solid {
-            --background: transparent;
+            --background: var(--core-header-toolbar-background);
             --color: var(--core-header-toolbar-color);
             --primary: var(--core-header-toolbar-color);
         }