<script setup>
import { useLight } from "#imports";
import { computed } from "vue";
const props = defineProps({
  color: { type: String, required: false, default: void 0 },
  textColor: { type: String, required: false, default: "white" },
  dense: { type: Boolean, required: false, skipCheck: true },
  dark: { type: [Boolean, null], required: false, skipCheck: true }
});
const light = useLight();
const barClass = computed(() => {
  const c = [`text-${props.textColor}`];
  const color = props.color || light.color;
  c.push(`bg-${color}`);
  return c;
});
</script>

<template>
    <q-bar :class="barClass" :dense="props.dense">
        <slot></slot>
    </q-bar>
</template>
