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.
Install and activate My Custom Functionality plugin.
Connect to your hosting account using /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;
}
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' );
}
}
Session expired
Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.