app/components/Ui/SystemBar.vue

<!--
System bars
-->

<template>
  <v-system-bar
      dark
      height="50"
      :class="'d-flex flex-row justify-center align-center text-center bg-' + backgroundColor + ' text-' + textColor"
  >
    <slot name="bar.text" />
  </v-system-bar>
</template>

<script setup lang="ts">
const props = defineProps({
  backgroundColor: {
    type: String,
    required: false,
    default: '#eeeeee'
  },
  textColor: {
    type: String,
    required: false,
    default: '#5f5f5f'
  }
})
</script>

<style scoped lang="scss">
</style>