How to set the color of the notification progress bar to something like "bg-red-100" ?

[StefanFlaschko]

How can I change the color of the notification progress bar to something like "bg-red-100" ?
I was reading the documentation, but could not figure out how or if that is possible.

The lines below only change the color to red, but not to "bg-red-100".

const toast = useToast();
    toast.add({
      id: 'update_downloaded',
      title: 'Update downloaded.',
      description: 'It will be installed on restart. Restart now?',      
      color: 'red',   
      progress: {        
        background: 'bg-red-100 dark:bg-red-100',
      },
      timeout: 200000,     
    });

Thanks a lot for any help?

Stackbilitz

Stackoverflow

[MadDog4533]

Hello,

Three ways, you can achieve this.

Defining via UI Prop passing to toast.add

Per the documentation "All the props of the Notification component can be passed to toast.add"

<script setup>
const toast = useToast();
toast.add({
  id: 'update_downloaded',
  title: 'Update downloaded.',
  description: 'It will be installed on restart. Restart now?',

  ui: {
    "progress": {
    "base": 'absolute bottom-0 end-0 start-0 h-1',
    "background": 'bg-red-100 dark:bg-red-100',
    }
  },

  timeout: 200000
});
</script>

Using a single <UNotification /> with v-bind and resolveComponent

This one also applies the padding that you had in Stackblitz to emphasize applying overrides for ui classes using v-bind.
resolveComponent applies an instance of the UNotification component to the underlying components prop.

Per the documentation the ui will apply your custom classes.

<template>
  <UNotification 
    title="test"
    :id="id"
    description="test"
    :timeout="5000"
    :callback="expired"
    :ui="ui"
  />
  <UButton @click="showNotification">Show</UButton>
</template>
<script setup>

const id = computed(() => 'update_downloaded');
const UNotification = ref({});

const ui = {
  padding: 'p-20',
  progress: {
    base: 'absolute bottom-0 end-0 start-0 h-1',
    background: 'bg-red-100 dark:bg-red-100',
  },
};

function showNotification() {
  UNotification.value = resolveComponent('UNotification');
}

function expired(){
  UNotification.value = {};
}

</script>

You could even make the ui prop reactive in your script setup and reference it with v-bind. Remember :prop="" is shorthand for: v-bind:prop=""

const ui = ref({
padding: 'p-20',
  progress: {
    base: 'absolute bottom-0 end-0 start-0 h-1',
    background: 'bg-red-100 dark:bg-red-100',
  }
})

Defining App Wide Color Theme

Lastly, you can define an app-wide color theme that can apply your chosen color across all elements or you can define components individually. Documentation

P.S. I noticed the question "It will be installed on restart. Restart now?", you could also add an action button to restart your context with the toast.add passing the actions param or using the v-bind:actions directive for a single off notification, the actions is outlined here

[CareTiger]

I have had the same issue with this widget and @benjamincanac says its not a nuxt/ui issue. this component can be designed better, you shouldn't have to customize this way

const toast = useToast();
toast.add({
  id: 'update_downloaded',
  title: 'Update downloaded.',
  description: 'It will be installed on restart. Restart now?',

  ui: {
    "progress": {
    "base": 'absolute bottom-0 end-0 start-0 h-1',
    "background": 'bg-red-100 dark:bg-red-100',
    }
  },

  timeout: 200000
});

that makes code hard to maintain.

[maxsteinwand]

You need to add the color to the Tailwind safelist:
Nuxt config:

ui: {
    safelistColors: ['red'],
},

Docs: https://ui.nuxtlabs.com/getting-started/theming#colors

Then you can normally use the color prop.

toast.add({
                color: 'red',
                title: "Error",
                icon: "i-heroicons-x-mark",
            })