Until recently the inspector had a background colour #dbc3a3 (tan) and a text colour #000080 (dark blue) as well as a font size of 17px. Those changes resulted from code for chrome documents as set out below. The colours and font size have reverted to the defaults as shown in the snapshot.

How do I need to change the code?

https://imgur.com/a/Vfnkopv

@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){
  :root {
      --in-content-page-color: #000080 !important;
      --in-content-text-color: #000080 !important;
      --in-content-page-background: #dbc3a3 !important;
      --in-content-box-background: #e2cfb6 !important;
      --in-content-deemphasized-text: var(--in-content-text-color) !important;
      scrollbar-color: #6495ed #d9d9d9 !important; 
      --background-color-box: var(--in-content-page-background) !important;
      --text-color: var(--in-content-text-color) !important;      
      color:var(--in-content-text-color) !important;
      --background-color-canvas: var(--in-content-page-background) !important;
      --table-row-background-color-alternate: var(--in-content-box-background) !important;    

  menulist > menupopup{ background-color: var(--in-content-page-background) !important; }}}
  
  @-moz-document url-prefix("chrome:") {
  html, body, tr { background-color: #dbc3a3 !important;
    color: #000080 !important;
    font-size: 17px !important; }
  div { background-color: #dbc3a3 !important;
    color: #000080 !important;
    font-size: 17px !important; }
  tr:hover { background-color: #b3d1ff !important; }
  tr.odd:hover { background-color: #b3d1ff !important; }
}

I am not sure how much of the last stanza applied to the inspector.