How to change the Code Block Theme

If you often add custom CSS or JS codes in Oxygen, you probably found out already that the Code editor's theme doesn't look great. The colors are kind of washed-out, with a very annoying 'red' that makes it hard to read, especially after working long hours at night ;)

By chance, Abdelouahed has made a script to make the editor looks way better, as you can see from these screenshots (before / after) :

To change the Code Editor Theme, simply use the plugin Advanced Scripts (affiliate link) and add the following code. Be sure to select the type CSS: Compile SCSS Code and enter oxygen_enqueue_ui_scripts as the Hook name.

/*
Title:     Oxygen Code Editor Theme
Type:      CSS > Compile SCSS Code
Location:  Custom Hooks
Hook name: oxygen_enqueue_ui_scripts
Priority:  10
*/

#oxygen-ui {
    .cm-s-default {
        &.CodeMirror {
            background-color: #263238 !important;
            color: rgba(233, 237, 237, 1) !important;
            font-size:15px !important;
        }
        .CodeMirror-gutters {
            background: #263238 !important;
            color: rgb(83, 127, 126) !important;
            border: none !important;
        }
        .CodeMirror-guttermarker,
        .CodeMirror-guttermarker-subtle,
        .CodeMirror-linenumber {
            color: rgb(83, 127, 126);
        }
        .CodeMirror-cursor {
            border-left: 1px solid #f8f8f0;
        }
        div.CodeMirror-selected,
        &.CodeMirror-focused div.CodeMirror-selected,
        .CodeMirror-line::selection,
        .CodeMirror-line::-moz-selection,
        .CodeMirror-line > span::selection,
        .CodeMirror-line > span::-moz-selection,
        .CodeMirror-line > span > span::selection,
        .CodeMirror-line > span > span::-moz-selection {
            background: rgba(255, 255, 255, 0.15) !important;
        }
        .CodeMirror-activeline-background {
            background: rgba(0, 0, 0, 0.2);
        }
        .cm-keyword {
            color: rgba(199, 146, 234, 1);
        }
        .cm-operator {
            color: rgba(233, 237, 237, 1);
        }
        .cm-variable-2 {
            color: #80cbc4;
        }
        .cm-variable-3,
        .cm-type {
            color: #82b1ff;
        }
        .cm-builtin {
            color: #decb6b;
        }
        .cm-atom {
            color: #f77669;
        }
        .cm-number {
            color: #f77669;
        }
        .cm-def {
            color: rgba(233, 237, 237, 1);
        }
        .cm-string {
            color: #c3e88d;
        }
        .cm-string-2 {
            color: #80cbc4;
        }
        .cm-comment {
            color: #dcedc8;
        }
        .cm-variable {
            color: #82b1ff;
        }
        .cm-tag {
            color: #80cbc4;
        }
        .cm-meta {
            color: #80cbc4;
        }
        .cm-attribute {
            color: #ffcb6b;
        }
        .cm-property {
            color: #80cbae;
        }
        .cm-qualifier {
            color: #decb6b;
        }
        .cm-variable-3,
        .cm-type {
            color: #decb6b;
        }
        .cm-tag {
            color: rgba(255, 83, 112, 1);
        }
        .cm-error {
            color: rgba(255, 255, 255, 1);
            background-color: #ec5f67;
        }
    }
}

source : oxy-cm-theme.scss