title: Unable to change vuetify's card/navigation drawer's height and colour
body: <p>I'm having a difficult time setting the height to match size of the browser window and setting the color of vuetify's card.</p>
  <p>I've copied the example code from vuetiy as show below:</p>
  <pre><code>&lt;template&gt;
    &lt;v-card
      class=&quot;mx-auto&quot;
      height=&quot;400&quot;
      width=&quot;256&quot;
    &gt;
      &lt;v-navigation-drawer
        class=&quot;deep-purple accent-4&quot;
        dark
        permanent
      &gt;
        &lt;v-list&gt;
          &lt;v-list-item
            v-for=&quot;item in items&quot;
            :key=&quot;item.title&quot;
            link
          &gt;
            &lt;v-list-item-icon&gt;
              &lt;v-icon&gt;{{ item.icon }}&lt;/v-icon&gt;
            &lt;/v-list-item-icon&gt;
  
            &lt;v-list-item-content&gt;
              &lt;v-list-item-title&gt;{{ item.title }}&lt;/v-list-item-title&gt;
            &lt;/v-list-item-content&gt;
          &lt;/v-list-item&gt;
        &lt;/v-list&gt;
  
        &lt;template v-slot:append&gt;
          &lt;div class=&quot;pa-2&quot;&gt;
            &lt;v-btn block&gt;
              Logout
            &lt;/v-btn&gt;
          &lt;/div&gt;
        &lt;/template&gt;
      &lt;/v-navigation-drawer&gt;
    &lt;/v-card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data () {
        return {
          items: [
            { title: 'Dashboard', icon: 'mdi-view-dashboard' },
            { title: 'Account', icon: 'mdi-account-box' },
            { title: 'Admin', icon: 'mdi-gavel' },
          ],
        }
      },
    }
  &lt;/script&gt;
  </code></pre>
  <p>But the colour doesn't show up as purple. Instead it's showing as dark grey. If I remove the <code>dark</code> attribute in <code>v-navigation-drawer</code> then it just appears white.</p>
  <p>Changing the <code>v-card</code>'s <code>height</code> to <code>100%</code> seems to just change the card's height to 100 instead of 100%. I'm really confused as from what I can see here, <a href="https://stackoverflow.com/questions/49949548/how-to-set-the-height-of-vuetify-card/58379097">How to set the height of vuetify card</a>, having</p>
  <pre><code>&lt;v-card
     height=100%
  &gt;
  </code></pre>
  <p>would have fixed the issue but it doesn't. I must be missing something simple?</p>