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

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: