QCard assumes any color I set is dark?

[tmladek]

Hello, I’ve noticed that no matter what color I pass as the color prop to QCard, it colors the text white and adds a q-card-dark class to the outermost <div> of the QCard, which also causes the separator to be white.

This happens even when setting the color to white, which means the QCard appears completely blank.

Is this a bug? Or can this be overriden? I know I can pass the textColor prop to override the text color, but this doesn’t change the color of the separator.

[Hawkeye64]

That does not happen in my code. There must be something wrong. Here’s an example. I’m using sockets to send database notifications to the client. If the sockets goes down, I show this modal that uses q-card:

<template>
  <q-modal v-model="openModal" no-esc-dismiss no-backdrop-dismiss no-route-dismiss position="top" @hide="onClose" style="min-width: 380px;">
    <q-card>
      <q-card-title>
        <q-icon name="fas fa-exclamation-circle" color="red-6" /> Your Connection Has Been Lost
        <q-card-separator></q-card-separator>
      </q-card-title>
      <q-card-main>

        <div class="row justify-center">
          <div class="col">
            <p>You will be automatically reconnected when the server is available.</p>
            <p>The server may be down or inaccessible. You could also check if you have an internet connection.</p>
            <p>If the problem persists contact your System Administrator.</p>
            <p>{{ serverErrorMessage }}</p>
          </div>
        </div>

      </q-card-main>
    </q-card>
  </q-modal>
</template>

[tmladek]

It doesn’t seem like you’re setting the color of the QCard though?

[steve]

I am experiencing a similar issue when setting q-card to color=“white”. All text is white and non colored buttons look invisible.
https://jsfiddle.net/gb8h79o1/4/

 <q-card color="white">
   <q-card-main>
     <p>You cannot see me!</p>
     <q-btn label="Peek-a-boo"></q-btn>
     <q-btn label="I'm White, but inherit" color="white"></q-btn>
   </q-card-main>
 </q-card>

[treethought]

Getting the same issue

[tmladek]

Submitted an issue: https://github.com/quasarframework/quasar/issues/2546

[rstoenescu]

Added a Boolean dark prop to QCard, to be used only when the color is dark. Will be available in Quasar v0.17.13.