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' );
	}

}

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: