I tried formatting the code in markdown to post here. Obviously that did not work.

I tried formatting the code in markdown to post here. Obviously that did not work.

Yes, it's easiest to use <pre> before and </pre> after your code than to preface very line with an extra space.

/*** PRIVATE BROWSING ***/

@-moz-document url(about:privatebrowsing) {
  /* Changes the logo on the home screen*/
  .logo {
    background: url("Firefox Halo with Paw.png") no-repeat center center !important;
  }
  .logo-and-wordmark {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 49px !important;
  }
  /* Changes the home screen color */
  html.private {
    --in-content-page-background: #261010 !important;
  }
}

Could you check the following preference:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.

(2) In the search box in the page, type or paste moz-d and pause while the list is filtered

(3) Double-click the layout.css.moz-document.content.enabled preference to switch the value from false to true

Does that help?

More info on about:config: Configuration Editor for Firefox.

Hmmmm that didn't work. It's worth noting that when I put url(about:privatebrowsing) with the rest of the stuff in userContent.css, the image will load in private browsing. I don't want the same image to load for about:home and about:private browsing, but that seems to be the only way to get an image to load into private browsing. If you can think of a way to make it so that I have a specific image for one but the code is still within the the main code block below I would really appreciate it.

@-moz-document url(about:newtab), url(about:home), url(about:preferences), url(about:blank), url(about:privatebrowsing) { 



/* Makes the search bar on the home screen round with red text and a red border when not clicked */
#newtab-search-text,
  #searchSubmit{
    fill: #b24747 !important;
    border-radius: 48px !important;
    border-color: #b24747 !important;
    box-shadow: none !important;
    background-color: none !important;
    color: none !important;
    font-family: helvetica !important
  }
  


/* Changes the color of the glow when you click the search bar on the home screen */
.search-wrapper .search-inner-wrapper:active input, .search-wrapper input:focus {
  border: 3px solid #B24747 !important;
  box-shadow: 0 0 7px #993d3d !important;
  }


/* Changes the background color inside of the search bar */
#newtab-search-text{
  background-color: #1a1a1a !important;
  color: #b24747 !important;
}



/* Changes the gear color and removes the hover */
.prefs-button button {fill: #b24747 !important;}

.prefs-button button:hover, .prefs-button button:focus {
    background-color:  transparent !important; }	
 


/* Turns of search suggestions on the home screen */
.contentSearchSuggestionTable {display: none !important;}



/* Changes the home screen color */
body{ background-color: #1a1a1a !important }



/* Centers logo and wordmark */
.search-wrapper .logo-and-wordmark {
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 49px; }




/* Makes it so that no border appears around the search arrow */
.search-wrapper .search-button:focus, .search-wrapper .search-button:hover {
      background-color: transparent !important;
      cursor: pointer !important; }
.search-wrapper .search-button:active {
      background-color: transparent !important; }


/* Changes the logo on the home screen*/
.logo {background-image: url("Firefox Halo with Paw.png") !important;}



/* Changes the color of the wordmark */
.wordmark { fill: #B24747 !important;}
}



/* Makes the search bar on the home screen round with red text and a red border when not clicked */
#newtab-search-text,
  #searchSubmit{
    fill: #b24747 !important;
    border-radius: 48px !important;
    border-color: #b24747 !important;
    box-shadow: none !important;
    background-color: none !important;
    color: none !important;
    font-family: helvetica !important
  }



/* Changes the color of the glow when you click the search bar on the home screen */
.search-wrapper .search-inner-wrapper:active input, .search-wrapper input:focus {
  border: 3px solid #B24747 !important;
  box-shadow: 0 0 7px #993d3d !important;
  }



/* Changes the background color inside of the search bar */
#newtab-search-text{
  background-color: #1a1a1a !important;
  color: #b24747 !important;
}



/* Turns of search suggestions on the home screen */
.contentSearchSuggestionTable {display: none !important;}



/* Centers logo and wordmark */
.search-wrapper .logo-and-wordmark {
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 49px; }

}

On about:privatebrowsing, the html tag has class="private" so you could try:

/* Changes the logo on the home screen*/
.logo {background-image: url("Firefox Halo with Paw.png") !important;}
  /* For about:privatebrowsing */
html.private .logo {background-image: url("private-image.png") !important;}

Code for about pages needs to be placed in userContent.css.

Doesn't this code work for the about:privatebrowsing page ?

@-moz-document url(about:privatebrowsing){
.logo {background-image: url("Firefox Halo with Paw.png") !important;}
}

@jscher2000 your solution worked! Thank you. One thing I did notice though is that the code pasted below has to be above the moz-document for pages like about:home and about:new tab. I'll update this code as I figure out more parts of styling userContent.css for those who are trying to do this as well.

Here is the final code I used:

@-moz-document url(about:privatebrowsing) {


/* Hides the "You're in private browsing mode" dialog */
.info {
    display: none !important;
}


/* Changes the logo on the private browsing home screen */
html.private .logo {background-image: url(" RELATIVE IMAGE PATHNAME HERE") !important;}



/* Changes the color of the wordmark */
.wordmark {
  fill: #b24747 !important;
}



/* Centers logo and wordmark */
.logo-and-wordmark {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 49px !important;
}



/* Changes the home screen color */
html.private {
    --in-content-page-background: #1a1a1a !important;}
}

One thing I did notice though is that the code pasted below has to be above the moz-document for pages like about:home and about:new tab.

Maybe there's an unclosed } somewhere. You could could add a couple extras to make extra sure that the earlier blocks are closed.