Changing the white background to blue

Sometimes the client wants to use white text on their web site. The text will then become invisible in the wp editor inside the backend of a post or page. One way to handle this is to use a editor stylesheet.

The editor CSS stylesheet adjusts how the text and background looks like inside the wp editor in a page or post. As one modify to create ones own custom view of what the edit area looks like.

The default theme Twenty Sixteen uses an editor stylesheet which is located inside the CSS folder and called editor-style.css. Copy the file to your own theme. One has to also define the usage of the editor style so copy the add_editor_style code from the functions file of Twenty Sixteen to your theme functions file.

An example.
The client uses a deep blue hex code #0066bf as the background color and a white text color.
To make it easier on the client when they work on a page/post I will then add a editor style stylesheet that adds a background color inside the edit area of a page or post to the same blue color.

Adding a blue background to the WP editor

Here is some of the code inside the editor-style.css from Twenty Sixteen as well as the background color that I added to create the blue background. There are a lot of modifications one can do.

/*
 Theme Name: Twenty Sixteen
 Description: Used to style the TinyMCE editor.
 */
 /**
 * Table of Contents:
 *
 * 1.0 - Body
 * 2.0 - Typography
 * 3.0 - Elements
 * 4.0 - Alignment
 * 5.0 - Caption
 * 6.0 - Galleries
 * 7.0 - Audio / Video
 * 8.0 - RTL
 */
 /**
 * 1.0 - Body
 */

body {
 color: #1a1a1a;
 font-family: Merriweather, Georgia, serif;
 font-size: 16px;
 font-weight: 400;
 line-height: 1.75;
 margin: 20px 40px;
 max-width: 600px;
 vertical-align: baseline;
 /* ADDED */
 background-color: #0066bf;
 }

Add the following code to your functions.php file:

/*
 * This theme styles the visual editor to resemble the theme style,
 * specifically font, colors, icons, and column width.

add_editor_style('editor-style.css');
 */

The above will help a lot when using a white text color throughout the site. Modify the CSS file to fit your needs.

Some extra resources:
Add Background Color (Highlight) Option (to the text) in WordPress Editor TinyMCE
https://gist.github.com/thierrypigot/7fe4b3e40735d4b9a3ca