This article describes methods which are rather hacky in nature. None of this is officially supported, is likely to break on future versions/evolutions of the UI, and only works under limited circumstance. Proceed at your own risk.

How to apply custom themes to ServiceNow script fields

Step 1: Install a userscript browser extension

You will need to install a user script extension which allows custom javascript/css injection. The one I used is available for chrome and opera, your mileage may vary on other extensions. User JavaScript and CSS

Step 2: Find the theme you want

Download a theme css file from this list here: https://codemirror.net/5/theme/

These themes are officially curated by CodeMirror (the editor SN uses) so they should produce a good result

Step 3: Edit the CSS file

You need to do the following things in order to get the CSS file to overwrite ServiceNow's default styling

1. Change all references of ".cm-s-stylename" to ".cm-s-snc" as this is the tag which ServiceNow has applied to in the HTML.

2. Add a "!important;" flag to the end of every CSS selector. Your file should look something like this at the end.

.cm-s-snc.CodeMirror, .cm-s-snc .CodeMirror-gutters {
  background-color: #282a36 !important;
  color: #f8f8f2 !important;
  border: none;
}
.cm-s-snc .CodeMirror-gutters { color: #282a36  !important}
.cm-s-snc .CodeMirror-cursor { border-left: solid thin #f8f8f0 !important }
.cm-s-snc .CodeMirror-linenumber { color: #6D8A88 !important }
.cm-s-snc .CodeMirror-selected { background: rgba(255, 255, 255, 0.10) !important}
.cm-s-snc .CodeMirror-line::selection, .cm-s-snc .CodeMirror-line > span::selection, .cm-s-snc .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10) !important}
.cm-s-snc .CodeMirror-line::-moz-selection, .cm-s-snc .CodeMirror-line > span::-moz-selection, .cm-s-snc .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10)  !important}
.cm-s-snc span.cm-comment { color: #6272a4;  !important}
.cm-s-snc span.cm-string, .cm-s-snc span.cm-string-2 { color: #f1fa8c  !important}
.cm-s-snc span.cm-number { color: #bd93f9 !important }
.cm-s-snc span.cm-variable { color: #50fa7b !important }
.cm-s-snc span.cm-variable-2 { color: white  !important}
.cm-s-snc span.cm-def { color: #50fa7b  !important}
.cm-s-snc span.cm-operator { color: #ff79c6  !important}
.cm-s-snc span.cm-keyword { color: #ff79c6 !important }
.cm-s-snc span.cm-atom { color: #bd93f9 !important }
.cm-s-snc span.cm-meta { color: #f8f8f2  !important}
.cm-s-snc span.cm-tag { color: #ff79c6  !important}
.cm-s-snc span.cm-attribute { color: #50fa7b  !important}
.cm-s-snc span.cm-qualifier { color: #50fa7b !important }
.cm-s-snc span.cm-property { color: #66d9ef  !important}
.cm-s-snc span.cm-builtin { color: #50fa7b  !important}
.cm-s-snc span.cm-variable-3, .cm-s-snc span.cm-type { color: #ffb86c  !important}

.cm-s-snc .CodeMirror-activeline-background { background: rgba(255,255,255,0.1)  !important}
.cm-s-snc .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

Step 4: Add this code to the Javascript section:

const userStyles = `
.CodeMirror-code div { font-size:15px !important; font-family: "Fira Code" !important; }
.cm-s-snc.CodeMirror, .cm-s-snc .CodeMirror-gutters {
  background-color: #282a36 !important;
  color: #f8f8f2 !important;
  border: none;
}
.cm-s-snc .CodeMirror-gutters { color: #282a36  !important}
.cm-s-snc .CodeMirror-cursor { border-left: solid thin #f8f8f0 !important }
.cm-s-snc .CodeMirror-linenumber { color: #6D8A88 !important }
.cm-s-snc .CodeMirror-selected { background: rgba(255, 255, 255, 0.10) !important}
.cm-s-snc .CodeMirror-line::selection, .cm-s-snc .CodeMirror-line > span::selection, .cm-s-snc .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10) !important}
.cm-s-snc .CodeMirror-line::-moz-selection, .cm-s-snc .CodeMirror-line > span::-moz-selection, .cm-s-snc .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10)  !important}
.cm-s-snc span.cm-comment { color: #6272a4;  !important}
.cm-s-snc span.cm-string, .cm-s-snc span.cm-string-2 { color: #f1fa8c  !important}
.cm-s-snc span.cm-number { color: #bd93f9 !important }
.cm-s-snc span.cm-variable { color: #50fa7b !important }
.cm-s-snc span.cm-variable-2 { color: white  !important}
.cm-s-snc span.cm-def { color: #50fa7b  !important}
.cm-s-snc span.cm-operator { color: #ff79c6  !important}
.cm-s-snc span.cm-keyword { color: #ff79c6 !important }
.cm-s-snc span.cm-atom { color: #bd93f9 !important }
.cm-s-snc span.cm-meta { color: #f8f8f2  !important}
.cm-s-snc span.cm-tag { color: #ff79c6  !important}
.cm-s-snc span.cm-attribute { color: #50fa7b  !important}
.cm-s-snc span.cm-qualifier { color: #50fa7b !important }
.cm-s-snc span.cm-property { color: #66d9ef  !important}
.cm-s-snc span.cm-builtin { color: #50fa7b  !important}
.cm-s-snc span.cm-variable-3, .cm-s-snc span.cm-type { color: #ffb86c  !important}

.cm-s-snc .CodeMirror-activeline-background { background: rgba(255,255,255,0.1)  !important}
.cm-s-snc .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }`;

// Make UserStyles  a copy of your CSS side, the below class simply is used to inject into the content view iframe.

class CSSInject {
    styles = "";
    href = "";
    id = 0;
    iframe = undefined;
    form_id = "";
    contentDocument = undefined;
    intervals = [];
    constructor(id){
        this.id = id;
        this.href = window.location.href;
        this.styles = userStyles; 
        var css = document.createElement('style'); 
        css.type = 'text/css'; 

        if (css.styleSheet)  
            css.styleSheet.cssText = this.styles; 
        else  
            css.appendChild(document.createTextNode(this.styles)); 
        this.css = css;
    }

    log(msg){
        console.log("CSSInject", msg);
    }

    setStylesIframe(){

        /* Append style to the tag name */ 
        this.contentDocument.getElementsByTagName("head")[0].appendChild(this.css); 
        this.log("Styles set")
    }

    clearIntervals(){
        for(var i of this.intervals){
            clearInterval(i);
        }
    }


    setIframe(element){
        if(element){
            this.iframe = element;
            this.log("New iframe set");
            var doc;
            if(element.document)
                doc = element.document;
            else if (element.contentDocument)
                doc = element.contentDocument;
            this.log(doc);
            if(typeof doc == "undefined"){
                throw new Error("contentDocument undefined");
            }
            if(doc.querySelector("title") == null){
                throw new Error("Page not loaded");
            }

            this.contentDocument = doc;
            this.log("contentDocument set");

            this.form_id = this.iframe.g_form.getUniqueValue();
            this.log("Form id set as " + this.form_id);

            return true;
        } else {
            throw new Error("Element not passed");
        }
    }
}


var inj = new CSSInject(Date.now());

if(window.location.href.includes("/now/nav/ui/classic")){
    loadStyles();
}

function loadStyles(){
    var int = setInterval(() => {
        inj.intervals.push(int);
        let success = false;
        try{

            inj.log("Trying to fetch iframe");
            success = inj.setIframe(window.gsft_main);
        } catch(e){
            console.error(e);
        }
        if(success){
            clearInterval(int);
            inj.log("Setting styles")
            inj.setStylesIframe();
            monitor();
        }
    }, 50)
}

function monitor() {
        window.gsft_main.addEventListener("unload", () => {
            inj.iframe = undefined;
            inj.contentDocument = undefined;
            inj.form_id = "";
            inj.log("Iframe unloaded, loading again");
            loadStyles();
        })
}

Tested and works in Polaris UI, both when popped in and popped out. Untested pre-polaris UI.