Monaca Onsen UI Discord Chat Github Repo

Changing the background color of an ons.notification.confirm being created in Angular

  • Hello all,

    I can not find any examples on how to change the entire color of a confirmation dialog that is being created in angular.

    Here is my Angular code:

      title: 'Is this picture appropriate?',
      buttonLabels: ['APPROVE', 'REJECT', 'CANCEL'],
      messageHTML: "<img src=" + profilePictureSource + "></img>"

    I have tried giving the confirm dialog an id, and using the id in my CSS file to change the color. That did not work.
    I have also tried setting a modifier and then defining it my CSS file. That also did not work.

    Can someone show me an example of how I could change the color of this confirm dialog?

    I have tried the following and am still having trouble

      modifier: 'purple',
      title: 'Is this picture appropriate?',
      buttonLabels: ['APPROVE', 'REJECT', 'CANCEL'],
      messageHTML: "<img src=" + profilePictureSource + "></img>"
    .purple {
     background-color: rgba(138,43,226,0.92);

  • @rgins16 Try using:

    Specifically, here is CSS to change the alert:

    .alert-dialog {
     background-color: rgba(148,59,59,0.92);

  • @munsterlander Thanks for responding, can you please see my update?

  • @rgins16 Modifier expects specific reserved word classes and purple is not one of them. Have you tried using the word class instead of modifier?

  • @munsterlander Yes, it still does not work.

  • Onsen UI

    @rgins16 @munsterlander You can actually create your own modifiers:
    If the normal component uses classes like alert-dialog, alert-dialog-title and alert-dialog-content, a modifier purple will add the classes alert-dialog--purple, alert-dialog-title--purple and alert-dialog-content--purple to the corresponding child elements.

      .alert-dialog--purple {
        background-color: purple;

  • @Fran-Diox Wow! Learn something new everyday with Onsen! Also, for components2, is the github the same? I was wanting to look into adding an enhancement where the changed CSS is displayed in a tab so you do not have to download the whole theme and search for what you actually changed.

  • @Fran-Diox Thank you for the response.You solved my issue. However I have 2 questions:

    I noticed I need to define both




    in order to change the color for the whole dialog. I was not able to successfully use


    to change both. Any ideas?

    Additionally, how would I add a modifier for the buttons in the dialog?

  • And one more thing, after defining the title and content in CSS, I am left with this coloring of the dialog:


    Why is it that the very top of the dialog is not affected by the styling.

  • Additionally, how would I add a modifier for the buttons in the dialog?

    You don’t need to add modifiers to every child - as long as the parent has a modifier you can create a selector using the parent.

    .alert-dialog--purple ons-button {}
    .alert-dialog-content--purple ons-button {}

    or something similar. If for some reason the selectors are not powerful enough you can also add !important to your styles.

    As for the last picture - maybe if you create a codepen with it it would be easier for us to help.