Unable to change vuetify's card/navigation drawer's height and colour - vue.js

Question

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

Answer 1

So I did end up able to modify change the height and the colour although I'm not sure why it can't be done within the card tag.
In the navigation drawer I made some changes as shown below and the color as well as the height changed.
<v-navigation-drawer
class="accent-4"
width="200"
height="100vh"
color="rgba(56, 95, 115,0.5)"
permanent
>
I also removed the v-card tag completely.