This tutorial provides the steps to replace the dark colors in Oxygen‘s code editor to 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

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: