Preview:
/*
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;
        }
    }
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter