diff --git a/ui/src/components/TickerBar.vue b/ui/src/components/TickerBar.vue
index d79a01c..5d21395 100644
--- a/ui/src/components/TickerBar.vue
+++ b/ui/src/components/TickerBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-footer :color="variant" :dark="is_dark" fixed>
+  <v-footer :color="color" :dark="is_dark" fixed>
     <span class="text-h6" :style="{ 'animation-duration': marqueeDuration }">
       <div v-html="content" />
     </span>
@@ -16,7 +16,7 @@ export default class TickerBar extends Vue {
   private readonly content!: string;
 
   @Prop({ default: "primary" })
-  private readonly variant!: string;
+  private readonly color!: string;
 
   private get is_dark(): boolean {
     return this.footerColor.isDark();
@@ -24,14 +24,14 @@ export default class TickerBar extends Vue {
 
   private get footerColor(): Color {
     // try getting from vuetify theme
-    let color = this.$vuetify.theme.themes.light[this.variant];
+    let color = this.$vuetify.theme.themes.light[this.color];
 
     if (typeof color === "string") {
       return Color(color);
     }
 
     // fallback: parse color directly
-    return Color(this.variant);
+    return Color(this.color);
   }
 
   private get marqueeDuration(): string {