diff --git a/kolibri/core/assets/src/styles/themeSpec.js b/kolibri/core/assets/src/styles/themeSpec.js
index 9c0cc1cc69d..92f200ff979 100644
--- a/kolibri/core/assets/src/styles/themeSpec.js
+++ b/kolibri/core/assets/src/styles/themeSpec.js
@@ -49,11 +49,11 @@ export default {
     spec: {
       background: {
         type: String,
-        default: themeTokens.appBar,
+        default: themeTokens().appBar,
       },
       textColor: {
         type: String,
-        default: themeTokens.text,
+        default: themeTokens().text,
       },
       topLogo: {
         type: Object,
diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue
index 51cf18d5668..c09363c1546 100644
--- a/kolibri/core/assets/src/views/AppBar.vue
+++ b/kolibri/core/assets/src/views/AppBar.vue
@@ -2,7 +2,10 @@
 
   <div
     v-show="!$isPrint"
-    :style="{ backgroundColor: $themeConfig.appBar.background }"
+    :style="{
+      backgroundColor: themeConfig.appBar.background,
+      color: themeConfig.appBar.textColor,
+    }"
   >
     <header>
       <SkipNavigationLink />
@@ -10,11 +13,11 @@
       <UiToolbar
         :removeNavIcon="showAppNavView"
         type="clear"
-        :textColor="$themeConfig.appBar.textColor"
+        :textColor="themeConfig.appBar.textColor"
         class="app-bar"
         :style="{
           height: topBarHeight + 'px',
-          color: $themeConfig.appBar.textColor,
+          color: themeConfig.appBar.textColor,
         }"
         :raised="false"
         :removeBrandDivider="true"
@@ -29,7 +32,7 @@
         >
           <KIconButton
             icon="menu"
-            :color="$themeConfig.appBar.textColor"
+            :color="themeConfig.appBar.textColor"
             :ariaLabel="$tr('openNav')"
             @click="$emit('toggleSideNav')"
           />
@@ -52,7 +55,7 @@
           <slot name="sub-nav">
             <Navbar
               v-if="links.length > 0"
-              :textColor="$themeConfig.appBar.textColor"
+              :textColor="themeConfig.appBar.textColor"
               :navigationLinks="links"
             />
           </slot>
@@ -98,7 +101,7 @@
               <KIcon
                 icon="person"
                 :style="{
-                  fill: $themeConfig.appBar.textColor,
+                  fill: themeConfig.appBar.textColor,
                   height: '24px',
                   width: '24px',
                   margin: '4px',
diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue
index b27088a8a15..dd01c6842c2 100644
--- a/kolibri/core/assets/src/views/SideNav.vue
+++ b/kolibri/core/assets/src/views/SideNav.vue
@@ -196,7 +196,8 @@
               height: topBarHeight + 'px',
               width: `${width}`,
               paddingTop: windowIsSmall ? '4px' : '8px',
-              backgroundColor: $themeConfig.appBar.background,
+              backgroundColor: themeConfig.appBar.background,
+              color: themeConfig.appBar.textColor,
             }"
           >
             <KIconButton