I want my lightning quick action background to be orange not white. I've tried many suggestions but nothing seems to work. How do I change the entire modal quick action background color

enter image description here

Here is my component:

<aura:component implements="force:hasRecordId,force:lightningQuickActionWithoutHeader" controller="abPartnerBilling" access="global">
  <aura:attribute name="wrapperCSS" type="String"/>
  <aura:unescapedHtml value="{!v.wrapperCSS}"/>
  <aura:attribute name="bType" type="String" default="Standard"/>
  <aura:attribute name="pBilling" type="Partner_Billable__c"/>
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

  <div class="abDiv">
    <lightning:notificationsLibrary aura:id="notifLib" />
      <div class="slds-border_bottom">
        <lightning:select name="bType" label="&nbsp;Billable Type" value="{!v.bType}" >
          <option value="Standard">Standard</option>
          <option value="Minimum">Minimum</option>
          <option value="Tiered">Tiered</option>
      <aura:if isTrue="{!v.bType=='Standard'}">
        Show input for a Standard billable item<br/>
      <aura:if isTrue="{!v.bType=='Minimum'}">
        Show input for a billable item with a minimum amount billed
      <aura:if isTrue="{!v.bType=='Tiered'}">
        Show input options for Tiered billing with possible minimum amount

  <div class="modal-footer slds-modal__footer">
    <lightning:button label="Submit" onclick="{!c.handleSubmit}"/>
    <lightning:button label="Cancel" onclick="{!c.handleCancel}"/>

Here is the css:

    background-color: blue;
    height: 100%;

.THIS.abDiv {
    background-color: orange;
    border-radius: 5px 5px;

Here is the controller:

    doInit : function(component, event, helper) {
      console.log('Init Function Called!');
      var rid = component.get('v.recordId');
      component.set("v.wrapperCSS", "<style>.cuf-scroller-outside { background-color: blue !important;</style>");
      console.log('Record ID: ' + rid);
      var action = component.get('c.createNewPB');
      action.setCallback(this, function(response) {
          var pb = response.getReturnValue();
          pb.Partner_Agreement__c = rid;
          console.log('Agreement ID: ' + pb.Partner_Agreement__c);

    handleError : function(component, event, helper) {
        console.log('Handle Error: ' + event.getParam("message"));
    handleCancel : function(component, event, helper) {
        console.log('Cancel button clicked!');
    handleSubmit : function(component, event, helper) {
        console.log('Submit button clicked!');

2 Answers 2


You have to change the approach. It is hard to add css to the standard modal opened from quick action.


I discovered I can do it before the first defined div by using this tag. I can also control the default width of the popped up modal from the lightning quick action as follows

<aura:html tag="style">
   .slds-modal__container {
       width: 80%;
       max-width: 90% !important;
    .slds-modal__content {
       background-color: lightgray !important;

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .