diff --git a/src/core/features/viewer/components/text/text.scss b/src/core/features/viewer/components/text/text.scss
index 4377e35e3..05570b320 100644
--- a/src/core/features/viewer/components/text/text.scss
+++ b/src/core/features/viewer/components/text/text.scss
@@ -1,5 +1,3 @@
-ion-app.app-root page-core-viewer-text {
-    ion-footer {
-        padding: 6px;
-    }
+ion-footer {
+    padding: 6px;
 }
diff --git a/src/core/features/viewer/components/text/text.ts b/src/core/features/viewer/components/text/text.ts
index cd72a31f6..a6ae057fa 100644
--- a/src/core/features/viewer/components/text/text.ts
+++ b/src/core/features/viewer/components/text/text.ts
@@ -24,6 +24,7 @@ import { ModalController } from '@singletons';
 @Component({
     selector: 'page-core-viewer-text',
     templateUrl: 'text.html',
+    styleUrls: ['text.scss'],
 })
 export class CoreViewerTextComponent {
 
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 732686dd3..f8384c689 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -152,6 +152,7 @@ ion-toolbar {
 // Header.
 ion-header {
     z-index: 12; // To hide ion-slides on scroll.
+    --core-header-buttons-background: var(--core-header-toolbar-background);
 
     ion-toolbar {
         ion-spinner {
@@ -159,26 +160,22 @@ ion-header {
         }
 
         ion-back-button,
-        .in-toolbar.button-clear {
+        .in-toolbar.button-clear,
+        .in-toolbar.button-solid,
+        .button.button-clear,
+        .button.button-solid {
             --color: var(--core-header-toolbar-color);
-            --background: var(--core-header-toolbar-background);
+            --background: var(--core-header-buttons-background);
             --ion-toolbar-color: var(--core-header-toolbar-color);
             --border-radius: var(--huge-radius);
+            --primary: var(--core-header-toolbar-color);
         }
         ion-back-button::part(text) {
             display: none;
         }
 
-        .button.button-clear,
-        .button.button-solid {
-            --background: var(--core-header-toolbar-background);
-            --color: var(--core-header-toolbar-color);
-            --primary: var(--core-header-toolbar-color);
-        }
-
         .button.button-clear.button-has-icon-only,
         .button.button-solid.button-has-icon-only {
-            --border-radius: var(--huge-radius);
             width: var(--a11y-min-target-size);
             height: var(--a11y-min-target-size);
             ion-icon {
@@ -186,7 +183,6 @@ ion-header {
             }
         }
 
-
         .core-navbar-button-hidden {
             display: none !important;
         }
@@ -262,6 +258,10 @@ ion-footer ion-toolbar.ion-color-contrast {
     background-color: var(--contrast-background);
 }
 
+ion-footer {
+    background-color: var(--contrast-background);
+}
+
 // Ionic icon.
 ion-icon {
     position: relative;
@@ -1474,15 +1474,9 @@ ion-header.no-title {
     --core-header-toolbar-border-width: 0;
     --core-header-toolbar-background: transparent;
     --core-header-shadow: none !important;
-
-    ion-toolbar .button.button-clear,
-    ion-toolbar .button.button-solid {
-        --background: var(--ion-background-color);
-    }
+    --core-header-buttons-background: var(--ion-background-color);
 }
 
-
-
 // To make core-swipe-slides fill the remaining height.
 .core-swipe-slides-container {
     display: flex;