How to give background color for Cf# mode in aem?

In AEM, I want to give a background color for the header while the page is in CF# mode.

How can I achieve this goal?

Solution

Note: Check if cq.authoring.dialog clientlib gets loaded in cf# mode before following the below steps.

Use cq.authoring.dialog clientlib and jQuery.

Create a clientlib with categories as cq.authoring.dialog. Scripts in this clientlib are loaded only in the author instance.
Add a class to your header dialog using the granite:class attribute if you are using coralui or class if otherwise, this is to hook onto the field in header using script in the above clientlib

  <header
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="ID"
    granite:class="headerSelector"
    name="./header"
    required="{Boolean}true"/>

You'll notice the class name headerSelector registered above in the DOM.
Use one of the OOTB granite event listeners like foundation-contentloaded to fire the script on initialization of the dialog.
Add background colors through jQuery

$(document).on('foundation-contentloaded', function (e) {//event fires when dialog loads
    var $headerField= $('.headerSelector');
    $headerField.css('background-color','blue');
})