Yesterday I wanted to adapt the CKEditor in my Laravel project for a dark background. (Note that while this will work with any CKEditor, not just in Laravel.) That shouldn’t be a problem, I found and installed the Moono Dark Theme.
* In Laravel the skins folder is located at public/vendor/unisharp/laravel-ckeditor
And don’t forget to add this line to the config.js file to enable the skin:

config.skin = 'moono-dark';

I thought I was done, but it looked like this:

I love the bar with the buttons, that’s perfect. But the background of the text area is still white and that’s no good, it’s very harsh on the dark site. It should be easy to find a css selector for it and change it though, right? As it happens… no. No it is not easy. Google showed me a lot of people who had the same problem and solutions that didn’t work. I updated CKEditor to 4.12 hoping that would make a difference, but it did not.

Here’s how I changed it.

First I decided to turn off the iframe by installing the Div Editing Area plugin. I’m sure there’s a way to change the iframe but for this method you’ll have to install the plugin first.
*In Laravel the plugins folder is located at: public/vendor/unisharp/laravel-ckeditor/plugins
Enable the plugin in the config.js file:

config.extraPlugins = 'divarea';

So now you can go in to /skins/moono-dark/editor.css and replace the following classes. I didn’t change all the content here, but to make it easier I’ve included everything within the affected classes so you can copy and paste to replace them. Now I’m sure I could have overridden these things in my project’s css file, but I wanted to keep it contained so that I can re-use it for other projects.

.cke_bottom {
	padding: 6px 8px 2px;
	position: relative;
	border-top: 1px solid #0d0d0d;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
	background: #1f1f1f;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#333),
		to(#1f1f1f)
	);
	background-image: -moz-linear-gradient(top, #333, #1f1f1f);
	background-image: -webkit-linear-gradient(top, #333, #1f1f1f);
	background-image: -o-linear-gradient(top, #333, #1f1f1f);
	background-image: -ms-linear-gradient(top, #333, #1f1f1f);
	background-image: linear-gradient(top, #333, #1f1f1f);
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#ebebeb',endColorstr='#cfd1cf');
}
.cke_wysiwyg_div {
	display: block;
	height: 100%;
	overflow: auto;
	padding: 10px;
	outline-style: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cke_wysiwyg_div {
	background-color: #000;
	color: #CCC;
}
.cke_inner {
	display: block;
	-webkit-touch-callout: none;
	background: #000;
	padding: 0;
}
.cke_path_item,
.cke_path_empty {
	display: inline-block;
	float: left;
	padding: 3px 4px;
	margin-right: 2px;
	cursor: default;
	text-decoration: none;
	outline: 0;
	border: 0;
	color: #888;
	text-shadow: 0 1px 0 #000;
	font-weight: bold;
	font-size: 11px;
}
a.cke_path_item:hover,
a.cke_path_item:focus,
a.cke_path_item:active {
	text-decoration: none;
	background-color: rgba(0, 0, 0, 0.2);
	color: #888;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset,
		0 1px 0 rgba(255, 255, 255, 0.5);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset,
		0 1px 0 rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset,
		0 1px 0 rgba(255, 255, 255, 0.5);
}
/* add this class in if you want to fix the spacing at the top */
/* my custom theme already formats paragraph tags so this you might not need it */
.cke_inner p:first-child {
	margin-top: 0;
}

This will change the main background, the border, and the bar at the bottom with the path items. Now it looks like this!

I hope this helps someone! Let me know if you’ve figured out a solution for the iframe version.