Source Theme Subscribe Button Text Color

Themes
5

You’re right.
This can be quite challenging …
See: https://noiseamplifier.com/blog/how-to-remove-powered-by-ghost-from-portal-form/
The “Ghost Portal” is an embedded IFrame - see {{ghost_head}} in the default.hbs.
You can not directly apply styles to the inner IFrame element through parent window CSS class.

Based on the code of noiseamplifier.com I found a solution like this.
Maybe there another and better solution …

Code injection - Site footer

<script>
  window.addEventListener('load', ()=>{
    let ghostPortal = document.getElementById('ghost-portal-root');
    let ghostPortalIFrame = null; 
    let ghostPortalFinder = null;
    
    
       const findBtn = () => {
            let btn = ghostPortalIFrame.contentDocument.body.querySelector('.gh-portal-triggerbtn-container');
            let btnText = ghostPortalIFrame.contentDocument.body.querySelector('.gh-portal-triggerbtn-label');
            let btnSvg = ghostPortalIFrame.contentDocument.body.querySelector('.gh-portal-triggerbtn-container svg');
    
            if(btnSvg && btnText){
    
              // -------------- Change style here ----------------
              btn.style.backgroundColor = "#ffd100";        
              btnText.style.color = "#000000";
              btnSvg.style.color = "#000000";
              // -------------- End change style ----------------
             
              clearInterval(ghostPortalFinder);
            }
          }

    
       let portalObserver = new MutationObserver((mutations)=> {
          mutations.forEach((mutation) => {
             if(mutation.type === 'childList' && mutation.addedNodes[0]?.nodeName == 'IFRAME') {
                 ghostPortalIFrame = mutation.addedNodes[0];
                 ghostPortalFinder = setInterval(findBtn, 50);   
              }
          });         
         });
     
        portalObserver.observe(ghostPortal, {
           childList: true,
         })
 }) 
</script>