QCard assumes any color I set is dark?



  • 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.



  • 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>
    


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



  • 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>


  • Getting the same issue




  • Admin

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