# V-card background color

**URL:** <https://discourse.nodered.org/t/v-card-background-color/85578>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [15 February 2024 22:14 UTC](https://discourse.nodered.org/t/v-card-background-color/85578 "2024-02-15T22:14:35Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [15 February 2024 22:14 UTC](https://discourse.nodered.org/t/v-card-background-color/85578/1 "2024-02-15T22:14:35Z")

</div>

I want to replicate a notification function in DB2. I have a button with icon and badge teleported to the app-bar. The button is the activator to the menu that appears to show the notifications:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/3/233eddcfd0fdc8b4236c8dcb384d1ab3f76e26a6.png)

The notification area uses a `v-card` so I can also add buttons like the Dismiss All button. The issue is that the v-card picks up the navigation color as the background color from the DB2.  
But this is something I noticed already when I was working on my weather cards, and I was able to fix it by manually setting the `color="white"`. And I did the same here, but it seems to have no affect.

```auto
<template>
    <Teleport v-if="mounted" to="#app-bar-actions">
        <v-menu>
            <template v-slot:activator="{ props }">
                <v-btn variant="tonal" rounded="xl" size="large" v-bind="props">
                    <v-badge :content="counter" color="error" offset-x="-10" offset-y="-5">
                        <v-icon>mdi-message-badge-outline</v-icon>
                    </v-badge>
                </v-btn>
            </template>
            <v-card min-width="300" color="white">
                <v-list lines="two">
                    <v-list-item 
                        v-for="(item, index) in items" 
                        :key="index" 
                        :value="index"
                        :title="item.title"
                        :subtitle="item.subtitle"
                        :prepend-icon="item.icon"
                        @click="send({topic: 'selected', payload: item})">
                    </v-list-item>
                    
                </v-list>
                <v-divider inset></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn prepend-icon="mdi-check-all" @click="send({topic: 'dismissall', payload: ''})">Dismiss All</v-btn>
                </v-card-actions>
            </v-card>
        </v-menu>
    </Teleport>
</template>
<script>
    export default {
        data() {
            return {
                mounted: false,
                counter: 0,
                items: [],
            }
        },
        mounted() {
            this.mounted = true,
            this.counter = 0
        },
        watch: {
            msg: function(){            
                if(this.msg.payload != undefined) {                    
                    this.items = this.msg.payload;
                    this.counter = this.items.length;                  
                }
            }
        }
    }
</script>

```

Is this related to the fact that the `teleport` ties these to the app-bar?

Here is the flow if you want to try:

```auto
[{"id":"740c215e596fd18a","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"729ea5699cb6f3ac","ui":"","name":"Settings button","order":0,"width":0,"height":0,"head":"","format":"<template>\n <Teleport v-if=\"mounted\" to=\"#app-bar-actions\">\n <v-btn variant=\"tonal\" rounded=\"xl\" size=\"large\" @click=\"send({payload: 'clicked'})\">\n <v-badge :content=\"counter\" color=\"error\" offset-x=\"-10\" offset-y=\"-5\">\n <v-icon>mdi-wrench</v-icon>\n </v-badge>\n </v-btn>\n </Teleport>\n</template>\n<script>\n export default {\n data() {\n return {\n mounted: false,\n counter: 0\n }\n },\n mounted() {\n this.mounted = true,\n this.counter = 0\n },\n watch: {\n msg: function(){ \n if(this.msg.payload != undefined){ \n this.counter = this.msg.payload \n }\n }\n }\n }\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:page","className":"","x":430,"y":4220,"wires":[["1c5e386ecbadd53c"]]},{"id":"1c5e386ecbadd53c","type":"debug","z":"0e3249ddee2000e3","name":"debug 351","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":650,"y":4220,"wires":[]},{"id":"41867275b1c218b0","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":190,"y":4220,"wires":[["740c215e596fd18a"]]},{"id":"699a43faa5a7d694","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"4","payloadType":"num","x":190,"y":4260,"wires":[["740c215e596fd18a"]]},{"id":"aff916b303023c4c","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"729ea5699cb6f3ac","ui":"","name":"Notification button","order":0,"width":0,"height":0,"head":"","format":"<template>\n <Teleport v-if=\"mounted\" to=\"#app-bar-actions\">\n <v-menu>\n <template v-slot:activator=\"{ props }\">\n <v-btn variant=\"tonal\" rounded=\"xl\" size=\"large\" v-bind=\"props\">\n <v-badge :content=\"counter\" color=\"error\" offset-x=\"-10\" offset-y=\"-5\">\n <v-icon>mdi-message-badge-outline</v-icon>\n </v-badge>\n </v-btn>\n </template>\n <v-card min-width=\"300\" color=\"white\">\n <v-list lines=\"two\">\n <v-list-item \n v-for=\"(item, index) in items\" \n :key=\"index\" \n :value=\"index\"\n :title=\"item.title\"\n :subtitle=\"item.subtitle\"\n :prepend-icon=\"item.icon\"\n @click=\"send({topic: 'selected', payload: item})\">\n </v-list-item>\n \n </v-list>\n <v-divider inset></v-divider>\n <v-card-actions>\n <v-spacer></v-spacer>\n <v-btn prepend-icon=\"mdi-check-all\" @click=\"send({topic: 'dismissall', payload: ''})\">Dismiss All</v-btn>\n </v-card-actions>\n </v-card>\n </v-menu>\n </Teleport>\n</template>\n<script>\n export default {\n data() {\n return {\n mounted: false,\n counter: 0,\n items: [],\n }\n },\n mounted() {\n this.mounted = true,\n this.counter = 0\n },\n watch: {\n msg: function(){ \n if(this.msg.payload != undefined) { \n this.items = this.msg.payload;\n this.counter = this.items.length; \n }\n }\n }\n }\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:page","className":"","x":430,"y":4320,"wires":[["1c5e386ecbadd53c"]]},{"id":"823c370f6524821b","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"id\":0,\"title\":\"Device offline\",\"subtitle\":\"Device ESP32 offline since 10:34\",\"icon\":\"mdi-rss-off\"},{\"id\":1,\"title\":\"Weather alert\",\"subtitle\":\"Thunderstorm alert between 20:00 and 22:00\",\"icon\":\"mdi-lightning-bolt\"},{\"id\":2,\"title\":\"Rain report\",\"subtitle\":\"14mm rain fell in the last 24 hours\",\"icon\":\"mdi-weather-pouring\",\"action\":\"dismiss\"}]","payloadType":"json","x":180,"y":4320,"wires":[["aff916b303023c4c"]]},{"id":"729ea5699cb6f3ac","type":"ui-page","name":"Template examples","ui":"cb79bc4520925e32","path":"/templates","icon":"home","layout":"notebook","theme":"0d92c765bfad87e6","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [15 February 2024 22:20 UTC](https://discourse.nodered.org/t/v-card-background-color/85578/2 "2024-02-15T22:20:21Z")

</div>

> [@nygma2004](#):
>
> `v-list`

Are you sure it's not the list colour that needs setting?

Try adding `color` or `bg-color` to the v-list

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [15 February 2024 22:27 UTC](https://discourse.nodered.org/t/v-card-background-color/85578/3 "2024-02-15T22:27:59Z")

</div>

No. Before I added the button, I did not use the `v-card` only the `v-list` and and it had white background.  
I added both `color` and `bgcolor` to the list, but no change.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [15 February 2024 22:32 UTC](https://discourse.nodered.org/t/v-card-background-color/85578/4 "2024-02-15T22:32:01Z")

</div>

~~But have you tried since adding the v-card?~~

Ignore, just re-read

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 February 2024 05:53 UTC](https://discourse.nodered.org/t/v-card-background-color/85578/5 "2024-02-16T05:53:59Z")

</div>

override colors for `v-list` in overlay to have background colors not vue theme colors

```auto
.v-overlay__content .v-list{
    background: rgba(var(--v-theme-background));
    color: rgba(var(--v-theme-on-background),var(--v-high-emphasis-opacity));
}

```

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [16 February 2024 07:13 UTC](https://discourse.nodered.org/t/v-card-background-color/85578/6 "2024-02-16T07:13:23Z")

</div>

> [@hotNipi](#):
>
> ```auto
> .v-overlay__content .v-list{
> background: rgba(var(--v-theme-background));
> color: rgba(var(--v-theme-on-background),var(--v-high-emphasis-opacity));
> }
> 
> ```

Thank you. I modified it to this:

```auto
    .v-overlay__content .v-list{
    background: rgba(var(--v-group-background));
    color: rgba(var(--v-group-on-background),var(--v-high-emphasis-opacity));
    }

```

Otherwise the background was the light grey of the page background, not the white of the group background.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [16 February 2024 08:32 UTC](https://discourse.nodered.org/t/v-card-background-color/85578/7 "2024-02-16T08:32:09Z")

</div>

Loving the use of the Teleport 👏

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [16 February 2024 15:38 UTC](https://discourse.nodered.org/t/v-card-background-color/85578/8 "2024-02-16T15:38:00Z")

</div>

Yes, it is awesome. I am glad that I stumboled upon it in the documentation.  
I was thinking about other cases where I could use it, but could not really think about anything else. Maybe one can add a status bar to the dashboard with a similar apporach?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [16 February 2024 15:48 UTC](https://discourse.nodered.org/t/v-card-background-color/85578/9 "2024-02-16T15:48:58Z")

</div>

Yep, status bars, notifications and authentication/user data for [Multi User Dashboards](https://flowfuse.com/blog/2024/01/dashboard-2-multi-user/) is the thinking.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [1 March 2024 15:49 UTC](https://discourse.nodered.org/t/v-card-background-color/85578/10 "2024-03-01T15:49:16Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.