diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue
index 75680355036..f14d8e211ae 100644
--- a/kolibri/core/assets/src/views/AppBar.vue
+++ b/kolibri/core/assets/src/views/AppBar.vue
@@ -10,9 +10,12 @@
       <UiToolbar
         :removeNavIcon="showAppNavView"
         type="clear"
-        textColor="black"
+        :textColor="$themeTokens.appBarText || $themeTokens.text"
         class="app-bar"
-        :style="{ height: topBarHeight + 'px' }"
+        :style="{
+          height: topBarHeight + 'px',
+          color: $themeTokens.appBarText || $themeTokens.text,
+        }"
         :raised="false"
         :removeBrandDivider="true"
       >
@@ -26,7 +29,7 @@
         >
           <KIconButton
             icon="menu"
-            :color="$themeTokens.text"
+            :color="$themeTokens.appBarText || $themeTokens.text"
             :ariaLabel="$tr('openNav')"
             @click="$emit('toggleSideNav')"
           />
@@ -49,6 +52,7 @@
           <slot name="sub-nav">
             <Navbar
               v-if="links.length > 0"
+              :textColor="$themeTokens.appBarText || $themeTokens.text"
               :navigationLinks="links"
             />
           </slot>
@@ -94,7 +98,7 @@
               <KIcon
                 icon="person"
                 :style="{
-                  fill: $themeTokens.text,
+                  fill: $themeTokens.appBarText || $themeTokens.text,
                   height: '24px',
                   width: '24px',
                   margin: '4px',
diff --git a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue b/kolibri/core/assets/src/views/Navbar/NavbarLink.vue
index a0d720ea7f8..67169a7159d 100644
--- a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue
+++ b/kolibri/core/assets/src/views/Navbar/NavbarLink.vue
@@ -57,11 +57,15 @@
         required: true,
         validator: validateLinkObject,
       },
+      textColor: {
+        type: String,
+        default: null,
+      },
     },
     computed: {
       tabStyles() {
         return {
-          color: this.$themeTokens.text,
+          color: this.textColor || this.$themeTokens.text,
           ':hover': {
             'background-color': this.$themeBrand.secondary.v_600,
           },
@@ -81,7 +85,7 @@
       activeClasses() {
         // return both fixed and dynamic classes
         return `router-link-active ${this.$computedClass({
-          color: this.$themeTokens.text,
+          color: this.textColor || this.$themeTokens.text,
         })}`;
       },
     },
diff --git a/kolibri/core/assets/src/views/Navbar/index.vue b/kolibri/core/assets/src/views/Navbar/index.vue
index 556c85b4046..94d4a4a9805 100644
--- a/kolibri/core/assets/src/views/Navbar/index.vue
+++ b/kolibri/core/assets/src/views/Navbar/index.vue
@@ -13,10 +13,11 @@
         ref="navLinks"
         :title="link.title"
         :link="link.link"
+        :textColor="textColor || $themeTokens.text"
       >
         <KIcon
           :icon="link.icon"
-          :color="$themeTokens.text"
+          :color="textColor || $themeTokens.text"
         />
       </NavbarLink>
     </ul>
@@ -27,7 +28,7 @@
       :ariaLabel="coreString('moreOptions')"
       icon="optionsHorizontal"
       appearance="flat-button"
-      :color="$themeTokens.text"
+      :color="textColor || $themeTokens.text"
       :primary="false"
       class="kiconbutton-style"
     >
@@ -81,6 +82,10 @@
           return values.every(value => value.link.name);
         },
       },
+      textColor: {
+        type: String,
+        default: null,
+      },
     },
     data() {
       return { mounted: false };