Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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.