Light Colors in Oxygen’s Code Editor

This tutorial provides the steps to replace the dark colors in Oxygen‘s code editor with light colors.

This applies to both Easy Posts and Code Block components.

Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to the site’s /wp-content/plugins/my-custom-functionality-master .

Create a file named say, oxy-editor-custom.css in the plugin’s assets/css directory having the following:

/* Bump up the font-size of code in Oxygen's code areas from the default 13px to 15px */
.oxygen-sidebar-code-editor-wrap .CodeMirror {
font-size: 15px !important;
}
.cm-s-default.CodeMirror {
background-color: #F7FAFC !important;
color: #2D3748 !important;
}
.cm-s-default span.cm-keyword {
color: #975A16;
}
.cm-s-default span.cm-string,
.cm-s-default span.cm-string-2 {
color: #2C5282;
}
.cm-s-default span.cm-meta {
color: #434190;
}
.cm-s-default .CodeMirror-cursor {
border-left: solid thin #2D3748;
}
.cm-s-default span.cm-def {
color: #00f;
}
.cm-s-default span.cm-builtin {
color: #30a;
}
.cm-s-default span.cm-operator {
color: #276749;
}
.cm-s-default span.cm-variable {
color: #2A4365;
}
.cm-s-default span.cm-comment {
color: #718096;
}
.cm-s-default span.cm-variable-2 {
color: #553C9A;
}
.cm-s-default span.cm-qualifier {
color: #276749;
}
.cm-s-default span.cm-property {
color: #553C9A;
}
.cm-s-default .CodeMirror-linenumber {
color: #A0AEC0;
}
.cm-s-default span.cm-tag {
color: #3182CE;
}
.cm-s-default span.cm-attribute {
color: #2C7A7B;
}
.CodeMirror-focused .CodeMirror-selected {
background: #CBD5E0 !important;
}

Step 2

Edit plugin.php and add the following inside the custom_enqueue_files() function:

add_action( 'oxygen_enqueue_ui_scripts', 'custom_oxy_editor_css' );
/**
* Loads CSS in Oxygen editor.
*/
function custom_oxy_editor_css() {
if ( class_exists( 'CT_Component' ) ) {
wp_enqueue_style( 'oxy-editor-custom', plugin_dir_url( __FILE__ ) . 'assets/css/oxy-editor-custom.css' );
}
}