How to Change Default Text Color of WordPress Visual Editor (TinyMCE)

WordPress uses tinyMCE as its editor. This is the editor that you use to edit your WordPress posts and pages. By default, the color of the text when you type inside the editor box, is gray, against white background. It’s fine if you like that combination of color, but I personally don’t like gray text against white background very much, unless the font is fairly big, like what you are seeing right now. My eyes are not good with looking at small gray text against white background for a long time.

So how do you change the default gray text to, let’s say, black, for example? Or how do we change the overall styling and the appearance of our tinyMCE editor in general? Maybe you prefer a darker background and lighter font to go with your editor, for example. How do we go about doing this?

The easiest way is to use our own custom CSS file, so that we could style the editor however we want. Referring to WordPress Codex, this is how you do it:

First, create your custom CSS file called editor-style.css (or whatever name you want) and place it ideally in the root of your theme’s directory.

function my_own_tinymce_style( $in ) {
	$in['content_css'] = get_template_directory_uri() . "/editor-style.css";
	return $in;
}
add_filter( 'tiny_mce_before_init', 'my_own_tinymce_style' );

Second, copy and paste the above code into your functions.php file. Now drop all your custom styling into the editor-style.css file.

Example:

body#tinymce.wp-editor {
    font-size: 16px;
    color: #000;
}

Now open your editor again, you will notice the text you’re typing inside the editor is now black against white! Walla!

Alternatively, you could just download this plugin I created on Github, it does the same thing explained in this post. Download ZIP file.