如何将Porto Admin Theme中PNotify通知改为Bootstrap淡彩风格？

我帮你梳理下具体的实现步骤，亲测可以把Porto自带的深色通知改成PNotify官网那种Bootstrap淡彩柔和的配色：

1. 确认加载正确的PNotify Bootstrap主题样式 #

Porto Admin默认用的是自定义的深色PNotify样式，你需要先确保项目里加载了PNotify的Bootstrap主题CSS文件（对应你用的Bootstrap3/4版本）。如果之前没引入，需要把这个CSS文件加到你的页面里（比如pnotify.bootstrap4.css），注意要放在Porto自身的PNotify样式之后，这样才能覆盖默认样式。

2. 修改通知初始化代码 #

你当前的代码里带了Porto的自定义类，需要调整配置，启用Bootstrap主题并移除Porto的深色相关类：

function notify(message, type) {
  new PNotify({
    title: false,
    text: message,
    type: type,
    // 移除Porto的自定义深色类，换成Bootstrap主题的类
    addclass: 'ui-pnotify-bootstrap4', // 用Bootstrap3就改成'ui-pnotify-bootstrap3'
    icon: false,
    buttons: {
      sticker: false
    },
    // 启用Bootstrap主题的样式体系
    styling: 'bootstrap4', // Bootstrap3就写'bootstrap3'
    // 适配Bootstrap风格的动画
    animate: {
      animate: true,
      in_class: 'fadeIn',
      out_class: 'fadeOut'
    }
  });
}

3. 覆盖Porto残留样式（按需操作） #

如果还有部分深色样式没被完全覆盖，可以加一段自定义CSS清除残留：

/* 移除Porto深色通知的背景、边框样式 */
.ui-pnotify.ui-pnotify-bootstrap4 {
  background: transparent !important;
  border: none !important;
}
.ui-pnotify-bootstrap4 .ui-pnotify-container {
  background: inherit !important;
  border: inherit !important;
}

调整完成后，你的通知就会变成PNotify官网里Bootstrap主题那种淡彩柔和的配色了——比如成功通知是淡绿色、警告是淡黄色、错误是淡红色，和官网预览的效果一致。

内容的提问来源于stack exchange，提问作者jac